index.htmlの中にiframeが左右にあります。
左のiframeの中の要素をクリックすると、右のiframeにクリックした要素に合わせたhtmlを表示しています。
左のiframeは、どの要素をクリックしたのかわかるようにするために、色が変わります。
また、要素が多いためスクロール*1もします。
このHTMLにおいて、右のiframe内の要素をクリックしたら、左のiframe内の該当要素をクリックしたかのように、
- 右のiframeにhtmlを表示する。
- 左のiframeの該当要素の色を変える。
- 左のiframeの該当要素が見えるようにスクロールする。
を行わなければならなくなりました。
1.は、同一のiframe内なので、すぐにできました。
2.と3.は、別のiframeのJavaScriptを呼び出さなければなりません。
どうすれば実現できるのかと検索して得た知識を元にして、以下のようにしたらできました。
その方法は、
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
