現在開いているウィンドウが子ウィンドウであると判定する方法

Question

現在、あるドメインのサイト①から、location.href target=_blank で別のドメインのサイト②を子ウィンドウとして表示するシステムを作成しております。
そこで、子ウィンドウ側にて処理が完了した後の画面で閉じるボタンを設置しようとしています。
閉じるボタンをクリックした際には子ウィンドウを閉じるようにしたいと考えております。

前提
・②のサイトは単独で機能するサイトであり、親ウィンドウにもなりうる
・②から①を子ウィンドウとして表示する動線はない
・②が親ウィンドウの場合は閉じるボタンを非表示にしたい
・①から②を子ウィンドウとして開いた後、①のウィンドウを閉じても②のウィンドウで処理を完了した場合、遷移後の画面で閉じるボタンを表示したい

知りたいこと
親ウィンドウを閉じた後、子ウィンドウ側は自身が子ウィンドウであると判定出来る方法

試したこと

if (!window.opener) {
  // 閉じるボタンを非表示
}

上記のようにwindow.openerで判定して閉じるボタンを非表示にしようとしたが、
親ウィンドウを閉じた後の子ウィンドウでも上記判定がtrueとなってしまい、閉じるボタンが非表示になってしまう

if (window == window.parent) {
  // 閉じるボタンを非表示
}

上記のようにwindow.parentと自身を比較して自身が親ウィンドウかどうかを判定しようとしたが、親ウィンドウを閉じた後の子ウィンドウでも上記判定がtrueとなってしまう

①のサイトから②を別ウィンドウで開く

<a href="②のサイトURL" title="" target="_blank">②のサイト名</a>

上記リンクをクリックにて②のサイトを別ウィンドウで開きます

Comments

[m.ts10806]

WindowをOpenする側の処理もご提示ください。

[think49]

子ウインドウを開いた時点では親ウインドウは存在していると思いますが、同時に親ウインドウを閉じたケースを想定しているのでしょうか

[m.ts10806]

また「PHP」は本件に直接関係ないように思います。

[papinianus]

2は単独で機能するのに子として開かれ遷移したときだけ、閉じるボタンを作りたいという状況がわかりません。具体的な要件として必要性を提示いただけませんか？
また、遷移前提ならgetパラメータをつければよいのではないですか？そういうことはしたくなくてjsで完結することが要件ですか？

[m-maki]

①と②のサイトはそれぞれ単独で機能するサイトですが、一部の入力フォームを共有しています。DBはそれぞれ別々のDBです。①のサイト閲覧者が②のサイトにも記事を投稿したい場合に、一時的に②のサイトの一部のページを別ウィンドウで表示して、投稿が完了した後にはそのウィンドウを閉じる必要があります。

[think49]

子ウインドウを開いた時点では親ウインドウは存在していると思いますが

[papinianus]

単独で機能する➁のページを閉じずに利用継続してはダメなのですか？お買い物を続ける、みたいなことはしてはだめなのですか？➁を単独で開いたら投稿後に継続利用できるはずですよね？
think49様の疑念は、開いたあと事後的に親をユーザが閉じた、と解釈してます

[m-maki]

ご指摘の通り、子ウィンドウを開いた時点では親ウィンドウは存在しています。その後子ウィンドウで画面遷移をして記事の投稿完了画面に遷移した時に、親ウィンドウが閉じられている場合にどうするかを検討しております。

[m-maki]

依頼主の要望で②のページでの投稿が終わったら、ウィンドウを閉じてほしいということで、今回のような検討内容となっています。

Answer 1

上記のようにwindow.openerで判定して閉じるボタンを非表示にしようとしたが、

親ウィンドウを閉じた後の子ウィンドウでも上記判定がtrueとなってしまい、

開いた時点で一度判定すればいい話ではないでしょうか？

Comments

[m-maki]

②を開いた後、②での処理を進め完了画面に遷移するまでの間に、①のウィンドウを閉じることがある為、完了画面に遷移する際の状態を見る必要があると考えております。

[m-maki]

２のサイトを開いた時点で判定を行い、パラメータ等を保持して持ち回し、完了画面でその値を見て戻るボタンを表示するような方向で検討してみます。

Answer 2

名前をつけて開いてthis.nameを参照したらどうでしょう？

• parent.html

<script>
window.addEventListener('DOMContentLoaded', function(e){
  var hoge;
  document.querySelector('#op').addEventListener('click',function(e){
    hoge=window.open('child.html','hogehoge');
  });
  document.querySelector('#cl').addEventListener('click',function(e){
    if(hoge) hoge.close();
  });
});
</script>
<input type="button" value="open" id="op">
<input type="button" value="close" id="cl">

• child.html

<script>
window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('#hoge').textContent=this.name;
});
</script>
<div id="hoge"></div>