JavaScriptのサンプル

サブウィンドウ内のアクションで、メインウィンドウ(親ウィンドウ)を操作するスクリプトです。

(例:サブウィンドウ内のリンクでメインウィンドウ内のページを切りかえる)

サブウィンドウを開く

コード

メインウィンドウのソース
<html>
<head>
<title>TAG index Webサイト</title>

<script type="text/javascript">
<!--

// サブウィンドウを開く処理
function disp(url){

	window.open(url, "window_name", "width=250,height=350,scrollbars=yes,resizable=yes,status=yes");

}

// -->
</script>

</head>
<body>

<p><a href="example_sub8.html" target="window_name" onClick="disp('example_sub8.html')">サブウィンドウを開く</a></p>

</body>
</html>
サブウィンドウのソース
<html>
<head>
<title>TAG index Webサイト</title>

<script type="text/javascript">
<!--

// リンクの処理開始
function disp(url){

	if(!window.opener || window.opener.closed){ // メインウィンドウの存在をチェック

		window.alert('メインウィンドウがありません'); // 存在しない場合は警告ダイアログを表示

	}
	else{

		window.opener.location.href = url; // 存在する場合はページを切りかえる

	}

}
// リンクの処理終了


// 「戻る」「進む」の処理開始
function hist(goback){

	if(!window.opener || window.opener.closed){ // メインウィンドウの存在をチェック

		window.alert('メインウィンドウがありません'); // 存在しない場合は警告ダイアログを表示

	}
	else if(goback == 'back'){

		window.opener.history.back(); // 戻る

	}
	else if(goback == 'next'){

		window.opener.history.forward(); // 進む

	}

}
// 「戻る」「進む」の処理終了

// -->
</script>

</head>
<body>

<ul>
<li><a href="#" onClick="disp('../../index.html'); return false;">トップページ</a></li>
<li><a href="#" onClick="disp('../../html_tag/index.html'); return false;">HTMLタグリスト</a></li>
<li><a href="#" onClick="disp('../../stylesheet/index.html'); return false;">スタイルシート</a></li>
<li><a href="#" onClick="disp('../../javascript/index.html'); return false;">JavaScript</a></li>
<li><a href="#" onClick="disp('../../color/index.html'); return false;">カラーチャート</a></li>
<li><a href="#" onClick="disp('sub_to_main.html'); return false;">元のページ</a></li>
</ul>

<p>
<a href="#" onClick="hist('back'); return false;">< 戻る</a>
|
<a href="#" onClick="hist('next'); return false;">進む ></a>
</p>

</body>
</html>

解説

上記の例は、まずメインウィンドウ内のリンクでサブウィンドウを開き、そのサブウィンドウ内のリンクでメインウィンドウ内のページを切りかえています。


スクリプト内の window.opener は、メインウィンドウ(親ウィンドウ)を参照する指定です。

メインウィンドウを操作する部分では、まずメインウィンドウが存在するかどうかを確認した上で、存在する場合はリンクの処理を行い、存在しない場合(開かれていない・すでに閉じられている)は警告ダイアログを表示しています。

  • 存在しないウィンドウは操作することができませんので(エラーが出てしまいます)、上記のような確認の処理を行っています。

青い文字の部分は、必要に応じて書き換えてください。