6 別窓を開く

Javascriptを使って、別窓を開いてください。

Javascriptを使った別窓は、見た目を細かく指定できるのが特徴です。
スクロールバーやメニューバーなどの有無を設定することもできます。

ファイル名は js06.html  としてください。

サンプル

 : 省略

4: <SCRIPT language="JavaScript">
5: <!--
6: w = 640;
7: h = 480;
8: function betumado() {
9: window.open("http://www.kyoto-su.ac.jp/","OpenWin1","width="+w+",height="+h+", scrollbars=yes,location=no,menubar=no,toolbar=no, status=no,directories=no,resizable=no");
10: }
11: //-->
12: </SCRIPT>

  : 省略

17: 下のボタンをクリックすると京都産業大学のページを別窓で開きます。<BR><BR>
18: <INPUT type="button" value="別窓を開く" onClick="betumado();">

  : 省略

解説

6行目:
7行目:
開く別窓の 幅 Width  と 高さ Height をそれぞれピクセル単位で指定します。
幅と高さはそれぞれ変数 w と h に代入され、以降のプログラムで使用されます。

8行目:
新しい関数 betumado() を定義しています。
betumado() 関数は、決められたURLで別窓を開く関数とします。

9行目:
window.open() メソッドを実行すると、Javascriptを使って新規のウィンドウを開けます。
window.open( "開くページのURL" , "ウィンドウのタイトル" , "ウィンドウの各種設定" );
のように使用します。

[ 開くページのURL ] には http:// から始まる URL を記入します。

[ ウィンドウのタイトル ] は別窓を識別するためのタイトルを書きます。
タイトルに日本語等を使うと、ブラウザによって正しく動作しない場合があります。
半角英数文字だけを使って、だいたい10文字以内 をめどにタイトルを決めると無難です。

[ ウィンドウの各種設定 ] にはオプションとして様々な設定ができます。
たとえば、スクロールバーをなくしたり、ウィンドウサイズの変更を禁止したりできます。
オプションの詳細は以下のとおりです。

width=X 新しいウィンドウの横幅をXピクセルにする
height=Y 新しいウィンドウの縦幅をYピクセルにする
scrollbars スクロールバーの表示   yesか1で表示、noか0で非表示
location ロケーションバーの表示   yesか1で表示、noか0で非表示
menubar メニューバーの表示   yesか1で表示、noか0で非表示
toolbar ツールバー・ボタンの表示   yesか1で表示、noか0で非表示
status ステータスバーの表示   yesか1で表示、noか0で非表示
directories ディレクトリボタンの表示   yesか1で表示、noか0で非表示
resizable ウィンドウの大きさの変更   yesか1で大きさ変更可能、noか0で大きさ変更不可能

複数オプションを指定したい場合は、カンマで区切って列挙します。
たとえば、スクロールバーを表示せず、ウィンドウの大きさ変更を禁止する場合は
window.open( "http://xyz.com/" , "xyz" , "scrollbars=no , resizable=no" );
のように書きます。

メニューバー、スクロールバー、ツールバー、ステータスバーを表示しないようにすると
すっきりしたシンプルなデザインのウィンドウになります。

※ window.open(〜〜〜〜) の部分は改行を行うと動かなくなる場合がありますので、横に長くなっても改行はしないで下さい。

実行例

実行例