明滅するプログラマの思索

WEBエンジニアとして勤務している一介の男が、日々気づいたことをまとめるブログです

親ウィンドウのhtml要素・関数を操作する

Javascript の window.open() 関数を利用して開いた子ウィンドウ上で、親ウィンドウ上の html要素を操作する方法です。

Javascript での記述

Javascript では次のように記述すれば可能です。

<script>
// 親ウィンドウの id=hoge 要素の value 属性を変更する
obj = window.opener.document.getElementById('hoge');
obj.value = '変更する';
</script>

jQuery での記述

jQuery ではどのようにすればよいかというと、やはり同じですね。

<script>
// 親ウィンドウの id=hoge 要素の value 属性を変更する
obj = window.opener.$('#hoge');
obj.val('変更する');
</script>

親ウィンドウの関数を実行する

親ウィンドウに定義されている Javascript 関数を実行するのも、同じです。

parent_window.html
<script>
function parentExec()
{
 ...
}
</script>
child_window.html
<script>
window.opener.parentExec();
</script>

親ウィンドウの要素に定義されている jQuery イベントを発火させる

これも同じですね。

parent_window.html
<script>
$('#hoge').on('initialize', function() {
...
});
</script>
child_window.html
<script>
window.opener.$('#hoge').trigger('initialize');
</script>

※ initialize はカスタムイベントです。