{{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 に空の文字列を指定すると、開いているウィンドウの場所を変更せずにその名前で参照を取得することができます。そうでない場合は、 window.open() を呼び出すと、ただ新しいウィンドウが作成されます。
新しいウィンドウを window.open() を呼び出すたびに開きたい場合は、特別な値 _blank を windowName に使用してください。
window.open() を使用して既存のウィンドウを windowName という名前で再オープンする場合の注意点: この機能はすべてのブラウザーで有効であるわけではなく、もっと様々な条件があります。Firefox (50.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 {{deprecated_inline}} (Firefox のみ、 Firefox 80 で廃止)outerWidth の値は、ウィンドウの垂直スクロールバー (存在する場合)、左と右のウィンドウリサイズ枠を含みます。outerHeight {{deprecated_inline}} (Firefox のみ、 Firefox 80 で廃止)outerHeight の値は、すべての存在するツールバー、ウィンドウの水平スクロールバー (存在する場合)、上と下のウィンドウリサイズ枠を含みます。下限の値は 100 です。最近のブラウザー (Firefox 76 以降、 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="https://www.mozilla.org/support/firefox/faq"
target="SingleSecondaryWindowName"
onclick="openRequestedSinglePopup(this.href); return false;"
title="このリンクは、新しいウィンドウを生成するか、すでに開かれているウィンドウを再利用します。"
>Firefox FAQ</a></p>
"Scripts may not close windows that were not opened by script." という警告メッセージが報告されるでしょう。そうしなければ、ブラウザーセッション中の訪問した URL の履歴が失われてしまいます。about:config のユーザー設定で絶対的に制御することができます。このようなウィンドウを使用するのはユーザーですので (ウェブ制作者であるあなたではありません)、ユーザーの習慣や好みに干渉しないようにするのが一番です。コンテンツへのアクセシビリティとウィンドウの使いやすさを確保するために、リサイズ機能とスクロールバーの有無 (必要に応じて) を常に yes に設定することをお勧めします。これは、ウェブ制作者とユーザーの双方にとって最善の方法です。about:config で dom.disable_window_move_resize を true に設定するか、ユーザーの user.js file ファイルを編集することで、ユーザーがウィンドウのサイズを変更できないようにすることができるためです。window.open() の返値を調べる必要があります。ウィンドウが開くことが許可されなかった場合の返値は、 null です。しかし、他の多くのポップアップブロッカーに対しては、そのような方法はありません。window.open() メソッドは、主ウィンドウに副ウィンドウへの参照を渡します。 opener プロパティは、副ウィンドウに主ウィンドウへの参照を渡します。一般的に言えば、いくつかの理由で、window.open() への依存を回避することをお勧めします。
リンクを新しいウィンドウで開く機能を提供したい場合は、テスト済みで推奨されるユーザービリティとアクセシビリティのガイドラインに従ってください。
"javascript:" 形式のリンクは、どのブラウザーでもウェブページのアクセシビリティとユーザービリティを損ないます。
参考記事:
このような疑似リンクも、リンクのアクセシビリティを損ないます。 href 属性の値には必ず本物の URL を使用してください。そうすれば、 javascript のサポートが無効または存在しない場合や、ユーザーエージェントが副ウィンドウを開くことに対応していない場合 (MS-Web TVやテキストブラウザーなど) でも、そのユーザーエージェントが参照されたリソースを開く/処理する既定のモードに従って、参照されたリソースをロードすることができます。この形のコードは、リンクの中央クリック、リンクの Ctrl + クリック、リンクの Ctrl + Enter、「マウスジェスチャー」など、タブ機能付きブラウザーの高度な機能にも干渉します。
リンクに title 属性を記述したり、リンクの最後にアイコンを追加したり、反応するカーソルを記述することによってユーザーに情報を与え、新しいウィンドウを開くことになるリンクを識別できるようにしてください。
ユーザーに警告をする目的は、コンテキストが変化するときに、ユーザーの混乱を最小限にするためです。現在のウィンドウが変化したり、新しいウィンドウがポップアップしたりすると、ユーザーが混乱します (ツールバーの戻るボタンが使えません)。
"ユーザーが新しいウィンドウが開いたことに気づかないことはけっこうあります。特に、小さなモニターを使用していて、ウィンドウが最大化されている場合です。元のページに戻ろうとするユーザーは、戻るボタンがグレーアウトしているので、混乱してしまいます。"
引用元：The Top TenNew Mistakes of Web Design: 2. Opening New Browser Windows, Jakob Nielsen, May 1999 (日本語版)/p>
コンテキストの極端な変化が発生する前に明示されていれば、ユーザーは先に進みたいかどうかを判断することができ、変化に備えることができます。ユーザーが混乱したり、混乱を感じたりすることがないだけでなく、経験豊富なユーザーは、そのようなリンクをどのように開くか (新しいウィンドウで開くか、同じウィンドウで開くか、新しいタブで開くか、「バックグラウンド」で開くか) をより適切に判断することができます。
リファレンス
| 「新しいウィンドウ」を示すアイコンとカーソルの例 | |||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
JavaScript サポートが無効化されている、もしくは、存在しない場合、ユーザーエージェントは、自身の target 属性の扱い方に従って副ウィンドウを生成するか、参照されるリソースを表示するでしょう。例えば、MS Web TV のような、新しいウィンドウを生成できないいくつかのユーザーエージェントは、参照されたリソースを取りだしてから、それを現在のウィンドウの最後に追加します。その最終目的と考え方は、ユーザーに参照されるリソースを開く方法、つまり、リンクを開く形式を提供しようとすることであり、 - 強制することではありません。 - あなたのコードはユーザーが自由に選択できるブラウザーの機能を妨害すべきではありませんし、ユーザーに与えられる最終決定権を妨害すべきではありません。
target="_blank" を使わない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 パーツの表示状態を固定しています。
この条件は実装上のものであり、安定性を保証するものではありません。
コンテンツがビューポートの範囲からはみ出すときは、スクロールバー (またはスクロールする仕組み) によってコンテンツにユーザーがアクセスできることを保証する必要があります。ウェブ開発者が制御できないいくつかの理由で、コンテンツがウィンドウの範囲をはみ出すことがあります。
特性リストで要求された位置と寸法の値が守られず、そのような要求された値のいずれかが、ユーザーのオペレーティングシステムのアプリケーションのための作業領域内にブラウザーウィンドウ全体をレンダリングすることができない場合は修正されます。新しいウィンドウの一部が画面外に初期配置されることはありません。これは、Mozilla ベースのブラウザーではすべてのリリースで既定となっています。
MSIE 6 SP2にも同様のエラー修正機構がありますが、既定ではすべてのセキュリティレベルで有効になっているわけではありません。セキュリティ設定により、このエラー修正機構を無効にすることができます。