| ほとんどのホームページには、おすすめリンク集というコーナーがあります。これはすごい、みんなにも見せてあげたいと思うのはいいことだし、リンクされた側も困ることはないでしょう。しかし、せっかく自分のホームページに来てくれたのにハイパーリンクして、その人はもう戻って来ない人になったり(^^;
、サーフィンしすぎて戻れなくなったりすると残念です。 ハイパーリンク先を別ウィンドウで表示させ、自分のホームページを残してみましょう。 |
| 難易度:★★☆☆☆☆☆☆☆☆ |
| 【実行例】 |
| 【リスト】 <form> ここは、おすすめ! → <input type="button" value="Tatsuya's Home Page" onClick="window.open('http://www.red.oit-net.jp/tatsuya/index.htm')"> </form> |
| 【説明】 新しくウィンドウを開くのは、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"); 【パラメータ】
【戻り値】 ウィンドウオブジェクト。 【open テスター】 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||