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

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


実装手段

実装手段としては2つあります。

  1. addEventListenerunloadを利用する。
  2. 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>


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

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください