From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/window/open/index.html | 540 ++++++++++++++++++++++++++++++++ 1 file changed, 540 insertions(+) create mode 100644 files/ja/web/api/window/open/index.html (limited to 'files/ja/web/api/window/open') diff --git a/files/ja/web/api/window/open/index.html b/files/ja/web/api/window/open/index.html new file mode 100644 index 0000000000..b6487db738 --- /dev/null +++ b/files/ja/web/api/window/open/index.html @@ -0,0 +1,540 @@ +--- +title: Window.open() +slug: Web/API/Window/open +tags: + - API + - DOM + - Method + - NeedsMarkupWork + - NeedsUpdate + - Reference + - Window + - open +translation_of: Web/API/Window/open +--- +
{{APIRef}}
+ +

{{domxref("Window")}} インターフェイスの open() メソッドは、指定されたリソースを、新しい、または既存の指定された名前を持った閲覧コンテキスト (ウィンドウ、 {{HTMLElement("iframe")}}、タブ) に読み込みます。その名前が存在しない場合は、新しい閲覧コンテキストが新しいタブまたは新しいウィンドウに開かれ、指定されたリソースがそこに読み込まれます。

+ +

構文

+ +
var window = window.open(url, windowName, [windowFeatures]);
+ +

引数

+ +
+
url
+
{{domxref("DOMString")}} で、読み込むリソースの URL を示します。これは HTML ページ、画像ファイル、その他のブラウザーが対応しているリソースのパスまたは URL にすることができます。空文字列 ("") が url として指定されると、対象の閲覧コンテキストに空のページが開きます。
+
windowName {{optional_inline}}
+
{{domxref("DOMString")}} で、指定したリソースを読み込むための閲覧コンテキスト (ウィンドウ、 {{HTMLElement("iframe")}}、タブ) の名前を指定します。名前が既存のコンテキストを示していない場合は、新しいウィンドウが作成され、 windowName で指定した名前が与えられます。
+
+ この名前は {{HTMLElement("a", "", "#attr-target")}} や {{HTMLElement("form", "", "#attr-target")}} 要素の target 属性のターゲットとして使うことができます。この名前はホワイトスペースを含んではいけません。これはウィンドウのタイトルとしては使用されないことに注意してください。
+
windowFeatures {{optional_inline}}
+
{{domxref("DOMString")}} で、ウィンドウ特性とそれに対応する値を "name=value" の形式で指定したもののカンマで区切りのリストです。これらの機能には、ウィンドウの既定のサイズや位置、ツールバーを含めるかどうかなどのオプションが含まれます。文字列にはホワイトスペースを入れてはいけません。指定できる各機能については、下記の{{anch("Window features", "ウィンドウ特性")}}を参照してください。
+
+ +

返値

+ +

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 または screenX
+
ユーザーのオペレーティングシステムのアプリケーションの作業領域の左端から、ブラウザーウィンドウの左端の境界線 (リサイズハンドル) までの距離を指定します。新しいウィンドウを最初に画面外に配置することはできません。
+
top または screenY
+
ユーザーのオペレーティング システムのアプリケーションの作業領域の上端から、ブラウザーウィンドウの上端の境界線 (リサイズハンドル) までの新しいウィンドウの配置距離を指定します。新しいウィンドウを最初に画面外に配置することはできません。
+
+ +

引数 windowFeatures 空でなく、位置の特性が定義されなかった場合は、新しいウィンドウの左上の座標は、最も新しく表示されたウィンドウがあった位置から 22 ピクセル離れた位置になります。オフセットはブラウザーの製造者によって全般的に実装されており (IE6 SP2 で既定のテーマの場合は 29 ピクセルです)、これは新しいウィンドウが開いたことをユーザーが気付きやすくするためのものです。最も新しく使用されたウィンドウが最大化された状態である場合は、オフセットはありません。新しい副ウィンドウも同様に最大化されます。

+ +

大きさ

+ +
+

どちらか一方だけが指定されている場合は、動作は実装に依存しており、ウェブの作者はそれに依存してはいけません。

