子画面が閉じたことを親画面側で検知させる方法（イベント）

質問失礼致します。

現在、JavaScriptにて以下処理を実装しようとしています。
１、親画面から子画面を開く
２、子画面を閉じる
３、子画面が閉じたことにより、親画面の関数が実行される

javascript
1var win = window.open('', 'child', 'height=100,width=100');
2win.write('<html><head>');
3win.write('<script type="text/javascript">');
4win.write(`<!--
5function clickBtn(){
6    window.close();
7}
8-->`);
9win.write('</script></head><body>');
10win.write('<input type="button" value="閉じる" onClick="clickBtn()">');
11win.write('</body></html>');

３の子画面が閉じる→親画面のイベント（関数）が走り出す、というところで躓いており、どうにか子画面が閉じたことを親画面側で検知させる方法を探しております。

####試したこと
以下のように、子画面が開いた後、子画面が閉じられた場合は検知する処理を書こうとしたのですが、以下ではうまくいきませんでした。

$(win).on('load', function(){
   $(win).on('unload', function () {
       console.log("Hello world");
   });
});

有識者の方、ぜひお力をお借りできれば幸いです。

m.ts10806

2019/01/25 05:54

「試したこと」部分、もう少しコードの全体がわかるような提示の仕方でお願いします。

m.ts10806

2019/01/25 05:57

この書き方だと<script>で囲われてないので子画面のscript実行されないのでは。 `` win.write(``); ``

turutontanchan

2019/01/25 06:09

コメントありがとうございます。大部分を省きすぎて必要なところまで省いてしまいました。失礼しました。コードを追加致しました。試したこと部分は「試したこと」見出しで分けるために上記コードと分断して書いてはいますが、そのまま他コードなど挟むことなく上記コードにくっつけて一続きに書かれています。他にコードはありません。

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

回答4件

親側でイベント設定してやればよいのでは？

javascript
1
2let childfunc = ()=>{
3  console.log("child is closing");
4};
5win = window.open("");
6$(win).on("unload", childfunc);
7

投稿2019/01/25 06:04

tkturbo

総合スコア5572

turutontanchan

2019/01/25 07:15

コメントありがとうございます。こちらの方法でも無事期待通りの挙動を確認することが出来ました！ありがとうございます。追記.これはまた違うお話になるかと思いますが、一応… $(win).on("unload", childfunc);後にデベロッパーツールでchildfunc内でブレークポイントを張り処理を止めると、親画面がブラウザエラーとなりました。なぜかは分かりませんが…。処理を止めなければ問題なく動作しました。

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

ベストアンサー

javascript
1<script>
2function clickBtn(){
3  var nwin = window.open('', 'child', 'height=100,width=100');
4  with(nwin.document){
5    writeln('<html><head>');
6    writeln('<script>');
7    writeln('window.onbeforeunload=function(){');
8    writeln('opener.alert(1)');
9    writeln('return 1;};');
10    writeln('function clickBtn(){this.close();}');
11    writeln('</'+'script></head><body>');
12    writeln('<input type="button" value="閉じる" onClick="clickBtn()">');
13    writeln('</body></html>');
14  }
15
16};
17</script>
18<input type="button" value="開く" onClick="clickBtn()">
19

投稿2019/01/25 06:38

yambejp

総合スコア117632

turutontanchan

2019/01/25 07:09

コメントありがとうございます。上記のonbeforeunloadイベントを使用し無事期待通りの挙動が確認できました。（都合上、親画面から子画面closeを検知するようにしました） ``` var win = window.open('test.html', 'child', 'height=100,width=100'); win.onbeforeunload = function () { 　　//処理 } ``` ありがとうございました！

yambejp

2019/01/25 07:11

onpagehideを利用すれば、確認メッセージなしで閉じられます

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

子画面から親画面のメソッドをキックする方法があるようです。

jsで子ウインドウを開き、子の値を親に返す手段

window.close()の前でキックしてやると良いです。
ただ、そのままChromeで実行するとcross-originエラーが出ますけど（IE11では動きます）

投稿2019/01/25 06:20

m.ts10806

総合スコア80888

turutontanchan

2019/01/25 07:18

コメントありがとうございます。 window.openerで親画面関数を呼び出す方法も試していたのですが、is not functionエラーで呼び出せませんでした。cross-originエラーが直接関係しているのでしょうか…

m.ts10806

2019/01/25 07:19

たぶん呼び出し方ではないでしょうか。 cross-originについては確かWebサーバー上で実行すれば問題ないはずです（なので「そのまま実行すると」と書きました）

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

Javascript
1function rip(win){
2    console.log(win+' is dead');
3}
4if(!window.opener) {
5    window.open('test.html', 'child');
6} else {
7    window.onbeforeunload = function(){
8        window.opener.rip(this.name);
9    }
10}