新しいウィンドウを開く(open)

広告

ここでは新しいウィンドウを開く方法を見ていきます。URLの指定はもちろん、大きさやメニューバーなどの表示の有無などを指定できます。 

window.open("URL", "名前", "オプション")

引数には、新しいウィンドウ内に表示したいURLの指定をします。また"名前"は、ウィンドウを作成後に移動したりサイズを変更したりといったことを行う時に、ここで指定した"名前"を使ってウィンドウを区別します。またオプションには下記の値を指定できます。

オプション値設定する値対応する項目
width幅(ピクセル)ウィンドウの幅
height高さ(ピクセル)ウィンドウの高さ
directories1 or 0ディレクトリーバーの表示/非表示
location1 or 0ロケーションバーの表示/非表示
menubar1 or 0メニューバーの表示/非表示
resizable1 or 0サイズが変更可能かどうか
scrollbars1 or 0スクロールバーの表示/非表示
status1 or 0ステータスバーの表示/非表示
toolbar1 or 0ツールバーの表示/非表示

オプションは"オプション値=値"の形で指定します。また複数同時に指定する場合はカンマで区切って下さい。実際の使用例は下記のようになります。 

window.open("http://www.yahoo.co.jp/", "yahoo", "width=300, height=200, toolbar=1");
サンプルコード

一度試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>

<script type="text/javascript" src="./js/script1_1.js">
</script>

</head>
<body>

<p>
下記のボタンを押して下さい。
</p>

<form name="test">
<input type="button" value="表示したいホームページを入力" onClick="kakunin()">
</form>

</body>
</html>

function kakunin(){
  ret = prompt("ホームページのURLを入力", "http://www.google.co.jp/");
  if (ret != null){
    window.open(ret, "new");
  }
}

上記をブラウザで見ると下記のように表示されます。

p1-1

ボタンを押すと下記のようにURLの入力を求められます。今回はデフォルトで設定されている値をそのまま使いますのでOKボタンを押して下さい。

p1-2

指定したURLを表示する新しいウィンドウ(今回の場合は新しいタブですが)が表示されます。

p1-3

( Written by Tatsuo Ikura )