+
+ +
+
width または innerWidth
+
コンテンツ領域、新しい副ウィンドウの表示領域の幅をピクセル単位で指定します。幅の値は、垂直スクロールバーが存在すれば、その高さを含みます。幅の値は、サイドバーが展開されていても、その幅を含みません。最小の要求値は 100 です。
+
height または innerHeight
+
コンテンツ領域、新しい副ウィンドウの表示領域の高さをピクセル単位で指定します。高さの値は、水平スクロールバーが存在するならば、その高さを含めます。最小の要求値は 100 です。
+
+ +

引数 windowFeatures 空でなく、位置の特性が定義されなかった場合は、新しいウィンドウの大きさは最も新しく表示されたウィンドウと同じ大きさになります。

+ +

ブラウザー固有の大きさの特性

+ +
+

使用しないでください。

+
+ +
+
outerWidth (only on Firefox)
+
ブラウザーウィンドウ全体の高さをピクセル単位で指定します。この outerWidth の値は、ウィンドウの垂直スクロールバー (存在する場合)、左と右のウィンドウリサイズ枠を含みます。
+
outerHeight (only on Firefox)
+
ブラウザーウィンドウ全体の高さをピクセル単位で指定します。この outerHeightの値は、すべての存在するツールバー、ウィンドウの水平スクロールバー (存在する場合)、上と下のウィンドウリサイズ枠を含みます。
+
+ +

ツールバーと UI 部品の特性

+ +
+

最近のブラウザー (Firefox 76 (2020年5月5日リリース予定) 以降のブラウザー、Google Chrome、Safari、Chromium Edge) では、以下の機能はあくまでもポップアップを開くかどうかの条件です。ポップアップの条件の項を参照してください。

+
+ +

以下の機能は、各UIパーツの表示を制御します。すべての機能は yes または 1 に設定するか、単に存在していればオンになります。設定できます。それらを no または 0 に設定するか、多くの場合はそれらを省略すればオフにすることができます。

+ +

例: status=yes, status=1, status は同じ結果になります。

+ +
+
menubar
+
この特性がオンに設定されている場合、新しい副ウィンドウにメニューバーが表示されます。
+
+ windowFeatures が空でない場合、 menubar の既定値はオフです。
+
toolbar
+
この特性がオンに設定されている場合、新しい副ウィンドウにツールバーボタン (戻る、進む、更新、中止ボタン) が表示されます。
+
+ ツールバーボタンに加えて、 Firefox (before 76) は親ウィンドウにタブバーが存在し、表示されていればタブバーが表示されます。 (この機能がオフに設定されている場合、ウィンドウ内のすべてのツールバーが非表示になります)。
+
+ windowFeatures が空でない場合、 toolbar の既定値はオフです。
+
location
+
この特性がオンに設定されている場合、新しい副ウィンドウにロケーションバーまたはアドレスバーが表示されます。
+
+ windowFeatures が空でない場合、 location の既定値はオフです。
+
status
+
この特性がオンに設定されている場合、新しい副ウィンドウにステータスバーが表示されます。
+
+ windowFeatures が空でない場合、 status の既定値はオフです。
+
resizable
+
この特性がオンに設定されている場合、新しい副ウィンドウの大きさが変更可能になります。
+
+ windowFeatures が空でない場合、 resizable の既定値はオンです。 +
+

豆知識: アクセシビリティ上の理由から、この特性は常にオンにするよう強く推奨します。

+
+
+
scrollbars
+
この特性がオンに設定されている場合、新しい副ウィンドウで文書がウィンドウのビューポートに収まりきらない場合、水平・垂直スクロールバーが表示されます。
+
+ windowFeatures が空でない場合、 scrollbars の既定値はオフです。
+
+ スクロールバーの注意を参照してください。 +
+

豆知識: アクセシビリティ上の理由から、この特性は常にオンにするよう強く推奨します。

+
+
+
+ +

ウィンドウ機能の特性

