- ベストアンサー
孫iframeから親，祖親のjava script
孫iframeから親，祖親のjava scriptを実行したい（背景を変えたい） URL: http://motinora.mydns.jp/test/ 構成は以下の如くです． index.html (main)-iframe01:ID header iframe02:ID base ----- iframe03:ID header2 iframe04:ID base2 ここで，孫に当たるiframe04のインプットボタンで，祖親（親，兄弟（iframe03））ウインドウの背景を変えるべく，記事を見ながら試したのですが上手く動きません．以下はiframe04.htmです．各々のhtml内のスクリプトは当然ですが動いています．よい方法をご教示ください． （OS Win11 pro, インターネット オプションション ローカルイントラネット スクリプト許可になっています． ） <!DOCTYPE html> <html lang="ja"> <head> <meta charset="sjift_jis" content="text/html"> <title>iframe04</title> <script type="text/javascript"><!-- function fig(file,text){ var html01 = ''; html01 += '<img src="'+file+'" >'; html01 += '<br clear="all"><span style="color:silver;">' + text + '</span></font>'; document.getElementById('fig').innerHTML = html01; document.body.background='./zback.gif'; } function ret01(){ var html02 = ''; html02 += '<img src="./red.jpg" altt="fig" ><br clear="all"/>'; document.getElementById('fig').innerHTML = html02; document.body.background =''; parent.document.body.background=''; } function mo04a(){parent.document.body.background='./zback.gif';} function mo04b(){header2.document.body.background='./zback.gif';} function mo04c(){base.document.body.background='./zback.gif';} function ret04(){ } function call(){window.opener.myFunc();} function change(){window.parent.document.querySelector("iframe[name='base']").document.querySelector("body").background= "zback.gif";} //--></script> </head> <body> <span style="color:#ff8286">iframe04_ifr04.htm Id:base2</span> <br> <input type="button" value="clic_fig01" style="width:68px;" onclick="fig('white.jpg','White')" > <input type="button" value="Ret" style="border:1px solid #505050;" alt="click" onmouseover="ret01()" > <input type="button" value="on4a" onmouseover="mo04a()"onmouseout="ret04()"> <input type="button" value="on4b" onmouseover="mo04b()"onmouseout="ret04()"> <input type="button" value="on4c" onmouseover="window.opener.mo02()";> <br> <input type="button" value="change" onclick="change()";> <br> <div id="fig"> <img src="./red.jpg" border="0" alt="fig"> <br clear="all" > </div> </body> </html>
- firewoker
- お礼率66% (6/9)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
要素の背景画像を設定させる方法に誤りがあります。 たとえば、親(base) の背景を変更したい時： base.document.body.background='./zback.gif'; これだと background プロパティは style オブジェクトの一部であり、 直接 element.background として設定することはできません。 ここの場合は、次のようにします。 parent.parent.document.getElementById('base').contentWindow.document.body.style.backgroundImage = 'url(./zback.gif)';
その他の回答 (1)
- AIエージェント あい（@OKWAVE-AI）
- ベストアンサー率89% (2715/3019)
あなたの相談内容について、問題解決のためのアドバイスをさせていただきます。現在の構成には、いくつかのポイントで工夫が必要です。 まず、異なるiframe間でJavaScriptからアクセスするためには、そのiframeが同一のドメインでホスティングされている必要があります。異なるドメイン間では、ブラウザのセキュリティ上の制約（Same-Origin Policy）が働き、直接のアクセスは許可されません。以下のアドバイスは、すべてのiframeが同じドメインにホスティングされていることを前提にしています。 次に、親や祖親iframeのDOM要素にアクセスして操作する方法です。以下のコード例では、あなたの構成に合わせて、孫iframe（iframe04）から親iframe（iframe02）および祖親のメインウィンドウの背景色を変更する方法を示しています。 ### 孫iframe（iframe04）のスクリプト例 1. `callback` 関数を親/祖親の範囲内で実行する方法を示します。 ```html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>iframe04</title> <script type="text/javascript"> function changeParentBackgroundColor(color) { // 祖親の背景色を変える window.parent.parent.document.body.style.backgroundColor = color; } function changeSiblingIframeBackgroundColor(color) { // 兄弟iframe（iframe03）の背景色を変える var siblingIframe = window.parent.document.getElementById('header2').contentDocument; siblingIframe.body.style.backgroundColor = color; } function changeOwnIframeBackgroundColor(color) { // 自分の親iframe（base）の背景色を変える window.parent.document.body.style.backgroundColor = color; } </script> </head> <body> <span style="color:#ff8286">iframe04_ifr04.htm Id:base2</span> <br> <input type="button" value="Change Parent Background" onclick="changeParentBackgroundColor('yellow')" /> <input type="button" value="Change Sibling Background" onclick="changeSiblingIframeBackgroundColor('blue')" /> <input type="button" value="Change Own Background" onclick="changeOwnIframeBackgroundColor('green')" /> </body> </html> ``` ### 重要なポイント 1. **安全なドメイン構成**: すべてのiframeが同一のドメインにホスティングされていることを確認してください。この点が満たされないと、ブラウザのセキュリティポリシーにより操作がブロックされます。 2. **適切なアクセスパス**: 親や祖親のiframeのDOM要素にアクセスするためには、適切なパス（親`parent`や祖親`parent.parent`）を使用してください。 3. **iframe IDの正確性**: 各iframeのIDが正しく設定されていることを確認してください（例：`header2`や`base`）。 以上のポイントを参考にして、コードを修正してみてください。これで問題が解決するはずです。さらに詳しい情報が必要な場合は、JavaScriptのクロスドメインポリシーやDOM操作に関するドキュメントを参照すると良いでしょう。 ------------------------------------------------ こちらの回答はAIエージェント「あい」による参考回答です。 有識者からの回答も是非お待ちしています。 OKWAVEのAIに対する取り組みについてはこちらをご確認ください。 https://staffblog.okwave.jp/2023/06/07/10415/
お礼
お礼が遅くなり申し訳ありません．間違いを指摘していただきありがとうございます．例に従って書き換え，動作させてみましたが当方の状況では上手く動作しません（打ち間違い等，当方の問題と思われます．） 引き続き，検証して行きます．ありがとうございました．