【JavaScript】親画面から子画面を閉じる方法

2016年12月12日2020年5月4日

親画面から小画面を呼び出した後、親画面のイベントで子画面を閉じる方法について知らなかったので実装してみました。

実装手段

実装手段としては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>

サブウィンドウを利用する時は覚えておくといいかも…？(=ﾟωﾟ)