Q&A
子ウィンドウで開発者ツールを開いていると、ボタンを押したときにコンソールにエラーが出ていませんか?
いつもお世話になっています。表題の件、うまくいかず困っています。
ネット検索にて、たくさんのサンプルコードが有るので、いろいろコピーして試していますが、
どれも上手くいきません。
ブラウザはchromeです。adblockは動作禁止、JavaScript動作可能の設定です。
下記、コードにてparent.htmlからchild.htmlを開いた後、child.htmlのscriptで、window.openerを参照した所で
scriptの実行が停止するらしく、alert("ここまでの動作確認用_2");
alert("ここまでの動作確認用_2");
以降が実行されていません。
どなたか、原因・対処方法。参考になるサイトなどご教授願います。
よろしくお願いいたします。
parent.html
<html> <head> <meta charset="utf-8" /> <script Language="JavaScript"> var url = "http://localhost:8080//MyWebPage/window_opener/child.html"; function openWindow() { window.open(url, "_blank", "width=500,height=240"); window.open(url, "_blank", "popup=yes", "width=500,height=240"); // ↓ 以下２行、子window で 親windowを参照出来ない。 //window.open(url, '_blank', "width=500,height=240").opener = null; //window.open(url, "_blank", "noreferrer"); }; </script> </head> <body> <!-- aタグでテスト --> <a href="http://localhost:8080//MyWebPage/window_opener/child.html" target="_blank" rel="noopener noreferrer"> click </a> <br> <!-- JS でテスト --> <form name="frm1"> <input type="button" onclick="openWindow()" value="Send"> <input type="text" id="input" name="box" value="返ってくる値"> </form> </body> </html>
child.html
<html> <head> <meta charset="utf-8" /> <script Language="JavaScript"> // 親windowの記述 // <form name="frm1"> // <input type="button" onclick="openWindow()" value="parent"> // <input type="text" id="input" name="box" value="返ってくる値"> // </form> function setData() { let objRef = window.opener; if (!objRef || objRef.closed) { alert("親ウィンドウが確保出来ていない。"); // window.opener 再設定？ objRef.location = "http://localhost:8080//MyWebPage/window_opener/parent.html"; // window.close(); } alert("ここまでの動作確認用_1"); // let returnRef = objRef.document.getElementById("input"); // ↓ ここで実行が停止している模様 let returnRef = objRef.document.getElementByName("box"); if (!returnRef) { alert("オブジェクトが確保できてない。"); } alert("ここまでの動作確認用_2"); // ココから以下、いろいろな構文を試したが、動作しない。 //alert(objRef.document.getElementById("input").value); //window.opener.frm1.input.value = document.getElementById("input").value; objRef.frm1.input.value = "return value"; //alert(objRef.document.getElementById("input").value); //window.opener.frm1.input.setData("test"); alert("ここまでの動作確認用_3"); window.close(); } </script> </head> <body> <input type="text" id="input" value="returnの値"> <input type="button" value="return" onclick="setData()"> </body> </html> コード
window.open(url, "_blank", "width=500,height=240"); ↓新しいタブで開く。に変更。toolbarが操作できるようにする。 window.open(url, "menubar=yes , toolbar=yes");
child.htmlが表示された時、Chromeのデベロッパーツールのコンソールに、
下記のエラーが表示されているのを、見えるようになりました。
child.html:27 Uncaught DOMException: Blocked a frame with origin "http://localhost:8080" from accessing a cross-origin frame.
at setData (http://localhost:8080//MyWebPage/window_opener/child.html:27:30)
at HTMLInputElement.onclick (http://localhost:8080//MyWebPage/window_opener/child.html:53:59)
localhost:8080のアクセスをブロックしている？んでしょうか
getElementByName じゃなくて
getElementsByName かと思います。
ご指摘ありがとうございます。
スペル修正しました。
現象は治りませんでした。
回答2件
0
自己解決
他のサイトでよく記載されているように、chromeの問題らしく、
Microsoft edgeでは、動作確認出来ました。そちらで進めようと思います。
有難うございました。
投稿2022/10/03 02:30
総合スコア58
> 他のサイトでよく記載されているように、chromeの問題らしく、
どんなサイトにどんなことが記載されているのでしょうか。
ChromeとEdgeは中身が同じなので、基本的に同じ動作かと思ってました。
0
javascript
1objRef.document.getElementByName( 2↓↓↓ 3objRef.document.getElementsByName(
投稿2022/09/30 05:25
総合スコア114779
あなたの回答
tips
プレビュー
