8
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

サブウィンドウが閉じた時に親ウィンドウでイベントを発火する

Last updated at Posted at 2016-02-10

場面想定

サブウィンドウでは閉じる以外の操作が出来ない(リンク等はない)
イベントは全て親ウィンドウで発火、サブウィンドウからイベントを呼ぶことは出来ない
jQuery使用可能環境

処理

$('.link').on('click', function ( e ) {
	e.preventDefault();
	var win = window.open(this.href,'window','width=500,height=500');
	$(win).on('load', function () {
		console.log('開いたよ');
		$(win).on('unload', function () {
			console.log('閉じたよ');
		});
	});
});

注意点

注意点はunloadをバインドするタイミングです。
サブウィンドウを開いてすぐにバインドしてしまうと、開いた直後にunloadが呼ばれてしまいます。
上記対策としてif ( win.closed )の分岐を入れてみましたが、サブウィンドウを閉じた時の動きが怪しく、うまく動きませんでした。
(この原因の調査はしっかりしていません。)

なので、サブウィンドウが開いてからunloadをバインドするようにしています。
これで意図した通りに動きました。

unloadだけで処理したい場合

if ( win.closed )を使用してできました。

$(win).on('unload', function () {
	setTimeout(function () {
		if ( !win.closed ) return;
		console.log('閉じたよ');
	},10);
});

サブウィンドウが閉じるまでの時間として、10msの遅延をすれば良さそうです。
遅延が気持ち悪ければloadの中でunloadをバインドすると良いでしょう。

8
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?