赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名
<form><input type="button" value="開く" onClick="win_open()"></form> <script type="text/javascript"> function win_open() { window.open("4_smp1.html","",""); } </script>
ファイル名だけを指定してウィンドウを開いています。
関数openには３つの引数があり、1つめがファイル名、2つめがウィンドウ名、3つめがプロパティなどの設定項目です。
ファイル名は、新しいウィンドウへ読み込むファイルとなります。
ウィンドウ名は、開いた後のウィンドウに適用され、次に同じ名前のウィンドウ名を指定するとそこにファイルを読み込みます。
プロパティでは、ウィンドウのサイズやスクロールバーなどの詳細な設定をすることができます。これは次で見てみましょう。
<form><input type="button" value="開く" onClick="win_open()"></form> <script type="text/javascript"> function win_open() { window.open("4_smp1.html","","width=200,height=200"); } </script>
ボタンを押すと、新しいウインドウが開きます。
上記例文では新しいウインドウの設定値として、ステータスバーを「なし」、横幅を「200」、高さを「200」、メニューバー、ツールバー、ロケーションバーを「なし」にしています。
関数openには「ファイル名」「ウィンドウ名」「プロパティ」と３つの引数があります。ファイル名は呼び出すファイルのURL。ウィンドウ名は開いたウィンドウをコントロールする場合に名付けます。プロパティは開くウィンドウの属性値で、高さや幅、メニューバー、ツールバー、ロケーションバー、スクロールバーなどの表示をコントロールすることができます。
<a href="javascript:win_open('4_smp1.html','sample','width=320,height=240')">開く</a> <script type="text/javascript"> function win_open(wURL,wName,wOption) { window.open(wURL,wName,wOption); } </script>
「開く」をクリックすると新しいウインドウが開きます。
関数openの引数ははユーザー関数内ではなく、リンク内で指定しています。
こうすることで、複数あるリンクから異なるファイルを指定して、異なるウィンドウを開くことができます。その処理を担うユーザー関数はたった一つで済ませられます。
<a>リンクから直接ウィンドウを開く場合は、どう記述すれば良いでしょうか。
実は次のようなリンクは正しく動作しません。
<a href="javascript:window.open('4_smp1.html','','')">開く</a>
新しいウィンドウは正しく開くのですが、元の画面も白紙のウィンドウに置き換わってしまいます。
ウィンドウ名を指定したり、targetを指定しても問題は発生します。
下記のように、リンクを無効にし、onClickを使ってウィンドウを開くと正常に動作します。
<a href="javascript:;" onClick="window.open('4_smp1.html','','')">開く</a>
閉じる場合は、hrefに直接書いても問題ないのですが、開く場合はできないことに注意が必要です。