Yusk's UseCase

プログラマの成れの果てTipsBlog

window.open()で表示したウィンドウに親ウィンドウからデータを送る方法

window.open()で表示した子ウィンドウから親ウィンドウにデータを送る(あるいはイベントを発行する)には、window.openerを使うことで行える。

window.opener.$('parent_window_obj').html('hogehoge');

逆に、親ウィンドウから子ウィンドウにデータを送る際には、window.postMessage()*1を使えば簡単にできる。

親ウィンドウ

<script>
    var child_win = window.open('child.html', '', 'width=640,height=400,scrollbars=yes');
    child_win.postMessage('Hi!', '*');
</script>

子ウィンドウ

<script>
    window.addEventListener("message", receiveMessage, false);
    function receiveMessage(e)
    {
        alert(e.data);
    }
</script>

ちなみに、親ウィンドウから子ウィンドウにデータを送る他の方法としては、親ウィンドウのほうに<input type="hidden">を用意して、値を更新したら、$().trigger('change')でイベントを発行して、子ウィンドウでwindow.opener.$().bind('change', function(){})として受け取るという謎の方法もある。

*1:window.postMessage()の詳細は、こちらから。