親ウィンドウと子ウィンドウ間でのデータやり取り

Question

先日関連する質問をさせていただいたのですが、

親ウィンドウのinputに入力した値を
子ウィンドウをwindow.openで開いた際に引き継ぐ方法（input hiddenなどに格納）が分からずに困っています。

子→親へデータを渡すドキュメントは多くあり比較的楽に実装出来ました。

親→子へデータを渡すドキュメントが少なく、今のブラウザには対応していないみたいです。

jQuery等での簡単なサンプルをどなたか見せていただけますでしょうか。

Answer 1

こんにちは。

• 子ウィンドウは、親のjavascriptでwindow.openしたときに、変数にオブジェクトをとっておく

例) var childWin = window.open(~);

• 親ウィンドウは、子のjavascriptでwindow.openerとして参照

とすれば、それぞれのウィンドウの内容を操作できると思います。

こちらの説明が分かりやすそうですよ。
【JavaScript】子ウィンドウ／親ウィンドウのお互いの要素を操作するには！？

Comments

[kenkbou]

ありがとうございます！
こちらのJSのドキュメントを読み、やっておりましたが
うまく動作してくれませんでした。

ファイルを外部化していたりするのがいけないのでしょうか、、、
もう少し漁ってみます、ありがとうございました

[kaputaros]

ファイルの外部化ということでしたが、無名ではないfunctionとして定義してそれを呼び出すのではダメでしょうか？

Answer 2

簡単なサンプルです。
まず、こんな感じで開いたwindowオブジェクトを持っておきます。

var win = window.open('somewhere.html','_blank');

親から子

$(win.document).find('#入れたいhiddenのid').val('これを入れる');

子から親

$(window.opener.document).find('#入れたいhiddenのid').val('これを入れる');

こんな感じです。もっとシンプルに書く方法があるかもしれませんが、今思いつくのはこんな感じです。

Comments

[shi_ue]

ううう、皆さん回答速い・・・

[kenkbou]

早急にありがとうございます。
今同じ記述で試してみましたが、うまく受け取れていないみたいです。。。ブラウザが悪いのでしょうか、、、Chromeでローカルでやっています。
単純明快なコードを使いこなせずにすみません。
もし何かお気づきになられましたらご教示いただければ幸いです。
--------------------------------------------------------
index.html（親）
<form method="post" action="form.php">
<input type="text" name="name" id="name" /><br />
<input type="submit" value="送信" />
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="jsjs.js"></script>
--------------------------------------------------------
index2.html（子）
<form method="post" action="form.php">
<input type="hidden" name="name2" id="name2" /><br />
<input type="submit" value="送信" />
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="jsjs.js"></script>
--------------------------------------------------------
jsjs.js（jQuery）
$(function () {
var w = window.open("index2.html", 'sub', 'width=400, height=600');
var name = $('#name').val();
$(w.document).find('#name2').val('name');
});
--------------------------------------------------------

[shi_ue]

ローカルではセキュリティに引っかかって動作しません。
どこかに上げるか、ローカルサーバーを立ててくださいです。
（なんか毎回同じような回答しているような・・・最近この手の問題が多いのです）

[kenkbou]

セキュリティの問題だったのですね、ありがとうございます。
今、レンタルサーバーさくらであげてみました
が、またローカル同じでコンソールにエラーも出ず、値も引き継げていないという状況です。

OSXでChrome,Safari,FireFoxでダメでした。
仕様が変わっているのでしょうか？

Answer 3

これはどうですか？
http://stackoverflow.com/questions/26328170/how-to-pass-data-from-parent-window-to-child-popup-window

開いた子ウィンドウのページは同じドメインである必要があります。

Comments

[kenkbou]

ありがとうございます！
JSだとこのような書き方で実装出来るのですね。
参考にさせてください。