新しいウィンドウをサイズ指定して開く

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
function openwin() {
	window.open("./window.html", "", "width=500,height=400");
}
// -->
</script>
</head>
<body>
<a href="javascript:openwin();">新しいウィンドウ</a>
</body>
</html>

直接使用する場合

<a href="./window.html" onclick="window.open('./window.html', '', 'width=500,height=400'); return false;">新しいウィンドウ</a>

フォームの場合

<form action="#">
<input type="button" value="ジャンプ" onclick="window.open('./window.html', '', 'width=500,height=400');">
</form>

上記の例では、window.html というページを幅500ピクセル、高さ400ピクセルの大きさで開きます。

これは、window.open("開くページの URL", "ウィンドウの名前", "ウィンドウのプロパティ"); ということになります。ただ新しいウィンドウを開くだけなら通常のリンク (<a href="" target="_blank"></a>) を使用されると思いますが、ウィンドウサイズ等を変更することは出来ないので JavaScript を使用します。

開くページの URL は通常のリンクの href に指定する URL と同様に移動先の URL を指定します。

ウィンドウの名前はそのウィンドウにアクセスしたりするために使用します。また、名前がついているウィンドウが開いている状態に再度このウィンドウを開くと、新しくウィンドウを使用しないでその名前のウィンドウに表示されます。この名前には任意の名前を付けることができ、不要の場合は省略することができます。

名前なし開かれるたびに新しいウィンドウを使用します。window.open("./window.html", "", "width=500,height=400");

名前あり (new) 開かれている場合に開いてもそのウィンドウを使用します。window.open("./window.html", "new", "width=500,height=400");

プロパティは追加したものが有効になります。複数のプロパティを指定する場合は「,」で区切ってください。プロパティになにも指定しなければ単に新しいウィンドウを開きます。

主なウィンドウプロパティ	指定時（有効）の記述	指定無し（無効）の記述
ウィンドウの横幅	width=数値 (px) 例: width=500	記述無し
ウィンドウの高さ	height=数値 (px) 例: height=400	〃
画面上の表示する位置（上から）	top=数値 (px) 例: top=200	〃
画面上の表示する位置（左から）	left=数値 (px) 例: left=200	〃
ステータスバーの有無	status or status=yes or status=1	記述無し or status=no or status=0
ウィンドウのサイズ変更の有無	resizable or resizable=yes or resizable=1	記述無し or resizable=no or resizable=0
スクロールバーの有無	scrollbars or scrollbars=yes or scrollbars=1	記述無し or scrollbars=no or scrollbars=0
ツールバー（戻る、進む等のボタンがある場所）の有無	toolbar or toolbar=yes or toolbar=1	記述無し or toolbar=no or toolbar=0
メニューバー（ファイル、編集等のボタンがある場所）の有無	menubar or menubar=yes or menubar=1	記述無し or menubar=no or menubar=0
アドレスバーの有無	location or location=yes or location=1	記述無し or location=no or location=0

見る window.open("./window.html", "", "width=500,height=400,top=200,left=200,status=yes,resizable=yes,scrollbars=yes");

アンカーに直接使用する場合にイベントハンドラを使用する場合は、このリンクをクリックした時に window.open() によって新しいウィンドウが開かれると共に、アンカーの href に指定されたリンク先も表示してしまうため、return false; として onclick 以外の動作を無効化します。

ただし、href の値を以下のようにすると void によって無効になりますので、イベントハンドラに return false; は不要です。

<a href="javascript:void(0);" onclick="window.open('./window.html', '', 'width=500,height=400');">新しいウィンドウ</a>

また、href に直接 void を使用して window.open() する場合は以下のようにしてください。

<a href="javascript:window.open('./window.html', '', 'width=400,height=400'); void(0);">新しいウィンドウ</a>
<a href="javascript:void(window.open('./window.html', '', 'width=400,height=400'));">新しいウィンドウ</a>

JavaScript が無効の状態の時はアンカーに指定したリンク先が表示されますので、リンク先を開くのを目的とした場合に使用される場合は、href にはリンク先の URL を指定して、onclick 等のイベントハンドラに使用された方が良いと思います。

新しいウィンドウを開くスクリプトを作成するには、ウィンドウ作成をご利用ください。

リンク先を新しいウィンドウで開く

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
function openwin(url) {
	window.open(url, "", "width=500,height=400");
}
// -->
</script>
</head>
<body>
<a href="./window.html" onclick="openwin(this.href); return false;">リンク</a>
</body>
</html>

直接使用する場合

<a href="./window.html" onclick="window.open(this.href, '', 'width=500,height=400'); return false;">リンク</a>

this.href は、このリンクの href に指定した値（この場合 window.html）を指します。

異なったリンク先を新しいウィンドウでサイズ指定して開く

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
function openwin(url, w, h) {
	window.open(url, "", "width=" + w + ",height=" + h);
}
// -->
</script>
</head>
<body>
<a href="javascript:openwin('./window.html', 800, 600);">800x600</a>
<a href="./window.html" onclick="openwin('./window.html', 600, 400); return false;">600x400</a>
<a href="./window.html" onclick="openwin(this.href, 400, 200); return false;">400x200</a>
</body>
</html>

このように各値を引数として代入することでそれぞれ違うリンクやウィンドウサイズにすることができます。