window.openerオブジェクトは、自分自身を開いた親ウィンドウを示す。window.opener.documentオブジェクトを参照することで、親ウィンドウのドキュメントを操作できる
現在のウィンドウに親ウィンドウが存在するかチェックする。
if (window.opener != null) {
// do something
}
Internet Explorer以外のブラウザでは、window.openerとwindow.parentに違いはない。
Internet Explorerでiframeを使うと、window.openerとwindow.parentの動作に一部違いが出る。
opener オブジェクトのプロパティは、window オブジェクトと同じである。opener オブジェクトのプロパティ一覧を以下に示す。
プロパティ | 説明 |
---|---|
console | ウェブ・ブラウザのデバッグ・コンソール |
frames | すべてのフレームの配列 |
history | ブラウザのURL履歴 |
jQuery | jQuery ライブラリ |
localStorage | ローカル・ストレージ |
location | URL |
navigator | ウェブ・ブラウザ |
opener | 親ウィンドウ |
pageXOffset | ウィンドウの左端から水平方向にスクロールされたピクセル数 |
pageYOffset | ウィンドウの状態から垂直方向にスクロールされたピクセル数 |
parent | 親ウィンドウ |
screen | スクリーン |
screenLeft | スクリーン対するウィンドウの X 座標 screenX プロパティと同じ |
screenTop | スクリーン対するウィンドウの Y 座標 screenY プロパティ |
self | 現在のウィンドウ |
top | ウィンドウの上端 |
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 オブジェクトのメソッド一覧を以下に示す。
メソッド | 説明 |
---|---|
alert | 警告ダイアログを表示する |
clearInterval | 一定時間毎に実行する処理を解除する |
confirm | 確認を行うために「はい」と「いいえ」を選択するダイアログを表示する |
open | Webブラウザを別ウィンドウ又はタブで開く |
prompt | 文字列を入力できるダイアログを表示する |
setInterval | 一定時間毎に実行する処理を設定する |
Web Hypertext Application Technology Working Group (2023) APIs related to navigation and session history HTML Living Standard