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をコピーしました