Java Script 親ウィンドウから子ウィンドウを別ウィンドウで開いて、値を返したい。 (Chrome)

いつもお世話になっています。表題の件、うまくいかず困っています。
ネット検索にて、たくさんのサンプルコードが有るので、いろいろコピーして試していますが、
どれも上手くいきません。
ブラウザは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のアクセスをブロックしている？んでしょうか

int32_t

2022/09/30 04:57 編集

子ウィンドウで開発者ツールを開いていると、ボタンを押したときにコンソールにエラーが出ていませんか?

shinoharat

2022/09/30 05:05 編集

getElementByName じゃなくて getElementsByName かと思います。

masakifukuta

2022/10/03 02:03

ご指摘ありがとうございます。スペル修正しました。現象は治りませんでした。

行動規範の内容に同意します

回答2件

自己解決

他のサイトでよく記載されているように、chromeの問題らしく、
Microsoft edgeでは、動作確認出来ました。そちらで進めようと思います。
有難うございました。

投稿2022/10/03 02:30

masakifukuta

総合スコア58

int32_t

2022/10/03 03:41

> 他のサイトでよく記載されているように、chromeの問題らしく、どんなサイトにどんなことが記載されているのでしょうか。 ChromeとEdgeは中身が同じなので、基本的に同じ動作かと思ってました。

行動規範の内容に同意します

javascript
1objRef.document.getElementByName(
2↓↓↓
3objRef.document.getElementsByName(

投稿2022/09/30 05:25

yambejp

総合スコア118164

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問