Javascriptで親画面から複数の小画面を閉じる方法

概要
親画面のソースコード
子画面のソースコード

概要

親画面から開いた小画面にメッセージイベントを送信し、小画面側で用意した処理を動かす方法です。
昔はこのような処理をしなくてもよかったと思いますが、昨今はCORSの関係で変わってしまったのですね。
これもメンターさんから質問を受けて懐かしくなって記述しました。

親画面のソースコード

simple_parent.html

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        let windowList = [];

        $(function(){

            // 小画面を開く
            $('#open').click(function () {
                windowList[windowList.length] = window.open('simple_children.html', '_blank')
            });

            // 小画面にメッセージを送信
            $('#send').click(function () {
                $.each(windowList, function (index, windowObj) {
                    windowObj.postMessage({
                        action: 'redirect'
                    }, '*', );
                });
            });

        });
    </script>
</head>

<body>
    <button   id="open" >Open</button>
    </br></br>
    <button   id="send" >Send</button>
</body>

</html>

子画面のソースコード

simple_children.html

<html>

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">

        // メッセージイベントをリスニング
        window.addEventListener('message', function (e) {

            // 送信されて来たactionによって処理を行う。
            switch (e.data.action) {
                case 'redirect':
                    location.href = 'https://google.com';
                    break;
            }
        });
    </script>
</head>

<body>
    小画面
</body>

</html>

結構だーっと一気に動くと結構感動しますよね。
でも各ブラウザの対応とかモバイルブラウザだとか色々考えると自分ではこの仕様でGOは出さないかなと思います。ブラウザが限定されてるイントラ環境とかなら１００歩譲ってOKだすかも。

フォローお願いします！

@marine_menta