外部jsファイルのwindow.openで開いたサブウィンドウから値をjsに値を返したい．

観覧ありがとうございます．

以下のことを実現したいと思っています．
1.外部jsファイルの関数からwindow.openでサブウィンドウを開く．
2.サブウィンドウでは複数あるボタンから1つを押下する．
3.サブウィンドウを呼び出した関数にボタンごとに異なる変数を返す．
4.帰ってきた文字列ごとに開くページを変える．

window.showModalDialogでページを開いた場合にはreturnValueを用いることで，
変数を返すことができるみたいなのですがwindow.openでも同様のことをしたいと思います．
どのようにしたら実現可能でしょうか？ご教示ください．

追記

親ウィンドウ

html
1<head>
2<script type="text/javascript" src="@Url.Content("~/Scripts/output.js")"></script>
3</head>
4<body>
5<button type="button" onclick="showNewWindow(1) %>);">出力</button>
6</body>

output.js

javascript
1function showNewWindow(manageNo) {
2	var w_size = 200;
3	var h_size = 260;
4	var ret = '';
5	var openWindow = open(url, '_blank', 'height=' + w_size + ',width=' + h_size + ',height=' + h_size);
6
7    if (window.addEventListener) {
8		window.addEventListener('message', function (event) {
9			ret = event.data
10			outputExcel(ret, manageNo);
11		}, false);
12	} else if (window.attachEvent) {
13		window.attachEvent('message', function (event) {
14			ret = event.data
15			outputExcel(ret, manageNo);
16		});
17	}
18}
19
20function outputExcel(ret, manageNo) {
21	if ('html' == ret) {
22		return sendPostNewWindow(document.forms[0], '../Excel/Present?no=' + manageNo);
23	} else {
24        //処理
25  }
26}
27
28function returnMessage(text) {
29	window.opener.postMessage(text, '*');
30	window.close()
31}

子ウィンドウ

html
1<head>
2<script type="text/javascript" src="@Url.Content("~/Scripts/output.js")"></script>
3</head>
4<body>
5<input type="button" name="xlxsButton" style="width:200px;" value="button" onclick="returnMessage('html');">
6</body>

行動規範の内容に同意します

回答1件

ベストアンサー

postMessageというメソッドで別のウィンドウへメッセージを投げて、それをmessageというイベントハンドラで捕捉することができます。

簡単な例を示します。以下をindex.htmlとかそんな名前で保存します。

html
1<!doctype html>
2
3<html>
4  <head>
5    <meta charset="utf-8">
6    <title>window.postMessage</title>
7  </head>
8  <body>
9    <button id="open">open</button>
10    <div>クリックされたボタン：<span id="result"></span></div>
11
12    <script>
13      (function () {
14        var open = document.getElementById('open')
15        var result = document.getElementById('result')
16
17        open.addEventListener('click', function () {
18          window.open('sub.html')
19        })
20
21        window.addEventListener('message', function (event) {
22          console.log(event)
23          result.textContent = event.data
24        })
25      })()
26    </script>
27  </body>
28</html>

で、以下をsub.htmlで保存します。

html
1<!doctype html>
2
3<html>
4  <head>
5    <meta charset="utf-8">
6    <title>window.postMessage</title>
7  </head>
8  <body>
9    <button id="btn1">1</button>
10    <button id="btn2">2</button>
11    <button id="btn3">3</button>
12
13    <script>
14      (function () {
15        for (var i = 1; i < 3; i++) {
16          document.getElementById('btn' + i).addEventListener('click', function (event) {
17            window.opener.postMessage(event.target.textContent, location.origin)
18            window.close()
19          })
20        }
21      })()
22    </script>
23  </body>
24</html>