+ +
+
noopener
+
この機能が設定されている場合、新しく開いたウィンドウは通常通りに開きますが、元のウィンドウには ({{domxref("Window.opener")}} からは — null を返すため) アクセスできなくなります。さらに、 window.open() の呼び出しも null を返すので、元のウィンドウも新しいウィンドウにアクセスできなくなります。これは、信頼されていないサイトが window.open() で開かれたサイトが元のウィンドウを改ざんしないようにするために便利ですし、その逆も同様です。
+
noopener が使用されている場合、 _top, _self, _parent 以外の空でないターゲット名は、新しいウィンドウやタブを開くかどうかを決定する際に、すべて _blank と同じように扱われることに注意してください。
+
+ これはChrome, や Firefox 52 以降など、最近のブラウザーで対応しています。詳しくは rel="noopener" およびブラウザーの互換性の紹介、補助的な効果の情報を含めて参照してください。
+
noreferrer
+
この特性が設定されている場合、指定された URL のコンテンツを読み込むリクエストは、リクエストの referrer を 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>
+
+ +

FAQ

+ +
+
どのようにすれば、ユーザーにウィンドウを閉じるかどうか確認するメッセージを出さないようにすることができますか？
+
できません。 JavaScript によって開かれていない新しいウィンドウは、JavaScript によって閉じることは原則としてできません。 Mozilla ベースブラウザの JavaScript コンソールは、次の警告メッセージを出すでしょう。: "スクリプトはスクリプトによって開かれたウィンドウ以外を閉じることができません。" そうしなければ、ブラウザセッション中の訪問した URL の履歴が失われるでしょう。
+
詳細は、{{domxref("window.close()")}} メソッドを参照
+
どのようにすれば、ウィンドウを、最小化状態、あるいは、他のウィンドウの背後にある状態から復帰することができますか？
+
まず、対象ウィンドウのウィンドウオブジェクトへの参照が存在するかどうかを調べてください。それが存在し、かつ、閉じてしまっていない場合は、focus() メソッドを使用してください。他に確実な方法はありません。focus() メソッドの使用方法を説明している例 でテストすることができます。
+
ウィンドウを強制的に最大化するにはどうすればいいのですか？
+
できません。全てのブラウザーの作者は、新しい副ウィンドウが開くことを、ユーザーを混乱させずに、ユーザーに気づかせることができるように努力しています。
+
どのようにすれば、ウィンドウのリサイズを無効にしたり、ツールバーを非表示にできますか？
+
これを強制することはできません。Mozilla ベースのブラウザーのユーザーは、about:config における ユーザ設定で、リサイズ、スクロール、ツールバーの表示を自らコントロールできます。ユーザーはそのウィンドウを使うであろう一人に過ぎない (ウェブ制作者であるあなたではありません) ので、最も良いのは、彼らの習慣や設定に干渉することを避けることです。推奨する方法は、コンテンツへのアクセシビリティとウィンドウのユーザービリティを保証するために、リサイズとスクロールバーの表示を（必要ならば） 常に yes に設定することです。これは、ウェブ制作者とそのユーザーの両者のとって最も有益な方法です。
+
どのようにすれば、ウィンドウをコンテンツに合うようにリサイズできますか。
+
確実にはできません。 about:config で dom.disable_window_move_resize を true に設定するか、ユーザーの user.js file ファイルを編集することで、ユーザーがウィンドウのサイズを変更できないようにすることができるためです。
+
一般に、ユーザは、たいてい、ウィンドウの移動またはリサイズを無効にしています。その理由は、過去に、制作者のそのようなスクリプトを許可することで、大変な弊害を受けており、この特性を濫用しない、めったにないスクリプトでも、ウィンドウをリサイズするときに、間違ったリサイズをしばしば行うからです。これらのスクリプトの 99% は、ウィンドウのリサイズを不可能にしたり、スクロールバーを非表示にします。そのような場合、本来は、それらのスクリプトの計算が間違っている場合のための、用心深く、分別のある代替の仕組みとして、それらの特性の両方が有効であるべきです。
+
window オブジェクトのメソッドである、sizeToContent() メソッドもまた、ユーザが、設定の ウィンドウの移動または大きさの変更 のチェックボックスをチェックしないことにより、無効化されます。スクリプトによるユーザ画面上における遠隔操作的なウィンドウの移動または大きさの変更は、大変非常にユーザをいらいらさせるでしょうし、ユーザの頭を混乱させるでしょうし、最も間違っていることでしょう。そのようなウェブ制作者は、架空のユーザのブラウザウィンドウのあらゆる位置とサイズのアスペクトの完全なコントロールを期待しています（し、決めつけています）。
+
どのようにして、リンク先の参照リソースを新しいタブ、あるいは、指定したタブに開くのですか？
+
新しいタブでリソースを開くには、タブ付きブラウザーを参照してください。いくつかのコードスニペットが用意されています。 SDK を使用している場合は、タブの扱いが少し異なります。
+
Mozilla ベースのブラウザーである K-meleon 1.1 は、どのようにリンクを開くかに関する完全な管理と選択肢をユーザに与えています。いくつかの高度な拡張も、Mozilla と Firefox にどのように参照リソースをロードするかに関する多くの選択肢を与えます。
+
ここ数年の間に、CSS3 ハイパーリンクモジュールの target プロパティ（日本語訳） が実装されるかもしれません（CSS3 ハイパーリンクモジュールが承認された場合）。そうなった場合、タブブラウザ制作者がユーザにどのようにリンクからウェブページを開くことができるかに関する完全に拒否する権利と完全な管理を与えることを期待できます。どのようにリンクを開くかは、常に、完全にユーザの管理下にあるべきです。
+
どのようにして、開いたウィンドウがまだ開かれているかどうかを知るのですか？
+
ウィンドウオブジェクトへの参照が存在するかどうかをテストできます。それは、window.open() メソッドの呼び出しが成功した場合の戻り値です。また、windowObjectReference.closed プロパティの値の戻り値が false であるかどうかを調べることでもできます。
+
どのようにすれば、ウィンドウがポップアップブロッカーによってブロックされていることを知ることができますか？
+
Mozilla/Firefox と Internet Explorer 6 SP2 の組み込みポップアップブロッカーでは、window.open() の返値を調べる必要があります。ウィンドウが開くことが許可されなかった場合の返値は、 null です。しかし、他の多くのポップアップブロッカーに対しては、そのような方法はありません。
+
主ウィンドウと副ウィンドウの JavaScript の関係は？
+
window.open() メソッドと opener プロパティの戻り値です。WindowObjectReference は、opener キーワードが副ウィンドウをそれの主ウィンドウ（{{ 原語併記("開く側", "opener", "") }}）へつなげている間、主ウィンドウ（開く側）を副ウィンドウ（サブウィンドウ）へつなげています。
+
新しい副ウィンドウのプロパティにアクセスできません。JavaScript コンソールに、"Error: uncaught exception: Permission denied to get property <プロパティ名 or メソッド名>." というエラーが常に出ます。なぜそのようになるのですか？
+
それは、クロスドメインスクリプトセキュリティの制限（"同一生成元ポリシー"とも）のためです。異なった生成元（ドメイン名）からウィンドウ（あるいは、フレーム）にロードされるスクリプトは、別ウィンドウ（あるいは、フレーム）のプロパティ、または、別の異なった生成元（ドメイン名）由来の HTML オブジェクトの取得も設定もできません。それゆえ、主ウィンドウのブラウザは、副ウィンドウをターゲットとしたスクリプトを実行する前に、副ウィンドウが同じドメイン名を持っているかどうかを調べるでしょう。
+
クロスドメインスクリプトセキュリティ制限については、以下で詳細を参照してください。: http://www.mozilla.org/projects/secu...me-origin.html（日本語版）
+
+ +

