JavaScriptでポップアップウィンドウにフォーカスできない

下記のコードを実行し、google.comとtranslate.google.comをポップアップで表示させています。
ウィンドウがすでにポップアップしている場合、ポップアップ済みのウィンドウにフォーカスを当てるようにするのが目的です。

google.comの場合うまくいくのですが、translate.google.comの場合、ポップアップ済みのウィンドウにフォーカスが当たらず、新たにポップアップウィンドウが生成されてしまいます。

どのようにすればよいのでしょうか？
OSはWindows、ブラウザはGoogle Chromeです。

よろしくお願いいたします。

html
1<!DOCTYPE html>
2<head>
3  <meta charset="UTF-8">
4  <title>Pop up</title>
5</head>
6<body>
7  <button onclick="popUp();">ポップアップ</button>
8　<script>
9    let myWindow;
10    
11    function popUp() {
12      if (!myWindow || myWindow.closed) {
13        // うまくいく
14        //myWindow = window.open('https://www.google.com/', '', 'width=600,height=600,left=300');
15        
16        // うまくいかない
17        myWindow = window.open('https://translate.google.com/', '', 'width=600,height=600,left=300');
18      } else {
19        myWindow.focus();
20      }
21    }
22  </script>
23</body>
24</html>

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

回答2件

ベストアンサー

推測になりますが、COOPの影響ではないかと思います。

Google翻訳のヘッダを見たところ、以下のものが含まれていました。

cross-origin-opener-policy: same-origin-allow-popups; report-to="TranslateWebserverUi"

HTMLの仕様を見ると、

"same-origin-allow-popups"

This forces the creation of a new top-level browsing context for the document, unless its predecessor specified the same cross-origin opener policy and they are same origin.

HTML Standard

とあり、new top-level browsing context を生成するとなっていました。
おそらく、この影響で一部のプロパティがブロックされているのではないかと思います。

当方で試したところ、↓でクロスオリジンでもアクセス許可されているプロパティが、軒並み拒否されているようでした。
異なるオリジンへのスクリプトからの API によるアクセス | 同一オリジンポリシー - ウェブセキュリティ | MDN

参考：
Cross-Origin-Opener-Policy - HTTP | MDN

投稿2021/07/27 08:52

編集2021/07/27 08:55

Lhankor_Mhy

総合スコア36981

kobo_jp

2021/07/27 09:29

Chromeのデベロッパーツールで当該ヘッダーがあることを確認し、教えていただいたHTML Standardも確認いたしました。私には難解な内容ですが、強制的に新しいウィンドウを生成するということでしょうか。ウィンドウ名の取得を試みてみてもundefinedとなるのは、プロパティへのアクセスがそもそも拒否されていたからなんですね。いろいろ調べていただきご苦労をお掛けいたしました。おかげさまで大変助かりました。また、こうやって原因を探していくんだなということもわかってよかったです。重ね重ねお礼を申し上げるとともにベストアンサーとさせていただきます。本当にありがとうございました。

Lhankor_Mhy

2021/07/27 09:42

お役に立てたようで何よりです。ですが、この回答はあくまで推測ですので、別の原因がある可能性もありますので、ご留意ください。（window.closed が、HTMLの仕様に含まれていないので、ドキュメントを見つけにくい、という事情もあります）

kobo_jp

2021/07/27 09:53

承知いたしました。オリジン間リソース共有等について何も知らなかったので、今調べていたところでした。ウェブサービスを公開することを目標としているので、もっとセキュリティ関連について勉強しなきゃいけないと思いました。勉強の手がかりを教えていただいた気がします。ありがとうございました。

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

第２引数に名前を入れてあげるとうまくいくと思います。
ここでは popupWindow としていますがなんでもよいです。

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Pop up</title>
</head>
<body>
  <button onclick="popUp();">ポップアップ</button>
　<script>
    let myWindow;

    function popUp() {
      if (!myWindow || myWindow.closed) {
        // うまくいく
        // myWindow = window.open('https://www.google.com/', 'popupWindow', 'width=600,height=600,left=300');

        // うまくいかない
        myWindow = window.open('https://translate.google.com/', 'popupWindow', 'width=600,height=600,left=300');
      } else {
        myWindow.focus();
      }
    }
  </script>
</body>
</html>

投稿2021/07/27 06:20