window.open()で開いたタブのURLを書き換えられた場合の対応

Question

よろしくお願いします。

前提・実現したいこと

• リンクをクリックしたら別タブでページを開きたい。
• クリックするたびにタブが増えるのではなく、1 つのタブを使い回したい。

対応ブラウザ

• 最終的には Edge, Chrome で動作するようにしたいです。
• ひとまず Edge でテストしています。今回のエラーも Edge で起きています。

発生している問題・エラーメッセージ

• リンククリック時に呼んでいる関数内で、window.open(uri, "HOGE") で別タブを開いています。
  素直にリンクをクリックしている分には希望通りの動きをします。
  

• 開いた別タブのアドレスバーを手打ちで変更し、google.com など外部サイトに遷移すると
  後述「該当のソースコード」の ★★★ の行で JavaScript エラーが出ます。

  Uncaught DOMException: Blocked a frame with origin "http://localhost" from accessing a cross-origin frame.

該当のソースコード

<a href="javascript:showPreview(111)">111</a>
<a href="javascript:showPreview(222)">222</a>

let _win = null;
function showPreview(id) {
    let uri = "../File/Preview?id=" + id;

    // リンクをクリックした際、前回の画面を一旦クリアしたい
    if (_win && _win.closed == false) {
        _win.document.body.innerHTML = "";  //★★★
    }

    _win = window.open(uri, "MyPreview");
}

なお innerHTML = "" している箇所の if 文を削除すると、
エラーは出ず、タブがアクティブになりますが、ページは変わりません（外部サイトのまま）

試したこと

location=no

• window.open の際に「アドレスバーを表示しないオプション」を指定しましたが、これだと別タブではなく 別ウインドウで開いてしまいました。

window.open(uri, "MyPreview", "location=no")

target="xxx"

• JavaScript ではなく、href に URL を指定して target="MyPreview" で別タブを開く方法も試しましたが、開いた別タブの URL を外部サイトのものに書き換えると
  エラーは出ず、タブがアクティブになりますが、ページは変わりません（外部サイトのまま）

<a href="../File/Preview?id=111" target="MyPreview">111</a>

追記：location.href をセット

• 別タブの URL を外部サイトのものに書き換えた後 以下を実行すると、
  エラーは出ず、タブがアクティブになりますが、ページは変わりません（外部サイトのまま）
  

• なおコメントアウトしている console.log() を生かすとエラーになります。
  値のセットはエラーにならず無視するけど 参照は許されない...？

if (_win && _win.closed == false) {
    _win.location.href = uri;

    //console.log(_win.location.href);  //★ここで Uncaught DOMException エラー
}

以下のいずれかが出来ないものかと思っています

1. window.open で開いたタブの URL を変更させない。
2. window.open で開いたタブの URL が変更された後、再度こちらから location を変更する。
3. window.open で開いたタブが同一ドメインでなくなっていたら閉じる。（その後 同名で開き直す）

妥協案

最悪どうしようもなければ、以下どちらかにしようと思っています。

• location=no を指定して別ウインドウで開く
• Uncaught DOMException が出る部分を try - catch で囲んで
  エラーになったら "MyPreview_2" など name を変えて開く...？

他に何か方法はないのかなと思い質問させて頂きました。
よろしくお願いします。

Answer 1

ちょっと思い付いたので書いてみました。
try - catch で囲んで、エラーが出たら一度 _win.close() してから開き直します。

このロジックだと以下の挙動になりました。

• 素直にリンクをクリックしている間は 1 つのタブを使い回し。
• 別タブの URL を外部サイトのものに書き換えた後に呼ぶと、そのタブは放置して 新しくタブが開く。以降はそちらのタブを使い回し。

一応 希望する挙動になったと思います。これで良いかな～...

　
もし他にも方法があれば聞いてみたいので、質問はもう少し開けておきたいと思います。
しばらくしたら Close します。よろしくお願いします。

let _win = null;
function showPreview(id) {
    let uri = "../File/Preview?id=" + id;

    // 別タブの URL が外部サイトのものに書き換えられた場合などは
    // 一度タブを閉じて開き直す
    let reopen = false;
    try {

        // リンクをクリックした際、前回の画面を一旦クリアしたい
        if (_win && _win.closed == false) {
            _win.document.body.innerHTML = "";
        }

        _win = window.open(uri, "MyPreview");

        if (_win.document.domain != window.document.domain) {
            reopen = true;
        }

    } catch (ex) {
        //console.error(ex);
        reopen = true;
    }

    // reopen フラグが立っていたら一度タブを閉じて開き直す
    if (reopen) {
        _win.close();
        _win = window.open(uri, "MyPreview");
    }
}

Answer 2

Same origin ポリシーがあって、子ウィンドウであっても別ドメインであればほとんどの権限はありません。読み書きができるとやりたい放題できてしまうので。

ブラウザによって許可されているものは違うのですが Firefox だと以下のプロパティは許可されるので以下のように書けます。
https://developer.mozilla.org/ja/docs/Web/Security/Same-origin_policy#window

  if (!_win) {
    _win = window.open(uri, "MyPreview");
  } else {
    _win.location.href = uri
    _win.focus()
  }

(安全なアカウント・ゲストなどで)特定のセキュリティを外したウィンドウを用意してそこでのみ動かすのも方法の一つかもしれません。(拡張機能や flags、起動オプションなどで)

Comments

[anozon]

Chrome (Chromium) の場合の仕様の調べ方がわからなくて探したんですが見つからなかったのであれば僕も知りたいです。

[Lhankor_Mhy]

横からすみません。
ご提示のプロパティ一覧は、Firefoxのものではなくて、HTMLの仕様だと思います。
Firefox と Chrome がこの仕様に従っているという保証はないですが、そうでなかったとしたらバグレポートが上がっていると思いますので、そのように動作すると期待していいと思います。

[sk_3122]

回答ありがとうございます。

> 読み書きができるとやりたい放題できてしまうので。
ですよねー...

ちなみに質問を編集して「追記：location.href をセット」を追記しました。
Edge, Chrome は location.href をセットしてもページが変わりませんでした。
Firefox なら OK なんですね... 難しい...

[sk_3122]

> HTMLの仕様
あ、なるほど　そうなんですね...
ありがとうございます

[anozon]

ありがとうございます。
https://codepen.io/anozon/pen/oNWMdqW
こちらで検証して Chrome と Firefox と Safari で別々の挙動をしたのでおかしいなと思いました。
Chrome の場合は質問にあるように ドメインが変わった場合 location.href の書き換えなどが動作してなさそうです。