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
は、メインウィンドウ(親ウィンドウ)を参照する指定です。
メインウィンドウを操作する部分では、まずメインウィンドウが存在するかどうかを確認した上で、存在する場合はリンクの処理を行い、存在しない場合(開かれていない・すでに閉じられている)は警告ダイアログを表示しています。
- 存在しないウィンドウは操作することができませんので(エラーが出てしまいます)、上記のような確認の処理を行っています。
青い文字の部分は、必要に応じて書き換えてください。