ユーザビリティの問題

+ +

window.open() への依存の回避

+ +

一般的に言えば、いくつかの理由で、window.open() への依存を回避することを選択するべきです。:

+ + + + + +

リンクを新しいウィンドウで開くことを提供したい場合、テストされ、推奨できる、ユーザビリティとアクセシビリティのガイドラインに従うべきです。:

+ + + +

"javascript:" 形式のリンクは、すべてのブラウザーにおいて、ウェブページのアクセシビリティとユーザビリティを損ねます。

+ + + +

参考 URL:

+ + + +

決して <a href="#" onclick="window.open(...);"> を使わない

+ +

そのような擬似リンクもリンクのアクセシビリティを損ねます。常に 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（日本語版）

+
+ +

コンテキストにおける急激な変化が発生する前にそれらが明確に示唆されるとき、ユーザは、そのまま進みたいかどうかを決めることができ、変化に対して準備することができます。ユーザを混乱させないだけでなく、より経験豊富なユーザは、そのようなリンクをどのように開くかに対するより良い決定を下すこともできます（新しいウィンドウとして開くかどうか、同じウインドウに読み込むか、新しいタブに開くどうか、"バックグラウンド" で開くかどうか）。

+ +

リファレンス

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
"新しいウィンドウ" を示すアイコンとカーソルの例
yahoo.com の新しいウィンドウアイコンmicrosoft.com の新しいウィンドウアイコンwebaim.org の新しいウィンドウアイコンsun.com の新しいウィンドウアイコン
bbc.co.uk の新しいウィンドウアイコンAccessible Internet Solutions の新しいウィンドウアイコンaccessify.com の新しいウィンドウアイコンwebstyleguide.com の新しいウィンドウアイコン
ソース不明の新しいウィンドウアイコンソース不明の新しいウィンドウアイコンソース不明の新しいウィンドウアイコンgtalbot.org の新しいウィンドウアイコン
draig.de の新しいウィンドウカーソルmithgol.ru の新しいウィンドウカーソル
+ +

