新しいウインドウを開く

現在のページとは別に新しくウインドウやタブを開く方法を解説します。

この記事のポイント

別ウインドウで新しいページを開く
ブラウザのポップアップ警告に注意
新しいウインドウのサイズや表示位置を指定する

JavaScriptで新しいウインドウを開く

windowオブジェクトのopenメソッドを使うと、指定したURIを新しいウインドウとして開くことができます。
例えば、次のようにボタンを押すと別ウインドウが表示されるイメージです。

openメソッドは次のように使用します。
この例ではid属性「button1」を持つボタンがクリックされるとopenメソッドを実行します。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>JS Test</title>
	<script>
		window.addEventListener('load', (event) => {

			document.getElementById('button1').addEventListener('click', () => {

				var options = "menubar=yes";
				window.open('https://gray-code.com', 'GRAYCODE', options);
			});

		});
	</script>
</head>
<body>
<h1>JS Test</h1>
<button id="button1">新しいウインドウを開く</button>
</body>
</html>

第1引数は新しいウインドウに表示するページのURI、第2引数はページタイトル、第3引数はオプションです。
ページを開くだけであればURIのみ指定してください。

ブラウザのポップアップブロックに注意する

openメソッドは手軽に別ウインドウを開く機能を実装でき便利ですが、ブラウザの標準機能でポップアップブロックに引っかかってしまうことがあります。

ポップアップブロックは閲覧者のアクションに関連するかが基準となり、上記のように閲覧者がボタンを押したときに表示する場合はブロックされません。
しかし、ページが読み込まれたタイミングやAjax通信完了したタイミングなどで表示しようとすると次のようにブロックされてしまうため注意が必要です。

Chromeのポップアップブロック

ブロックを防ぐために、openメソッドはクリックなど閲覧者のアクションに結びつけて実行してください。

別タブで開く

冒頭の例のような別ウインドウではなく、a要素のtarget="_blank"のようにウインドウを分けずに別タブで開くこともできます。

方法は2つあり、1つ目は次のように第3引数のオプションの指定を省略します。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>JS Test</title>
	<script>
		window.addEventListener('load', (event) => {

			document.getElementById('button1').addEventListener('click', () => {
				window.open('https://gray-code.com', 'GRAYCODE');
			});

		});
	</script>
</head>
<body>
<h1>JS Test</h1>
<button id="button1">新しいウインドウを開く</button>
</body>
</html>

2つ目は次のようにオプションを指定しても同じことができます。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>JS Test</title>
	<script>
		window.addEventListener('load', (event) => {

			document.getElementById('button1').addEventListener('click', () => {
				var options = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";
				window.open('https://gray-code.com', 'GRAYCODE', options);
			});

		});
	</script>
</head>
<body>
<h1>JS Test</h1>
<button id="button1">新しいウインドウを開く</button>
</body>
</html>

menubar、location、resizable、scrollbars、statusの5つを全てyesにすると別タブで開くことができますが、1つ目の方法の方がシンプルで手軽なためオススメです。

ウインドウのサイズを指定する

新しく開くウインドウの表示サイズは第3引数のオプションで指定することが可能です。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>JS Test</title>
	<script>
		window.addEventListener('load', (event) => {

			document.getElementById('button1').addEventListener('click', () => {
				var options = "width=300,height=300";
				window.open('https://gray-code.com', 'GRAYCODE', options);
			});

		});
	</script>
</head>
<body>
<h1>JS Test</h1>
<button id="button1">新しいウインドウを開く</button>
</body>
</html>

横幅と高さは必ずセットで、px単位でのみ指定することができます。
どちらかを省略、またはどちらも省略すると元のウインドウサイズになります。

ウインドウの表示位置を指定する

横幅と高さを指定した場合に限り、ウインドウの表示位置を指定することができます。

位置を指定した場合は端末の表示エリアの左上を起点（0px × 0px）として新しいウインドウを表示します。
次の例はleft=200px、top=400pxを指定したときの表示例です。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>JS Test</title>
	<script>
		window.addEventListener('load', (event) => {

			document.getElementById('button1').addEventListener('click', () => {
				var options = "width=300,height=300,left=200,top=400";
				window.open('https://gray-code.com', 'GRAYCODE', options);
			});

		});
	</script>
</head>
<body>
<h1>JS Test</h1>
<button id="button1">新しいウインドウを開く</button>
</body>
</html>

leftは画面左端からの距離、topは画面上部からの距離になり、省略すると自動的に0pxになります。
また、横幅と高さが指定されていない場合はこのオプションは無視され適用させません。

ちなみにCSSのpositionプロパティのようなright（右端からの距離）やbottom（下部からの距離）は指定できません。