JavaScript window.opener

window.openerオブジェクトは、自分自身を開いた親ウィンドウを示す。window.opener.documentオブジェクトを参照することで、親ウィンドウのドキュメントを操作できる

存在チェック

現在のウィンドウに親ウィンドウが存在するかチェックする。

if (window.opener != null) {
  // do something
}

window.parentとの違い

Internet Explorer以外のブラウザでは、window.openerとwindow.parentに違いはない。

Internet Explorerでiframeを使うと、window.openerとwindow.parentの動作に一部違いが出る。

プロパティ

opener オブジェクトのプロパティは、window オブジェクトと同じである。opener オブジェクトのプロパティ一覧を以下に示す。

document

document プロパティは、HTML ドキュメントを示す。

子ウィンドウ（サブウィンドウ）から親ウィンドウ操作を操作する例を示す。

親ウィンドウでは、子ウィンドウを開くボタンとテキストボックスを配置する。

<input type="button" value="子ウィンドウを開く"
   onclick="window.open('child1.html', 'child1', 'width=320,height=240');return false;">
<form name="form01">
  <input type="text" name="text01" value="">
</form>

子ウィンドウでは、親ウィンドウのオブジェクトを操作する関数を定義する。

function setString(val) {
  if (!window.opener || window.opener.closed) {
    // 親ウィンドウが存在しない
    window.close();
  } else {
    // 親ウィンドウのオブジェクトを操作
    window.opener.document.form01.text01.value = val;
  }
}

次に、親ウィンドウを操作するボタンを配置する。

<form name="form1">
  <p>テキストを入力してください: <input type="text" name="text1" value="テキスト"><p>
</form>
<p>
<input type="button" value="親ウィンドウを操作"
     onclick="setString(document.form1.text1.value);return false;">
</p>

メソッド

opener オブジェクトのメソッドは、window オブジェクトと同じである。opener オブジェクトのメソッド一覧を以下に示す。

参考文献

Web Hypertext Application Technology Working Group (2023) APIs related to navigation and session history HTML Living Standard