指定したURLを特定のウィンドウで開くコードを紹介します。
動作
以下の動作を実現します。
- Webページを表示し、リンクをクリックすると新しいウィンドウ(NW)を開き指定したURLを表示する
- 新しいウィンドウ(NW)が表示されている状態では、同じリンクをクリックしても、新しいウィンドウを開かない
- 別のリンクをクリックすると、新しいウィンドウ(NW)が表示されていれば、そのウィンドウで別の指定したURLを開く。新しいウィンドウ(NW)がない場合は、新しいウィンドウを開き指定したURLを表示する。
概要
同じウィンドウで開く場合は、window.open()メソッドの第二引数にウィンドウ名を与えます。
コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<a href="javascript:void(0);"
onclick="window.open('http://www.ipentec.com', 'MyWindow')">ページを開く</a>
</body>
</html>
解説
リンクをクリックするとonclickによりJavaScriptが実行され、window.open()メソッドが呼び出されます。第二引数にウィンドウ名を指定しているため、最初は新しいウィンドウが開きますが、2度目は先に開いたウィンドウでページが開かれます。
実行結果
上記のHTMLファイルをサーバーにアップロードしてWebブラウザで開きます。下図の画面が表示されます。[ページを開く]リンクをクリックします。
指定したページが別のウィンドウで表示されます。Internet Explorer 11の場合は、新しいタブでページが表示されます。
元のタブに戻り、もう一度[ページを開く]リンクをクリックします。
先ほど、ページが開かれた際に作成されたタブがオレンジ色に変わります。新しいタブが開かれずに既存のタブでページの表示がなされたことがわかります。
注意
ローカルのHTMLファイルを開いた場合は正しく動作しないことがあります。Webサーバーに配置してURLを指定してHTMLファイルを開く必要があります。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2016-05-30
作成日: 2014-10-10
