Window open() メソッド

定義と使用法

open() メソッドは新しいブラウザのウィンドウまたは新しいタブを開きますが、ブラウザの設定やパラメータの値によって異なります。

参照：

close() メソッド

インスタンス

例 1

新しいブラウザのタブで "www.codew3c.com" を開きます：

window.open("https://www.codew3c.com");

自分で試してみる

ページの下部にさらに例があります。

文法

window.open(url, name, features, replace)

パラメータ

パラメータ 説明
url

オプションです。開くページの URL です。

指定されていない場合 url、新しい空のウィンドウまたはタブが開かれます。
name オプションです。target 属性またはウィンドウの名前です。
features オプションです。カンマで区切られたプロジェクトリスト、スペースは含まれません。
replace

廃止されました。

URL が新しいエントリを作成するか、历史リストの現在のエントリを置き換えるかを定義します。

以下の値をサポートします：

  • true - URL は历史リストの現在のドキュメントを置き換えます
  • false - URL は历史リストに新しいエントリを作成します

警告：Chrome では replace パラメータが指定されない場合、例外が発生します。

name パラメータは以下の値をサポートします：

値 説明
_blank URL が新しいウィンドウまたはタブにロードされます。デフォルトです。
_parent URL が親フレームにロードされます。
_self URL を現在のページに置き換えます。
_top URL はフレームセットが読み込まれる可能性がある場所を置き換えます。
name ウィンドウの名前（ウィンドウのタイトルは指定されません）。

features パラメータは以下の値をサポートします：

値 説明
fullscreen=yes|no|1|0 ブラウザを全画面モードで表示するかどうか。デフォルトはいいえです。全画面モードのウィンドウは、カフェモードも必要です。IE に限られます。
height=pixels ウィンドウの高さ、ピクセル単位で表されます。最小値は 100 です。
left=pixels ウィンドウの左側位置（X 座標）、ピクセル単位で表されます。負の値は許可されません。
location=yes|no|1|0 アドレスフィールドを表示するかどうか。Opera に限られます。
menubar=yes|no|1|0 メニューを表示するかどうか。
resizable=yes|no|1|0 ウィンドウがサイズ変更可能かどうか。IE に限られます。
scrollbars=yes|no|1|0 スクロールバーを表示するかどうか。IE、Firefox、Opera に限られます。
status=yes|no|1|0 ステータスバーを追加するかどうか。
titlebar=yes|no|1|0 タイトルバーを表示するかどうか。HTML アプリケーションや信頼できるダイアログが呼び出されていない場合、無視されます。
toolbar=yes|no|1|0 ブラウザツールバーを表示するかどうか。IE および Firefox に限られます。
top=pixels ウィンドウの上部位置（Y 座標）、ピクセル単位で表されます。負の値は許可されません。
width=pixels ウィンドウの幅、ピクセル単位で表されます。最小値は 100 です。

返り値

新しいウィンドウへの参照を返します。呼び出しが失敗すると、null が返されます。

技術的詳細

説明

open() メソッドは既存のウィンドウを検索したり新しいブラウザウィンドウを開いたりします。もし name パラメータで既存のウィンドウが指定された場合、そのウィンドウへの参照を返します。返されるウィンドウは url パラメータで指定されたドキュメントを表示しますが、 features パラメータ。ウィンドウ名のみが知られている場合、これは JavaScript がそのウィンドウへの参照を取得する唯一の方法です。

が指定されていない場合 name パラメータを表示するか、指定されたウィンドウが存在しない場合、 open() メソッドは新しいブラウザウィンドウを作成します。この新しいウィンドウは url パラメータで指定された URL、その名前は name 指定され、サイズおよびコントロールは features パラメータで指定されます。もし url が空文字列の場合は open() 新しいウィンドウを開きます。

name パラメータで新しいウィンドウの名前を指定します。この名前には数字、アルファベット、アンダースコアのみが使用できます。これはマークとして <a> および <form> の target 属性の値を使って、ドキュメントを指定されたウィンドウ内に表示させるために使われます。

メソッドを使用する場合 Window.open() 既存の指定ウィンドウに新しいドキュメントをロードする際、それに渡すことができます。 replace 参数，用来声明新文档是在窗口的浏览历史中拥有自己的条目，还是替换当前文档的条目。如果 replace パラメータと同じです。 replace の値が true である場合、新しいドキュメントは古いドキュメントを置き換えます。値が false である場合、または省略されている場合、新しいドキュメントはウィンドウのブラウジング履歴に独自のエントリを持つことになります。このパラメータが提供する機能は、

Location.replace() メソッド Window.open() 提供する機能が非常に似ています。 は、Document.open() メソッド Window.open()、open() 処理子を使用することは推奨されません。 open()を使用する必要があります。 Document.open()、したがって、この場合には、 Window.open()。

ウィンドウ特性

features パラメータは、ウィンドウに表示する特性のリストで、各特性はカンマで区切られます。このオプションパラメータの値が空であるか、省略されている場合、ウィンドウはすべての特性を表示します。ただし、 features 指定された特性がある場合、このリストにない特性はウィンドウに表示されません。注意点として、この文字列には任何のスペースや空白は含まれていません。各要素のフォーマットは以下の通りです：

feature[=value]

ほとんどの特性では、value の値は yes または no です。これらの特性の後の等号と value 値は省略可能です。特性が指定されている場合、その値は value 値は yes で、指定されていない場合、デフォルトで value 値は no です。ただし、width や height の特性が value 値は必須で、必ずピクセル値を指定してください。

ブラウザサポート

すべてのブラウザがサポートしています open()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
サポート サポート サポート サポート サポート サポート

さらに多くの例

例 2

新しいウィンドウ/タブで about:blank ページを開く：

var myWindow = window.open("", "", "width=200,height=100");

自分で試してみる

例 3

「MsgWindow」と名付けられた新しいウィンドウを開き、そこにテキストを書き込む：

var myWindow = window.open("", "MsgWindow", "width=200,height=100");
myWindow.document.write("<p>This is 'MsgWindow'. I am 200px wide and 100px tall!</p>");

自分で試してみる

例 4

新しいウィンドウで現在のウィンドウを置き換える：

var myWindow = window.open("", "_self");
myWindow.document.write("<p>現在のウィンドウを置き換えました。</p>")}

自分で試してみる

例 5

新しいウィンドウを開き、その外観を制御します：

window.open("https://www.codew3c.com", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");

自分で試してみる

例 6

複数のタブを開きます：

window.open("http://www.google.com/");
window.open("https://www.codew3c.com/");

自分で試してみる

例 7

新しいウィンドウを開き、その close() メソッドを使用してこのウィンドウを閉じます：

function openWin() {
  myWindow = window.open("", "myWindow", "width=200,height=100");   // 新しいウィンドウを開く
}
function closeWin() {
  myWindow.close();   // この新しいウィンドウを閉じる
}

自分で試してみる

例 8

新しいウィンドウを開きます。name 属性を使用して新しいウィンドウの名前を返します：

var myWindow = window.open("", "MsgWindow", "width=200,height=100");
myWindow.document.write("<p>このウィンドウの名前は: " + myWindow.name + "</p>");

自分で試してみる

例 9

opener 属性を使用して、新しいウィンドウを開いたウィンドウへの参照を返します：

var myWindow = window.open("", "myWindow", "width=200,height=100");   // 新しいウィンドウを開く
myWindow.document.write("<p>これは'myWindow'です</p>");   // 新しいウィンドウ内のテキスト
myWindow.opener.document.write("<p>これはソースウィンドウです！</p>");  // 新しいウィンドウのウィンドウ内のテキスト

自分で試してみる