親画面から小画面を呼び出した後、親画面のイベントで子画面を閉じる方法について知らなかったので実装してみました。
実装手段
実装手段としては2つあります。
- addEventListenerとunloadを利用する。
- onunloadを利用する。
1.addEventListenerとunloadイベントを利用する
サンプル
<html>
<head>
<script type="text/javascript">
// アンロード時にサブ画面を閉じる
window.onunload = function() {
closeWindow();
}
var subWindow;
// OPEN
function openWindow() {
subWindow = window.open("http://google.com", 'test', 'width=400, height=300, menubar=no, toolbar=no, scrollbars=yes');
window.focus();
subWindow.focus();
}
// CLOSE
window.addEventListener('unload', function(event) {
if (typeof subWindow != "undefined") {
subWindow.close();
}
});
</script>
</head>
<body>
<!-- OPENボタン -->
<input type="button" value="OPEN" onclick="openWindow();" />
</body>
</html>
MEMO
この方法が推奨されているみたいです。
2.onunloadイベントを利用する
サンプル
<html>
<head>
<script type="text/javascript">
// アンロード時にサブ画面を閉じる
window.onunload = function() {
closeWindow();
}
var subWindow;
// OPEN
function openWindow() {
subWindow = window.open("http://google.com", 'test', 'width=400, height=300, menubar=no, toolbar=no, scrollbars=yes');
window.focus();
subWindow.focus();
}
// CLOSE
function closeWindow() {
if (typeof subWindow != "undefined") {
subWindow.close();
}
}
</script>
</head>
<body>
<!-- OPENボタン -->
<input type="button" value="OPEN" onclick="openWindow();" />
<!-- CLOSEボタン -->
<input type="button" value="CLOSE" onclick="closeWindow();" />
</body>
</html>
サブウィンドウを利用する時は覚えておくといいかも…？(=ﾟωﾟ)
