ホーム > JavaScript / jQuery > [JavaScript]子ウィンドウから親ウィンドウに値を渡す

[JavaScript]子ウィンドウから親ウィンドウに値を渡す

  • 公開日：2015/8/11
この記事は最終更新日から9年以上が経過しています。

メインウィンドウ（親ウィンドウ）からサブウィンドウ（子ウィンドウ）を開き、子ウィンドウから親ウィンドウに値を渡して、子ウィンドウを閉じる動き。

言葉で動きを説明してもわかりにくいのでデモサイトを用意してみました。
デモはこちら

「子ウィンドウを開く」リンクで新しくウィンドウを開き、そのウィンドウで入力した値を元の親ウィンドウに渡しています。

index.html（親ウィンドウ）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang=&quot;ja&quot;>
<head>
    <meta charset=&quot;utf-8&quot;>
    <meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;>
    <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;>
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>子ウィンドウから親ウィンドウに値を渡す</title>
 
    <!-- Bootstrap -->
    <link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css&quot;>
 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src=&quot;https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js&quot;></script>
      <script src=&quot;https://oss.maxcdn.com/respond/1.4.2/respond.min.js&quot;></script>
    <![endif]-->
</head>
<body>
    <div class=&quot;container&quot;>
        <h1>子ウィンドウから親ウィンドウに値を渡す</h1>
 
        <div class=&quot;row&quot; style=&quot;margin-top: 30px;&quot;>
            <div class=&quot;col-md-7&quot;>
                <form name=&quot;parentfrm&quot; action=&quot;&quot; method=&quot;post&quot;>
                    <input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;parent_input&quot; value=&quot;&quot; placeholder=&quot;ここに値がセットされます。&quot;>
                </form>
            </div>
        </div>
 
        <div class=&quot;row&quot; style=&quot;margin-top: 30px;&quot;>
            <div class=&quot;col-md-12&quot;>
                <p>
                    <a href=&quot;&quot; onClick=&quot;openWindow()&quot;>
                        子ウィンドウを開く&nbsp;<span class=&quot;glyphicon glyphicon-new-window&quot; aria-hidden=&quot;true&quot;></span>
                    </a>
                </p>
            </div>
        </div>
 
        <div class=&quot;row&quot; style=&quot;margin-top: 40px;&quot;>
            <div class=&quot;col-md-12&quot;>
                <div class=&quot;alert alert-info&quot; role=&quot;alert&quot;>
                    このデモサイトの掲載記事はこちら<br>
                    <a href=&quot;/js/window-opener.html&quot;>
                        [JavaScript]子ウィンドウから親ウィンドウに値を渡す&nbsp;-&nbsp;IT女子のお気に入りフォルダ&nbsp;
                        <span class=&quot;glyphicon glyphicon-new-window&quot; aria-hidden=&quot;true&quot;></span>
                    </a>
                </div>
            </div>
        </div>
 
    </div>
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js&quot;></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js&quot;></script>
 
    <script>
        // 子ウィンドウを開く
        function openWindow() {
            window.open('child.html', 'child', 'width=500,height=250')
        }
    </script>
 
</body>
</html>

child.html（子ウィンドウ）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang=&quot;ja&quot;>
<head>
    <meta charset=&quot;utf-8&quot;>
    <meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;>
    <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;>
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>子ウィンドウから親ウィンドウに値を渡す</title>
 
    <!-- Bootstrap -->
    <link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css&quot;>
 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src=&quot;https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js&quot;></script>
      <script src=&quot;https://oss.maxcdn.com/respond/1.4.2/respond.min.js&quot;></script>
    <![endif]-->
</head>
<body>
    <div class=&quot;container&quot;>
        <h1>子ウィンドウ</h1>
 
        <p>
            以下のメッセージを入力してボタンを押すと親ウィンドウに値が渡されます。<br>
            この子ウィンドウも閉じます。
        </p>
 
        <div class=&quot;row&quot;>
            <div class=&quot;col-md-12&quot;>
                <form name=&quot;childfrm&quot; action=&quot;&quot; method=&quot;post&quot;>
                    <div class=&quot;form-group&quot;>
                        <input type=&quot;text&quot; name=&quot;sub_input&quot; id=&quot;inputText&quot; value=&quot;&quot; class=&quot;form-control&quot;>
                    </div>
                    <div class=&quot;form-group&quot;>
                        <input type=&quot;button&quot; onclick=&quot;setFormInput()&quot; value=&quot;値を渡す&quot; class=&quot;btn btn-success&quot;>
                    </div>
                </form>
            </div>
        </div>
 
    </div>
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js&quot;></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js&quot;></script>
 
    <script type=&quot;text/javascript&quot;>
        function setFormInput() {
            // 親ウィンドウの存在チェック
            if (!window.opener || window.opener.closed)
            {
                // 親ウィンドウが存在しない場合
                window.alert('メインウィンドウが見当たりません。');
            }
            else
            {
                //window.opener.close();
                //window.alert(window.opener);
                window.opener.document.parentfrm.parent_input.value = document.getElementById(&quot;inputText&quot;).value;
                window.close();
            }
        }
    </script>
 
</body>
</html>

基本的には、子ウィンドウで
window.opener
を使って、親ウィンドウを操作し、最後は
window.close()
で閉じればOKで、エレメントの取得の仕方は臨機応変に。

ただ、途中ちょっとハマりかけたのですが、環境によってはchromeでwindow.opener.documentがundefinedになってうまく動作しないことがあるようです。

こんな記事もおすすめです