{{domxref("Window")}} インターフェイスの open() メソッドは、指定されたリソースを、新しい、または既存の指定された名前を持った閲覧コンテキスト (ウィンドウ、 {{HTMLElement("iframe")}}、タブ) に読み込みます。その名前が存在しない場合は、新しい閲覧コンテキストが新しいタブまたは新しいウィンドウに開かれ、指定されたリソースがそこに読み込まれます。
var window = window.open(url, windowName, [windowFeatures]);urlurl として指定されると、対象の閲覧コンテキストに空のページが開きます。windowName {{optional_inline}}windowName で指定した名前が与えられます。target 属性のターゲットとして使うことができます。この名前はホワイトスペースを含んではいけません。これはウィンドウのタイトルとしては使用されないことに注意してください。windowFeatures {{optional_inline}}WindowProxy オブジェクトで、基本的には新しく作成されたウィンドウを表す {{domxref("Window")}} オブジェクトの薄いラッパーであり、すべての機能が利用可能なものです。ウィンドウを開くことができなかった場合、返される値は代わりに null となります。返された参照は、同一オリジンポリシのセキュリティ要件に準拠している限り、新しいウィンドウのプロパティやメソッドにアクセスするために使用することができます。
open() メソッドは、新しい副ブラウザウィンドウを生成します。それは、ファイルメニューから新しいウィンドウを選ぶのに似ています。引数 url は、新しいウィンドウにおいて読み取り読み込む URL を指定します。 url が空文字列の場合は、メインウィンドウの既定のツールバーを持った新しい空のウィンドウ (URL は about:blank) が生成されます。
リモートの URL は、すぐには読み込まれないことに注意してください。 window.open() から返ったとき、ウィンドウは常に about:blank を含んでいます。 URL が実際に読み込まれるまでには猶予期間があり、現在のスクリプトブロックが実行を終えた後に開始されます。ウィンドウの生成と参照されるリソースの読み込みは、非同期に行われます。
var windowObjectReference;
var windowFeatures = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";
function openRequestedPopup() {
windowObjectReference = window.open("http://www.cnn.com/", "CNN_WindowName", windowFeatures);
}
var windowObjectReference;
function openRequestedPopup() {
windowObjectReference = window.open(
"http://www.domainname.ext/path/ImageFile.png",
"DescriptiveWindowName",
"resizable,scrollbars,status"
);
}
その名前を持っているウィンドウがすでに存在する場合は、 url は既存のウィンドウに読み込まれます。この場合、メソッドの返値は既存のウィンドウであり、 windowFeatures は無視されます。 url に空の文字列を指定すると、開いているウィンドウの場所を変更せずにその名前で参照を取得することができます。 Firefox と Chrome (少なくとも) では、これは同じ親からしか動作しません。つまり、現在のウィンドウは走査しようとしているウィンドウを開いた者になります。そうでない場合は、 window.open() を呼び出すと新しいウィンドウが作成されるだけです。
新しいウィンドウを window.open() の呼び出すたびに開きたい場合は、特殊な値 _blank を windowName に使用してください。
window.open() を使用して既存のウィンドウを windowName という名前で再オープンする場合の注意点: この機能はすべてのブラウザーで有効であるわけではなく、もっと様々な条件になります。Firefox (50.0.0.1) の機能は説明した通りです。同じドメイン＋ポート番号から同じ名前で再オープンすると、以前に作成されたウィンドウにアクセスできます。一方、 Google Chrome (55.0.2883.87 m ) は、同じ親からのみそれを行います (あたかもウィンドウが依存的に作成されたかのように、これが「オープナー」です)。これは広い制限であり、信じられないほどの開発の複雑さを生み出しています。 Firefox (51.) はハンドルを取得しますが、 Element.focus() は実行できません。一方、 Chrome はオープナーから子への focus() は実行できますが、兄弟間や逆に子からオープナーへのは実行できません。この関数は、その名前 (名前はクッキーやローカルストレージで保存できますが、ウィンドウオブジェクトのハンドルはできません) にしかアクセスできない場合、ウィンドウ上のハンドルを取り戻すためのたった一つの鍵となります。 2017/10/01 時点で、最近発見された動作の違いは、他のブラウザーではまだテストされていません。
windowFeatures はオプションの文字列で、新しいウィンドウに指定する特性をコンマで分割したリストを指定します。ウィンドウが開かれた後、ウィンドウの機能やウィンドウのツールバーを変えるために JavaScript を用いることはできません。 windowName が既存のウィンドウを指定せず、かつ、引数 windowFeatures を与えなかった場合 (もしくは、引数 windowFeatures が空文字列だった場合) は、新しい副ウィンドウにはメインウィンドウの既定のツールバーが表示されます。
豆知識: ブラウザーによっては、ユーザーが windowFeatures の設定を上書きして機能を有効にする (または無効にすることを防ぐ) ことができます。
引数 windowFeatures で、新しいウィンドウの位置と大きさを指定することができます。
どちらか一方だけが指定されている場合は、動作は実装に依存しており、ウェブの作者はそれに依存してはいけません。
left または screenXtop または screenY引数 windowFeatures 空でなく、位置の特性が定義されなかった場合は、新しいウィンドウの左上の座標は、最も新しく表示されたウィンドウがあった位置から 22 ピクセル離れた位置になります。オフセットはブラウザーの製造者によって全般的に実装されており (IE6 SP2 で既定のテーマの場合は 29 ピクセルです)、これは新しいウィンドウが開いたことをユーザーが気付きやすくするためのものです。最も新しく使用されたウィンドウが最大化された状態である場合は、オフセットはありません。新しい副ウィンドウも同様に最大化されます。
どちらか一方だけが指定されている場合は、動作は実装に依存しており、ウェブの作者はそれに依存してはいけません。
width または innerWidthheight または innerHeight引数 windowFeatures 空でなく、位置の特性が定義されなかった場合は、新しいウィンドウの大きさは最も新しく表示されたウィンドウと同じ大きさになります。
使用しないでください。
outerWidth (only on Firefox)outerWidth の値は、ウィンドウの垂直スクロールバー (存在する場合)、左と右のウィンドウリサイズ枠を含みます。outerHeight (only on Firefox)outerHeightの値は、すべての存在するツールバー、ウィンドウの水平スクロールバー (存在する場合)、上と下のウィンドウリサイズ枠を含みます。最近のブラウザー (Firefox 76 (2020年5月5日リリース予定) 以降のブラウザー、Google Chrome、Safari、Chromium Edge) では、以下の機能はあくまでもポップアップを開くかどうかの条件です。ポップアップの条件の項を参照してください。
以下の機能は、各UIパーツの表示を制御します。すべての機能は yes または 1 に設定するか、単に存在していればオンになります。設定できます。それらを no または 0 に設定するか、多くの場合はそれらを省略すればオフにすることができます。
例: status=yes, status=1, status は同じ結果になります。
menubarwindowFeatures が空でない場合、 menubar の既定値はオフです。toolbarwindowFeatures が空でない場合、 toolbar の既定値はオフです。locationwindowFeatures が空でない場合、 location の既定値はオフです。statuswindowFeatures が空でない場合、 status の既定値はオフです。resizablewindowFeatures が空でない場合、 resizable の既定値はオンです。
豆知識: アクセシビリティ上の理由から、この特性は常にオンにするよう強く推奨します。
scrollbarswindowFeatures が空でない場合、 scrollbars の既定値はオフです。豆知識: アクセシビリティ上の理由から、この特性は常にオンにするよう強く推奨します。
noopenernull を返すため) アクセスできなくなります。さらに、 window.open() の呼び出しも null を返すので、元のウィンドウも新しいウィンドウにアクセスできなくなります。これは、信頼されていないサイトが window.open() で開かれたサイトが元のウィンドウを改ざんしないようにするために便利ですし、その逆も同様です。noopener が使用されている場合、 _top, _self, _parent 以外の空でないターゲット名は、新しいウィンドウやタブを開くかどうかを決定する際に、すべて _blank と同じように扱われることに注意してください。rel="noopener" およびブラウザーの互換性の紹介、補助的な効果の情報を含めて参照してください。noreferrerreferrer を noreferrer に設定して読み込まれます。これにより、リクエストを開始したページの URL を、リクエストを送信するサーバーに送信することを防ぎます。さらに、この機能を設定すると自動的に noopener も設定されます。詳細や互換性については rel="noreferrer" を参照してください。 Firefox では Firefox 68 で noreferrer の対応が導入されました。<script type="text/javascript">
var windowObjectReference = null; // グローバル変数
function openFFPromotionPopup() {
if(windowObjectReference == null || windowObjectReference.closed)
/* メモリ内のウィンドウオブジェクトへのポインターが存在しないか、
そのようなポインターが存在するが、そのウィンドウが閉じられている場合 */
{
windowObjectReference = window.open("http://www.spreadfirefox.com/",
"PromoteFirefoxWindowName", "resizable,scrollbars,status");
/* 真であれば、ウィンドウを生成。新しいウィンドウが生成され、
他のウィンドウの最前面に移動します。*/
}
else
{
windowObjectReference.focus();
/* 偽であれば、ウィンドウへの参照は存在しなればならず、ウィンドウは
閉じられていません。それゆえ、 focus() メソッドで他のウィンドウの
最前面にそのウィンドウを移動させることができます。ウィンドウを再生成し、
参照されているリソースを更新させる必要はありません。 */
};
}
</script>
(...)
<p><a
href="http://www.spreadfirefox.com/"
target="PromoteFirefoxWindowName"
onclick="openFFPromotionPopup(); return false;"
title="このリンクは、新しいウィンドウを生成するか、すでに開かれているウィンドウを再利用します。"
>Firefox 採用の宣伝</a></p>
上記のコードは、副ウィンドウを開くリンクに関する、わずかなユーザービリティの問題を解決します。コード内の return false の目的は、リンクのデフォルトアクションをキャンセルすることです。: onclick イベントハンドラが実行される場合、リンクのデフォルトアクションを実行する必要はありません。しかし、ユーザのブラウザで javascript サポートが無効、もしくは、存在しない場合、onclick イベントハンドラは無視され、ブラウザは、target の "PromoteFirefoxWindowName" という名前のフレーム、もしくは、ウィンドウ内の参照されたリソースを読みこみます。"PromoteFirefoxWindowName" という名前のフレームもウィンドウも存在しない場合は、ブラウザは新しいウィンドウを生成し、そのウィンドウに "PromoteFirefoxWindowName" という名前を付けます。
target 属性の使い方の参考ページ:
HTML 4.01 Target attribute specifications（日本語訳）
How do I create a link that opens a new window?
また、この関数をパラメータ化して、より多くの状況に対応できるようにし、スクリプトやウェブページで再利用できるようにすることもできます。
<script type="text/javascript">
var windowObjectReference = null; // グローバル変数
function openRequestedPopup(url, windowName) {
if(windowObjectReference == null || windowObjectReference.closed) {
windowObjectReference = window.open(url, windowName,
"resizable,scrollbars,status");
} else {
windowObjectReference.focus();
};
}
</script>
(...)
<p><a
href="http://www.spreadfirefox.com/"
target="PromoteFirefoxWindow"
onclick="openRequestedPopup(this.href, this.target); return false;"
title="このリンクは、新しいウィンドウを生成するか、すでに開かれているウィンドウを再利用します。"
>Firefox 採用の宣伝</a></p>
この関数を、 副ウィンドウを 1 つだけ開くようにし、その単一の副ウィンドウをこの関数で開く他のリンクで再利用するようにすることもできます。:
<script type="text/javascript">
var windowObjectReference = null; // グローバル変数
var PreviousUrl; /* 副ウィンドウ内の現在の URL を
保存しているであろうグローバル変数 */
function openRequestedSinglePopup(url) {
if(windowObjectReference == null || windowObjectReference.closed) {
windowObjectReference = window.open(url, "SingleSecondaryWindowName",
"resizable,scrollbars,status");
} else if(PreviousUrl != url) {
windowObjectReference = window.open(url, "SingleSecondaryWindowName",
"resizable=yes,scrollbars=yes,status=yes");
/* 読み込まれるリソースが異なる場合、
それをすでに開かれている副ウィンドウに読み込み、
そのウィンドウをその親ウィンドウの最前面に再移動します。 */
windowObjectReference.focus();
} else {
windowObjectReference.focus();
};
PreviousUrl = url;
/* 説明: 現在の URL を保存し、この関数が再度呼び出されたときの
URL と比較できるようにします。 */
}
</script>
(...)
<p><a
href="http://www.spreadfirefox.com/"
target="SingleSecondaryWindowName"
onclick="openRequestedSinglePopup(this.href); return false;"
title="このリンクは、新しいウィンドウを生成するか、すでに開かれているウィンドウを再利用します。"
>Firefox 採用の宣伝</a></p>
<p><a
href="http://www.mozilla.org/support/firefox/faq"
target="SingleSecondaryWindowName"
onclick="openRequestedSinglePopup(this.href); return false;"
title="このリンクは、新しいウィンドウを生成するか、すでに開かれているウィンドウを再利用します。"
>Firefox FAQ</a></p>
"スクリプトはスクリプトによって開かれたウィンドウ以外を閉じることができません。" そうしなければ、ブラウザセッション中の訪問した URL の履歴が失われるでしょう。about:config における ユーザ設定で、リサイズ、スクロール、ツールバーの表示を自らコントロールできます。ユーザーはそのウィンドウを使うであろう一人に過ぎない (ウェブ制作者であるあなたではありません) ので、最も良いのは、彼らの習慣や設定に干渉することを避けることです。推奨する方法は、コンテンツへのアクセシビリティとウィンドウのユーザービリティを保証するために、リサイズとスクロールバーの表示を（必要ならば） 常に yes に設定することです。これは、ウェブ制作者とそのユーザーの両者のとって最も有益な方法です。about:config で dom.disable_window_move_resize を true に設定するか、ユーザーの user.js file ファイルを編集することで、ユーザーがウィンドウのサイズを変更できないようにすることができるためです。ウィンドウの移動または大きさの変更 のチェックボックスをチェックしないことにより、無効化されます。スクリプトによるユーザ画面上における遠隔操作的なウィンドウの移動または大きさの変更は、大変非常にユーザをいらいらさせるでしょうし、ユーザの頭を混乱させるでしょうし、最も間違っていることでしょう。そのようなウェブ制作者は、架空のユーザのブラウザウィンドウのあらゆる位置とサイズのアスペクトの完全なコントロールを期待しています（し、決めつけています）。window.open() の返値を調べる必要があります。ウィンドウが開くことが許可されなかった場合の返値は、 null です。しかし、他の多くのポップアップブロッカーに対しては、そのような方法はありません。一般的に言えば、いくつかの理由で、window.open() への依存を回避することを選択するべきです。:
リンクを新しいウィンドウで開くことを提供したい場合、テストされ、推奨できる、ユーザビリティとアクセシビリティのガイドラインに従うべきです。:
"javascript:" 形式のリンクは、すべてのブラウザーにおいて、ウェブページのアクセシビリティとユーザビリティを損ねます。
参考 URL:
そのような擬似リンクもリンクのアクセシビリティを損ねます。常に href 属性値を持つ本来の URL を使ってください。 そうすれば、JavaScript サポートが無効にされていたり、存在しない場合や、 MS-Web TV や、テキストブラウザなどのようなユーザエージェントが副ウィンドウを開くことをサポートしていない場合でも、そのようなユーザエージェントが、それらがサポートするデフォルトの方法に従って参照されるリソースを読みこむことができます。また、この形式のコードは、タブ機能を持つブラウザの高度な機能を妨害します。例えば、リンクのミドルクリック、リンクの Ctrl + クリック、リンクの Ctrl + Enter、"マウスジェスチャ" 機能です。
リンクの title 属性を記述したり、リンクの最後にアイコンを追加したり、反応するカーソルを記述することによってユーザに情報を与え、新しいウィンドウを開くことになるリンクを識別できるようにしてください。
ユーザに警告をする目的は、コンテキストが変化するときに、ユーザの混乱を最小限にするためです。現在のウィンドウが変化したり、新しいウィンドウがポップアップすることは、ユーザを混乱させます（ツールバーボタンの戻るは使えません）。
"ユーザが新しいウィンドウが開いたことに気づかないことはけっこうあります。特に、小さなモニターを使用していて、ウィンドウが最大化されている場合です。元のページに戻ろうとするユーザは、Back ボタンがグレーアウトしているので、混乱してしまいます。"
引用元：The Top TenNew Mistakes of Web Design: 2. Opening New Browser Windows, Jakob Nielsen, May 1999（日本語版）
コンテキストにおける急激な変化が発生する前にそれらが明確に示唆されるとき、ユーザは、そのまま進みたいかどうかを決めることができ、変化に対して準備することができます。ユーザを混乱させないだけでなく、より経験豊富なユーザは、そのようなリンクをどのように開くかに対するより良い決定を下すこともできます（新しいウィンドウとして開くかどうか、同じウインドウに読み込むか、新しいタブに開くどうか、"バックグラウンド" で開くかどうか）。
リファレンス
| "新しいウィンドウ" を示すアイコンとカーソルの例 | |||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
JavaScript サポートが無効化されている、もしくは、存在しない場合、ユーザエージェントは、自身の target 属性の扱い方に従って、副ウィンドウを生成するか、参照されるリソースを表示するでしょう。例えば、MS Web TV のような、新しいウィンドウを生成できないいくつかのユーザエージェントは、参照されたリソースを取りだしてから、それを現在のウィンドウの最後に追加します。その最終目的と考え方は、ユーザに参照されるリソースを開く方法、つまり、リンクを開く形式を提供しようとすることであり、 - 強制することではありません。 - あなたのコードはユーザが自由に選択できるブラウザの機能を妨害すべきではありませんし、ユーザに与えられる最終決定権を妨害すべきではありません。
target="_blank" を使わないtarget 属性には常に意味のある名前を指定し、あなたのページでそのような target 属性を再利用するようにしてください。そうすれば、別のリンクをクリックしても、参照されるリソースがすでに生成され、表示されているウィンドウに読みこまれることになるでしょう（そうすることで、ユーザ側の処理がスピードアップします）。また、そうすることで、副ウィンドウを最初の場所に生成する理由（とユーザのシステムリソース、時間消費）が正当化されるでしょう。単一の target 属性値を使用し、それをリンクで再利用することは、再利用される単一の副ウィンドウを生成するよりも、非常にユーザリソースに優しいことです。一方、target 属性の値として、"_blank" を使用すると、いくつかの新しい、名前のないウィンドウをユーザにデスクトップに生成することになり、それらは、再利用も、再使用もできません。どんな場合でも、あなたのコードが上手く動作する場合でも、ユーザの最終選択を妨害するべきではありません。そうではなく、より多くの選択肢、リンクを開くためのより多くの方法、ユーザが使用しているツール（ブラウザ）へのより多くの機能をユーザに提供するようにしてください。
| 仕様書 | 状態 | 備考 |
|---|---|---|
| {{SpecName('HTML WHATWG', 'window-object.html#dom-open', 'Window.open()')}} | {{Spec2('HTML WHATWG')}} | |
| {{ SpecName('CSSOM View', '#the-features-argument-to-the-open()-method', 'The features argument to the open() method') }} | {{ Spec2('CSSOM View') }} | features 引数の効果を定義します |
{{Compat("api.Window.open")}}
ほとんどの最新ブラウザー (以下に記載) では、ウェブコンテンツが UI パーツの表示・非表示を個別に制御することはできません。
ポップアップを開くか新規タブを開くか、新規ウィンドウを開くかの条件として windowFeatures の UI 関連項目を使用し、それぞれの UI パーツの表示状態を固定しています。
この条件は実装上のものであり、安定性を保証するものではありません。
コンテンツがビューポートの範囲からはみ出すときは、ユーザがコンテンツにアクセスできることを保証するために、スクロールバー（あるいは、スクロールする仕組み）が必要です。ウェブ制作者のコントロール外となるいくつかの理由でコンテンツがウィンドウの範囲をはみ出すことがあります。:
features のリストで指定された位置と寸法の値でブラウザウィンドウ全体がユーザのオペレーティングシステムにおけるアプリケーションのための作業領域内に表示し切れない場合、それらの値は、優先されず、修正されません。新しいウィンドウのどの部分も最初からスクリーン外に配置されることはありません。これは、Mozilla ベースのブラウザのリリース版の全てでデフォルトです。
MSIE 6 SP2 にも同じようなエラー修正の仕組みがあります。（日本語版）