Javascriptで開いた子画面から親画面の関数を呼び出す

プログラミング JavaScript
スポンサーリンク

子画面から親画面の関数を呼び出す

Javascriptで開いた子画面(ポップアップウィンドウ)から、親画面の関数を呼び出します。

子画面から親画面を操作するにはwindow.openerを使う

Javascript子画面から親画面を操作するにはwindow.openerを使います。
それを応用すると子画面から親画面の関数や変数が利用できるようになります。

(親画面のソース)

<html>
<head>
<script language="JavaScript">
function  parentFunc(myname)
{
    var innerObj = document.getElementById( "my_name" ) ;
    innerObj.innerHTML = "私の名前は" + myname + "です。"
}
function  childDsp()
{
    window.open( "子画面のURL", "child_window", "" );
}
</script>
</head>
<body>
<form name="myform">
    <input type="text" id="my_name" value=""><br>
    <input type="button"  value="子画面を開く" onClick="javascript:childDsp();">
</form>
</body>
</html>

(子画面のソース)

<html>
<head>
<script language="JavaScript">
function setName()
{
    window.opener.parentFunc( "太郎" ) ;
}
</script>
</head>
<body>
<form name="myform">
    <input type="button" value="名前設定" onClick="javascript:setName();">
</form>
</body>
</html>

上記での子画面にあるボタン「名前設定」を押下すると、親画面の「my_name」に名前が設定されます。
処理としては「window.opener」に続けて「呼び出したい関数名」を設定します。

タイトルとURLをコピーしました