サブウィンドウを開く

説明

サブウィンドウを開くにはwindow.open()を使います。ただし、ブラウザの環境設定によっては表示がブロックされ動作しないことがある点には要注意です。
サブウィンドウを開くopen()の最初のパラメータにはサブウィンドウに表示するページURLを指定します。2番目のパラメータはサブウィンドウの名前(ID名)を指定します。複数のサブウィンドウを開く場合には、この名前を別々にする必要があります。
3番目のパラメータはサブウィンドウの表示方法を文字列で指定します。指定できるオプションには表1のものがあります。4番目のパラメータはサブウィンドウを開いた親ウィンドウのヒストリー(履歴)を継承するかどうかを指定します。trueを指定すると継承し、falseを指定すると継承しなくなります。
現在ではサブウィンドウを開くのは好ましくない傾向にあります。本当にサブウィンドウを利用しなければいけないのかどうか検討してから使用するようにしてください。また、別の方法としてPrototype Window Classライブラリを利用してページ内にウィンドウを開くという方法もあります。

表1
書式:window.open("URL","ウィンドウ名*1","オプション設定","ヒストリ設定*2")
IE5IE5.5IE6IE7FFSafO9初期値オプション名内容
--yestoolbar[=yes|no]|[=1|0]ツールバーの表示/非表示
yeslocation[=yes|no]|[=1|0]ロケーションバーの表示/非表示
--yesdirectories[=yes|no]|[=1|0]ディレクトリバーの表示/非表示
-yesstatus[=yes|no]|[=1|0]ステータスバーの表示/非表示
---yesmenubar[=yes|no]|[=1|0]メニューバーの表示/非表示(除くMac)
yesscrollbars[=yes|no]|[=1|0]スクロールバーの表示/非表示
-yesresizable[=yes|no]|[=1|0]ウィンドウサイズの変更/変更不可
-width=pixelsウィンドウの内側の横幅
-height=pixelsウィンドウの内側の高さ
------innerWidth=pixelsウィンドウの内側の横幅
------innerHeight=pixelsウィンドウの内側の高さ
------outerWidth=pixelsウィンドウの外側の横幅
------outerHeight=pixelsウィンドウの外側の高さ
------screenX=pixelsデスクトップの左端からの座標で指定
------screenY=pixelsデスクトップの上端からの座標で指定
---yestitlebar[=yes|no]|[=1|0]タイトルバーの表示/非表示(除くMac)
---nochannelmode[=yes|no]|[=1|0]チャンネルモード
---nofullscreen[=yes|no]|[=1|0] 全画面(フルスクリーン)モード*3
-left=pixelsデスクトップの左端からの座標で指定
-top=pixelsデスクトップの上端からの座標で指定
-------favorites=[=yes|no]|[=1|0]お気に入りの表示*4
*1 ウィンドウ名は、英数字で指定します。またIE5以降では、_blank、_parent、_self、_top、searchも指定できます。WinXP(SP1まで)とIE6の組み合わせでは_mediaも指定できます。
*2 ヒストリ設定はtrueまたはfalseを指定しtrueを指定した場合オープン元のウィンドウのヒストリを継承します。
*3 Windows XP SP2では完全なフルスクリーンモードにはなりません。
*4 Mac版Internet Explorerのみ有効です。
** Windows版Internet ExplorerではHTA (アプリケーション)でないと期待通り動作しないパラメータもあります。

JavaScriptテクニック ブック  詳しい解説などはJavaScriptテクニック ブックを参照してください。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>サブウィンドウを開く</h1>
<p>ページが開かれるとサブウィンドウが表示されます。</p>
</body>
</html>

●sub.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
</head>
<body>
<h1>今日のオススメ料理</h1>
<p>当店自慢の豚の角煮。ぜひ、ご賞味下さい。</p>
</body>
</html>

●main.js
window.open("sub.html", "sbwin1","width=480,height=320");