ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

iframeから別のiframeのJavaScriptを呼び出す方法

index.htmlの中にiframeが左右にあります。
左のiframeの中の要素をクリックすると、右のiframeにクリックした要素に合わせたhtmlを表示しています。
左のiframeは、どの要素をクリックしたのかわかるようにするために、色が変わります。
また、要素が多いためスクロール*1もします。

このHTMLにおいて、右のiframe内の要素をクリックしたら、左のiframe内の該当要素をクリックしたかのように、

  1. 右のiframeにhtmlを表示する。
  2. 左のiframeの該当要素の色を変える。
  3. 左のiframeの該当要素が見えるようにスクロールする。

を行わなければならなくなりました。

1.は、同一のiframe内なので、すぐにできました。
2.と3.は、別のiframeのJavaScriptを呼び出さなければなりません。

JavaScriptをコーディング
Free Stock photos by Vecteezy

どうすれば実現できるのかと検索して得た知識を元にして、以下のようにしたらできました。

その方法は、
a.右のifrmeにJavaScriptから、index.htmlのJavaScriptを呼び出す。
b.index.htmlのJavaScriptから、左のiframeのJavaScriptを呼び出す。
という方法です。

a.で、右のiframeのJavaScriptから、index.htmlのJavaScriptを、

    window.parent.oya();

で呼び出します。

b.で、index.htmlのJavaScriptから、左のiframeのJavaScriptを、

function oya() {
    document.getElementById('leftframe').contentWindow.left();
}

で呼び出します。

leftframeは、左のiframeタグに割り当てたid属性です。

contentWindow()で、指定したiframeのWindowオブジェクトを取得できるそうです。
developer.mozilla.org


一見するとまどろっこしく感じます。
右のiframeのJavaScriptから、直接左のiframeのJavaScriptを呼び出したいです。
試したところ、getElementById()でエラーが発生しました。
右のiframeからは、直接左のiframeの要素に割り当てたid属性を見つけられません。


当初は、できるのかな?と半信半疑で検索していろいろ試しましたが、無事想定通りの動作をするようになりました。

*1:スクロールについては、別の記事に書きました。 ajya.hatenablog.jp