説明
新しくウィンドウを開いてリンクするには、
window.open( "URL" ) を使います。
現在のウィンドウにリンクするには、
location.href = "URL" を使います。
※ location.href は、Step.7参照
● 書式
handleWin = window.open( リンクURL , ウィンドウ名 , スタイル )
第1パラメータにURLを指定すれば 新しいウィンドウを作ってそこにリンク先をロードします。
window.open( "http://www.red.oit-net.jp/tatsuya/" );
省略した場合は、"about:blank" になります。
※ <a href="http://www.red.oit-net.jp/tatsuya/" target="_blank">Tatsuya's Home Page</a> と同じことです。
第2パラメータにはウィンドウ名(<A>タグのTARGET属性と同じ)を指定します。
window.open( "http://www.red.oit-net.jp/tatsuya/", "new" );
省略した場合は、"_blank" になります。
すでに同じ名前のウィンドウが存在すれば、そのウィンドウにリンクされます。
※ ウィンドウ名を指定することで、不必要に何個もウィンドウを開かないように制御することができます。
第3パラメータにはウィンドウサイズ等を指定することができます。
window.open( "http://www.red.oit-net.jp/tatsuya/" , "" , "width=210,height=160" );
上の例ではウィンドウの幅と高さの設定をしました。このようにカンマ区切りで複数の設定を指定することができます。
詳しくは下記【リファレンス】を参照してください。
● 新しく開いたウィンドウを閉じる
window.openで開いたウィンドウは戻り値のハンドルを使ってウィンドウを閉じることができます。
<form>
<input type="button" value="開く" onclick="handleWin = window.open('http://www.red.oit-net.jp/tatsuya/')">
<input type="button" value="閉じる" onclick="if ( handleWin.closed == false ) handleWin.close();">
</form>
window.open()が失敗した場合(ポップアップブロック等)は、nullが返ります。
closed でウィンドウがすでに閉じられているか確認できます。すでに閉じていたら true、まだ開いていたら false が返ります。
close() でウィンドウが閉じます。
onclick="window.open('http://www.red.oit-net.jp/tatsuya/')"
onclick は、フォームのボタンがクリックされた場合に、指定のJavaScriptを実行します。
今回のサンプルではボタンがクリックされたら、
window.open() を実行して新しいウィンドウにページをリンクさせました。
※onclick イベントは、Step.7 参照
● Tips
- ウィンドウサイズの変更などの制御は、window.open() したサブウィンドウのみに有効です。メインウィンドウの制御はできません。
- タブで開いた場合は第3パラメータは意味がありません。IE8以降の場合は、[Shift]キーを押しながらリンクボタンをクリックすれば、タブではなく、新しいブラウザで開きます。