サブウィンドウを開く(クリック時)

無料・有料 レンタルサーバー比較


ブラウザ
Internet Explorer Netscape Firefox Opera
参考
JavaScriptの基本

サブウィンドウを開くスクリプトです。(リンクのクリックで表示するタイプ)

※JavaScriptが利用できないブラウザでもリンク先を開くことができます。ただし、ウィンドウサイズなどの設定内容は、JavaScriptが利用できるブラウザでしか反映されません。JavaScriptが利用できないブラウザの場合は、新規ウィンドウが普通に立ち上がるだけとなります。

サブウィンドウ1

サブウィンドウ2

サブウィンドウ3


ソース

<html>
<head>
<title>HTML index Webサイト</title>

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

function disp(url){

	window.open(url, "window_name", "width=350,height=250,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=350,height=250,scrollbars=yes");

この部分で行います。

window_name の部分でウィンドウ名を設定し、width=350,height=250,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>

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



inserted by FC2 system