目次へ戻ります
イヌでもわかるJavaScript講座


新しいウィンドウで表示させる

ほとんどのホームページには、おすすめリンク集というコーナーがあります。これはすごい、みんなにも見せてあげたいと思うのはいいことだし、リンクされた側も困ることはないでしょう。しかし、せっかく自分のホームページに来てくれたのにハイパーリンクして、その人はもう戻って来ない人になったり(^^; 、サーフィンしすぎて戻れなくなったりすると残念です。
ハイパーリンク先を別ウィンドウで表示させ、自分のホームページを残してみましょう。
難易度:★★☆☆☆☆☆☆☆☆
【実行例】

ここは、おすすめ! →

【リスト】

<form> ここは、おすすめ! →
<input type="button" value="Tatsuya's Home Page" onClick="window.open('http://www.red.oit-net.jp/tatsuya/index.htm')">
</form>

サンプルだけのHTMLは こちらへ
【説明】

新しくウィンドウを開くのは、window.open() を使います。

open( ) のパラメータにURLを指定すれば新しいウィンドウを作ってそこにリンク先をロードします。
例)
window.open("URL");

第2パラメータにはウィンドウ名(<A>タグのTARGET属性と同じ)を指定します。
例)
window.open("URL" , "_blank");
window.open("URL" , "new");
←newというウィンドウ名を持ったウィンドウを作ります。
window.open("URL" , "");
←_blank と同じ意味になります。
ウィンドウ名を指定することで、不必要に何個もウィンドウを開かないように制御することができます。

第3パラメータにはウィンドウサイズ等を指定することができます。
例)
window.open("URL" , "" , "width=210,height=160,resizable=yes");
ウィンドウの幅と高さの設定と、ウィンドウリサイズを可能に指定しました。このようにカンマ区切りで複数の設定を指定することができます。
詳しくは下記【リファレンス】を参照してください。

【Tips】
ウィンドウサイズの変更などの制御は、window.open() したサブウィンドウのみに有効です。メインウィンドウの制御はできません。


onClick は、そのフォームのボタンがクリックされた場合に、指定の関数を実行します。
今回のサンプルではボタンがクリックされたら、window.open() を実行して新しいウィンドウにページをロードさせました。

ま、こんなこと しなくても、これで じゅうぶんだと 思いますが・・・
<a href="http://www.red.oit-net.jp/tatsuya/index.htm" target="new">Tatsuya's Home Page</a>
   ↓
Tatsuya's Home Page


参考ステップ
Step.31 小さな子ウィンドウを作ってBGMを流してみましょう その1
Step.32 小さな子ウィンドウを作ってBGMを流してみましょう その2
Step.66 サムネイル画像をクリックして拡大画像を表示してみましょう



【リファレンス】

● window.open メソッド

新しいウィンドウを開いて指定のページをロードします。

【書式】
objWin = window.open( リンクURL , ウィンドウ名 , スタイル , エントリ)

【例】
myWin = window.open("exp.html" , "newwin" , "width=210,height=160");

【パラメータ】
リンクURL リンク先のURLを指定する文字列。
省略時 : "about:blank"
ウィンドウ名 新しく開くウィンドウの名前を指定する文字列、もしくは下記のオプション文字列(TARGET属性)。
_blank 新しく無名のウィンドウをロード
_media メディアバーのHTMLコンテンツエリアにロード (IE6)
_parent 現在の親フレームにロード(親フレームがなければ _self と同じ)
_search ブラウザの検索窓にロード (IE5)
_self 現在のフレームにロード
_top フレームを解除してロード(フレームがなければ _selfと同じ)
スタイル ウィンドウのスタイルを設定する文字列。
指定はカンマ区切りで複数指定可。
channelmode = yes/no シアターモード (デフォルト: no)
directories = yes/no リンクツールバー (デフォルト: yes)
fullscreen = yes/no フルスクリーン (デフォルト: no)
height = number 高さ(ピクセル) (最小値 : 100)
left = number X座標(ピクセル) (数値は0以上)
location = yes/no アドレスバー (デフォルト: yes)
menubar = yes/no メニューバー (デフォルト: yes)
resizable = yes/no ウィンドウのリサイズ (デフォルト: yes)
scrollbars = yes/no スクロールバー (デフォルト: yes)
status = yes/no ステータスバー (デフォルト: yes)
titlebar = yes/no タイトルバー (デフォルト: yes) (HTA)
toolbar = yes/no ツールバー (デフォルト: yes)
top = number Y座標(ピクセル) (数値は0以上)
width = number 幅(ピクセル) (最小値 : 100)
エントリ replace = true/false 新しいウィンドウをブラウザの履歴リストに入れるかどうか

【戻り値】
ウィンドウオブジェクト。


【open テスター】
URL
name
left
top
width
height
channelmode
directories
fullscreen
location
menubar
resizable
scrollbars
status
titlebar
toolbar

replace

目次へ戻ります