常に target 属性を使う

+ +

JavaScript サポートが無効化されている、もしくは、存在しない場合、ユーザエージェントは、自身の target 属性の扱い方に従って、副ウィンドウを生成するか、参照されるリソースを表示するでしょう。例えば、MS Web TV のような、新しいウィンドウを生成できないいくつかのユーザエージェントは、参照されたリソースを取りだしてから、それを現在のウィンドウの最後に追加します。その最終目的と考え方は、ユーザに参照されるリソースを開く方法、つまり、リンクを開く形式を提供しようとすることであり、 - 強制することではありません。 - あなたのコードはユーザが自由に選択できるブラウザの機能を妨害すべきではありませんし、ユーザに与えられる最終決定権を妨害すべきではありません。

+ +

target="_blank" を使わない

+ +

target 属性には常に意味のある名前を指定し、あなたのページでそのような target 属性を再利用するようにしてください。そうすれば、別のリンクをクリックしても、参照されるリソースがすでに生成され、表示されているウィンドウに読みこまれることになるでしょう（そうすることで、ユーザ側の処理がスピードアップします）。また、そうすることで、副ウィンドウを最初の場所に生成する理由（とユーザのシステムリソース、時間消費）が正当化されるでしょう。単一の target 属性値を使用し、それをリンクで再利用することは、再利用される単一の副ウィンドウを生成するよりも、非常にユーザリソースに優しいことです。一方、target 属性の値として、"_blank" を使用すると、いくつかの新しい、名前のないウィンドウをユーザにデスクトップに生成することになり、それらは、再利用も、再使用もできません。どんな場合でも、あなたのコードが上手く動作する場合でも、ユーザの最終選択を妨害するべきではありません。そうではなく、より多くの選択肢、リンクを開くためのより多くの方法、ユーザが使用しているツール（ブラウザ）へのより多くの機能をユーザに提供するようにしてください。

+ +

用語集

+ +
+
オープナーウィンドウ、親ウィンドウ、メインウィンドウ、最初のウィンドウ
+
これらの語は、同じウィンドウのことを記述、または、指し示すために使われています。これは、新しいウィンドウが生成される元ウィンドウのことです。つまり、これは、ユーザが別の新しいウィンドウを生成するためのリンクをクリックした際の元ウィンドウのことです。
+
サブウィンドウ、子ウィンドウ、副ウィンドウ、第2ウィンドウ
+
これらの語は、同じウィンドウのことを記述、または、指し示すために使われています。これは、生成された新しいウィンドウのことです。
+
リクエストのないポップアップウィンドウ
+
スクリプトで初期化されたウィンドウで、ユーザーの了承無しに、自動的に開くウィンドウのことです。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{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 にも同じようなエラー修正の仕組みがあります。（日本語版）

+ +

チュートリアル

+ + + +

リファレンス

+ + + +

その他

+ + -- cgit v1.2.3-54-g00ecf