JavaScriptのサンプル
サブウィンドウを開くスクリプトです。（リンクのクリックで表示するタイプ）
- JavaScriptが利用できないブラウザでもリンク先を開くことができます。ただし、ウィンドウサイズなどの設定内容は、JavaScriptが利用できるブラウザでしか反映されません。JavaScriptが利用できないブラウザの場合は、新規ウィンドウが普通に立ち上がるだけとなります。
コード
<html>
<head>
<title>TAG index Webサイト</title>
<script type="text/javascript">
<!--
function disp(url){
window.open(url, "window_name", "width=300,height=200,scrollbars=yes");
}
// -->
</script>
</head>
<body>
<p><a href="example_sub1.html" target="window_name" onClick="disp('example_sub1.html')">サブウィンドウ1</a></p>
<p><a href="example_sub2.html" target="window_name" onClick="disp('example_sub2.html')">サブウィンドウ2</a></p>
<p><a href="example_sub3.html" target="window_name" onClick="disp('example_sub3.html')">サブウィンドウ3</a></p>
</body>
</html>
解説
<head> ～ </head> 内にスクリプトを記述しておき、リンクのクリックでスクリプトを実行します。
サブウィンドウの設定は、
window.open(url, "window_name", "width=300,height=200,scrollbars=yes");
この部分で行います。
window_name の部分でウィンドウ名を設定し、width=300,height=200,scrollbars=yes の部分で各種オプションを設定します。
- ウィンドウ名（省略可能）
- ウィンドウ名を設定しておくと、各リンク先のページを同一のウィンドウに表示することができます。
- オプション（省略可能）
- ウィンドウのサイズや、各種バーの表示・非表示などを設定できます。オプションの設定については、サブウィンドウのオプション一覧を参考にしてください。
リンク先の設定は、
onClick="disp('example_sub1.html')"
この部分で行います。
example_sub1.html の部分にリンク先のURLを記述してください。
また、JavaScriptが利用できないブラウザでもリンク先を開けるようにするため、同時に href="" と target="" を設定しています。（target="" の指定は必要がなければ削除してください）
この設定が行われたリンクをクリックすると、次のように処理されます。
- JavaScriptが利用できるブラウザ …
onClick=""で指定した内容（disp関数）を実行 - JavaScriptが利用できないブラウザ …
href=""のリンク先をtarget=""のウィンドウで表示
上記の例ではリンクテキストを使用していますが、フォームのボタンで実行することもできます。
<form method="GET" action="example_sub1.html" target="window_name">
<input type="submit" value="サンプル" onClick="disp('example_sub1.html')">
</form>
青い文字の部分は、必要に応じて書き換えてください。