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