jQueryを使って別ウィンドウと連携

どうも、俺＠残業中です。

今日はjqueryを使って別ウィンドウ（子ウィンドウ）と連携する方法についてメモメモです。

仕様は親ウィンドウにあるインプットボックスに文字を入力すれば、その値を子ウィンドウに表示するものとします。
テスト用に、まず親ウィンドウを開いた瞬間子ウィンドウを開くようにします。

// 親ウィンドウ.js
$(function() {
  // 引数は開くファイル名、子ウィンドウ名、そのプロパティ
  window.open("child.html", "child", "width=800,height=300");
});

です。
また親ウィンドウにインプットボックスを作ります。

<!-- 親ウィンドウ.html -->
<input type="text" name="name" value="">

次に子ウィンドウ側のjavascriptで、親ウィンドウのインプットボックスに対しEventListenerを貼ります。

// 子ウィンドウ.js
$(function() {
  window.opener.$("input").bind("keyup", view);
});
function view() {
  $("body").html($(this).val());
}

これだけです。

javascriptのwindow.openerを使って親ウィンドウからの値を子ウィンドウへ渡します。

以上、どえぇぇぇえぇえぇす。