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

2017/10/13

open()は、Windowのメソッドです。新しいウィンドウを開きます。

概要

名前

open

所属

IDL

WindowProxy? open(optional USVString url = "about:blank", optional DOMString target = "_blank", optional [TreatNullAs=EmptyString] DOMString features = "");

仕様書

https://html.spec.whatwg.org/multipage/window-object.html#dom-open

説明

第1引数(url)には、URLを指定します。

第2引数(target)には、ターゲットのコンテキスト名を指定します。a要素のtarget属性と同じです。

第3引数(features)には、key=valueという文字列で機能を指定します。機能を複数指定するにはコンマ(,)で区切ります。

width: 横幅。値はピクセル単位の数値で指定する。
height: 高さ。値はピクセル単位の数値で指定する。
left: 初期値は0。ウィンドウの水平方向の位置。スクリーン(Screen.availWidth)の左端からの距離。値はピクセル単位の数値で指定する。
top: 初期値は0。ウィンドウの垂直方向の位置。スクリーン(Screen.availHeight)の上端からの距離。値はピクセル単位の数値で指定する。

チュートリアル

第3引数には新しく開くウィンドウの機能を指定します。横幅200pxのウィンドウを開きたい場合は下記の通りです。

open( "./page.html", "_blank", "width=200" ) ;

複数の機能を追加する場合、コンマ(,)で区切ります。高さ150pxという機能も追加する場合は下記の通りです。

open( "./page.html", "_blank", "width=200,height=150" ) ;

デモ

Window.open()のデモです。新しいウィンドウを開きます。コメントアウトを変更して、色々なパターンを試してみて下さい。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<body>
	<p><button id="run">ウィンドウを開く</button></p>
<script>
document.getElementById( "run" ).onclick = function () {
	open( "https://syncer.jp/", "_blank" ) ;
//	open( "https://syncer.jp/", "_blank", "width=400,height=300" ) ;
//	open( "https://syncer.jp/", "_blank", "width=400,height=300,top=500,left=500" ) ;
}
</script>
</body>
</html>