window.openerプロパティは、現在のウィンドウを開いたウィンドウへの参照を返すプロパティ。
構文
<script type="text/javascript">
window.opener;
</script>
window.opener;
</script>
戻り値
現在のウィンドウを開いたウィンドウへの参照。
サンプル
①
②
サンプルの動作について
- 「新たにウィンドウを開く」ボタンをクリックすると、新たなウィンドウを開き、「①」の右横に「ウィンドウを開きました。」と表示する。
- 新しく開いたウィンドウ内の「このウィンドウを閉じる」ボタンをクリックすると、新しく開いたウィンドウを閉じ、このウィンドウの「②」の右横に「ウィンドウを閉じました。」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
var $sampleWindow;
function openSampleWindow() {
$sampleWindow = window.open( 'http://alphasis.info/wp-content/uploads/2013/07/javascript-windowObject-opener.html' );
$sampleWindow.opener.document.getElementById( "sampleWindow-opener-1" ).innerHTML = "ウィンドウを開きました。";
}
</script>
var $sampleWindow;
function openSampleWindow() {
$sampleWindow = window.open( 'http://alphasis.info/wp-content/uploads/2013/07/javascript-windowObject-opener.html' );
$sampleWindow.opener.document.getElementById( "sampleWindow-opener-1" ).innerHTML = "ウィンドウを開きました。";
}
</script>
HTML
<div class="sample">
<button onclick="openSampleWindow()">新たにウィンドウを開く</button>
<br /><br />
① <span id="sampleWindow-opener-1"></span>
<br />
② <span id="sampleWindow-opener-2"></span>
</div>
<button onclick="openSampleWindow()">新たにウィンドウを開く</button>
<br /><br />
① <span id="sampleWindow-opener-1"></span>
<br />
② <span id="sampleWindow-opener-2"></span>
</div>
CSS
<style type="text/css">
.sample button {
font-size: 16px;
}
</style>
.sample button {
font-size: 16px;
}
</style>
新たに開くウィンドウのHTML
<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプルウィンドウ</title>
<script type="text/javascript">
function closeSampleWindow() {
window.opener.document.getElementById( "sampleWindow-opener-2" ).innerHTML = "ウィンドウを閉じました。";
window.close();
}
</script>
</head>
<body>
<h1>サンプルウィンドウ</h1>
<p><button onclick="closeSampleWindow()">このウィンドウを閉じる</button></p>
<p><a href="http://alphasis.info/" target="_blank">アルファシス</a></p>
</body>
</html>
<html lang="ja">
<head>
<title>サンプルウィンドウ</title>
<script type="text/javascript">
function closeSampleWindow() {
window.opener.document.getElementById( "sampleWindow-opener-2" ).innerHTML = "ウィンドウを閉じました。";
window.close();
}
</script>
</head>
<body>
<h1>サンプルウィンドウ</h1>
<p><button onclick="closeSampleWindow()">このウィンドウを閉じる</button></p>
<p><a href="http://alphasis.info/" target="_blank">アルファシス</a></p>
</body>
</html>