【JavaScript】孫画面から親・子画面へ処理を実行

孫画面から親・子画面へアクセスする方法についてよく知らなかったので、
色々と試してみました。

親画面ソース

子画面、孫画面を開いた時に変数childWindowと変数grandChildWindowに対してWindow情報をセットする感じです。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>WindowTest</title>
        <script type="text/javascript">
            // 子画面
            var childWindow = null;
            // 孫画面
            var grandChildWindow = null;

            // サブウィンドウ表示
            function openSubWindow() {
                window.open("subWindow.html", "subWindow");
            }
            // サブ画面から実行
            function actionFromSubWindow() {
                alert("サブ画面から実行");
                return 1;
            }
            // 子画面にアラート表示
            function actionChildWindow() {
                if (childWindow != null) {;
                    childWindow.alert("親画面から実行");
                }
            }
            // 孫画面にアラート表示
            function actionGrandChildWindow() {
                if (grandChildWindow != null) {
                    grandChildWindow.alert("親画面から実行");
                }
            }
        </script>
    </head>
    <body>
        <h1>MainPage</h1>
        <input type="button" onclick="openSubWindow();" value="OpenWindow">
        <input type="button" onclick="actionChildWindow();" value="FocusChildWindow">
        <input type="button" onclick="actionGrandChildWindow();" value="FocusGrandChildWindow">
    </body>
</html>

子画面ソース

親画面の使いまわしです。
閉じた時の処理なども追加した方がいいかもです。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SubWindow</title>
        <script type="text/javascript">
            var mainWindowInfo = null;
            var subWindowInfo = null;

            // 読み込み時にメイン画面の情報をセットする
            window.onload = function() {
                if (window.opener != null) {
                    mainWindowInfo = window.opener;
                }
            }

            // サブウィンドウ表示
            function openSubWindow() {
                subWindowInfo = window.open("subWindow2.html", "subWindow2");
            }
            // サブ画面から実行
            function actionFromSubWindow() {
                alert("サブ画面から実行");
                return 2;
            }
        </script>
    </head>
    <body>
        <h1>SubPage</h1>
        <input type="button" onclick="openSubWindow();" value="OpenWindow">
    </body>
</html>

孫画面ソース

親画面、子画面に対して処理を実行するコードを書いています。
一応、IE、Edge、Chrome、FFの最新版で試して実行できたので問題ないかと…。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SubWindow</title>
        <script type="text/javascript">
            // 呼び出し元の画面を保持する
            var mainWindowInfo = null;

            // 読み込み時にメイン画面の情報をセットする
            window.onload = function() {
                if (window.opener != null && window.opener.opener != null) {
                    window.opener.opener.grandChildWindow = window;
                    mainWindowInfo = window.opener.opener;
                }
            }

            // サブ画面から実行
            function actionFromSubWindow() {
                var subWindow = window.opener;

                // サブ画面での処理を実行
                if (subWindow != null){
                    var res = subWindow.actionFromSubWindow();
                }
                // メイン画面での処理を実行
                if (mainWindowInfo != null){
                    var res = mainWindowInfo.actionFromSubWindow();
                }
                return false;
            }
        </script>
    </head>
    <body>
        <h1>SubPage2</h1>
        <input type="button" onclick="actionFromSubWindow();" value="ActionButton">
    </body>
</html>

HTML5の資格をみたい今日このごろ。

親画面ソース

子画面ソース

孫画面ソース

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル