From a820784fab5d9682cb43297e23891a120c5b9d82 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 17 May 2021 00:04:48 +0900 Subject: Web/API/Window/open を更新 (#736) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/04/29 時点の英語版に同期 - 原語併記マクロを削除 --- files/ja/web/api/window/open/index.html | 480 ++++++++++++++++---------------- 1 file changed, 241 insertions(+), 239 deletions(-) diff --git a/files/ja/web/api/window/open/index.html b/files/ja/web/api/window/open/index.html index b6487db738..f17cb589b3 100644 --- a/files/ja/web/api/window/open/index.html +++ b/files/ja/web/api/window/open/index.html @@ -16,11 +16,12 @@ translation_of: Web/API/Window/open

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

-

構文

+

構文

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

引数

+

引数

url
@@ -33,26 +34,26 @@ translation_of: Web/API/Window/open
{{domxref("DOMString")}} で、ウィンドウ特性とそれに対応する値を "name=value" の形式で指定したもののカンマで区切りのリストです。これらの機能には、ウィンドウの既定のサイズや位置、ツールバーを含めるかどうかなどのオプションが含まれます。文字列にはホワイトスペースを入れてはいけません。指定できる各機能については、下記の{{anch("Window features", "ウィンドウ特性")}}を参照してください。
-

返値

+

返値

-

WindowProxy オブジェクトで、基本的には新しく作成されたウィンドウを表す {{domxref("Window")}} オブジェクトの薄いラッパーであり、すべての機能が利用可能なものです。ウィンドウを開くことができなかった場合、返される値は代わりに null となります。返された参照は、同一オリジンポリシのセキュリティ要件に準拠している限り、新しいウィンドウのプロパティやメソッドにアクセスするために使用することができます。

+

WindowProxy オブジェクトで、基本的には新しく作成されたウィンドウを表す {{domxref("Window")}} オブジェクトの薄いラッパーであり、すべての機能が利用可能なものです。ウィンドウを開くことができなかった場合、返される値は代わりに null となります。返された参照は、同一オリジンポリシーのセキュリティ要件に準拠している限り、新しいウィンドウのプロパティやメソッドにアクセスするために使用することができます。

-

解説

+

解説

-

open() メソッドは、新しい副ブラウザウィンドウを生成します。それは、ファイルメニューから新しいウィンドウを選ぶのに似ています。引数 url は、新しいウィンドウにおいて読み取り読み込む URL を指定します。 url が空文字列の場合は、メインウィンドウの既定のツールバーを持った新しい空のウィンドウ (URL は about:blank) が生成されます。

+

open() メソッドは、ブラウザーの新しい副ウィンドウを生成します。それは、ファイルメニューから新しいウィンドウを選ぶのに似ています。引数 url は、新しいウィンドウにおいて読み取り読み込む URL を指定します。 url が空文字列の場合は、メインウィンドウの既定のツールバーを持った新しい空のウィンドウ (URL は about:blank) が生成されます。

リモートの URL は、すぐには読み込まれないことに注意してください。 window.open() から返ったとき、ウィンドウは常に about:blank を含んでいます。 URL が実際に読み込まれるまでには猶予期間があり、現在のスクリプトブロックが実行を終えた後に開始されます。ウィンドウの生成と参照されるリソースの読み込みは、非同期に行われます。

-

例

+

例

-
var windowObjectReference;
+
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;
+
var windowObjectReference;
 
 function openRequestedPopup() {
   windowObjectReference = window.open(
@@ -62,46 +63,46 @@ function openRequestedPopup() {
   );
 }

 
-
その名前を持っているウィンドウがすでに存在する場合は、 url は既存のウィンドウに読み込まれます。この場合、メソッドの返値は既存のウィンドウであり、 windowFeatures は無視されます。 url に空の文字列を指定すると、開いているウィンドウの場所を変更せずにその名前で参照を取得することができます。 Firefox と Chrome (少なくとも) では、これは同じ親からしか動作しません。つまり、現在のウィンドウは走査しようとしているウィンドウを開いた者になります。そうでない場合は、 window.open() を呼び出すと新しいウィンドウが作成されるだけです。

+
その名前を持っているウィンドウがすでに存在する場合は、 url は既存のウィンドウに読み込まれます。この場合、メソッドの返値は既存のウィンドウであり、 windowFeatures は無視されます。 url に空の文字列を指定すると、開いているウィンドウの場所を変更せずにその名前で参照を取得することができます。そうでない場合は、 window.open() を呼び出すと、ただ新しいウィンドウが作成されます。

 
-
新しいウィンドウを window.open() の呼び出すたびに開きたい場合は、特殊な値 _blank を windowName に使用してください。

+
新しいウィンドウを 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 時点で、最近発見された動作の違いは、他のブラウザーではまだテストされていません。

+
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 はオプションの文字列で、新しいウィンドウに指定する特性をカンマで分割したリストを指定します。ウィンドウが開かれた後、ウィンドウの特性を変えるために JavaScript を用いることはできません。 windowName が既存のウィンドウを指定せず、かつ、引数 windowFeatures を与えなかった場合 (もしくは、引数 windowFeatures が空文字列だった場合) は、新しい副ウィンドウにはメインウィンドウの既定のツールバーが表示されます。

 
 

-
豆知識: ブラウザーによっては、ユーザーが windowFeatures の設定を上書きして機能を有効にする (または無効にすることを防ぐ) ことができます。

+  
豆知識: ブラウザーによっては、ユーザーが windowFeatures の設定を上書きして機能を有効にする (または無効にすることを防ぐ) ことができます。

 

 
-
位置と大きさの特性

+
位置と大きさの特性

 
 
引数 windowFeatures で、新しいウィンドウの位置と大きさを指定することができます。

 
-
位置と大きさのエラーの修正における注意

+
位置と大きさのエラーの修正における注意

 
-
位置

+
位置

 
-

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

+

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

 

 
 

- 
left または screenX

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

- 
top または screenY

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

+  
left または screenX

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

+  
top または screenY

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

 

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

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

 
-
大きさ

+
大きさ

 
-

+

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

 

 
@@ -114,83 +115,88 @@ function openRequestedPopup() {
 
 
引数 windowFeatures 空でなく、位置の特性が定義されなかった場合は、新しいウィンドウの大きさは最も新しく表示されたウィンドウと同じ大きさになります。

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

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

 
-

-
使用しないでください。

+

+  
使用しないでください。

 

 
 

- 
outerWidth (only on Firefox)

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

- 
outerHeight (only on Firefox)

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

+  
outerWidth {{deprecated_inline}} (Firefox のみ、 Firefox 80 で廃止)

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

+  
outerHeight {{deprecated_inline}} (Firefox のみ、 Firefox 80 で廃止)

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

 

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

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

 
-

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

+

+
最近のブラウザー (Firefox 76 以降、 Google Chrome、Safari、Chromium Edge) では、以下の機能は単にポップアップを開くかどうかの条件です。ポップアップの条件の項を参照してください。

 

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

+
以下の機能は、各 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 の既定値はオフです。

- 

- スクロールバーの注意を参照してください。
- 

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

- 

- 

+  
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 の対応が導入されました。

+  
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">
+
<script type="text/javascript">
 var windowObjectReference = null; // グローバル変数
 
 function openFFPromotionPopup() {
@@ -225,17 +231,18 @@ function openFFPromotionPopup() {
 >Firefox 採用の宣伝</a></p>
 

 
-
上記のコードは、副ウィンドウを開くリンクに関する、わずかなユーザービリティの問題を解決します。コード内の return false の目的は、リンクのデフォルトアクションをキャンセルすることです。: onclick イベントハンドラが実行される場合、リンクのデフォルトアクションを実行する必要はありません。しかし、ユーザのブラウザで javascript サポートが無効、もしくは、存在しない場合、onclick イベントハンドラは無視され、ブラウザは、target の "PromoteFirefoxWindowName" という名前のフレーム、もしくは、ウィンドウ内の参照されたリソースを読みこみます。"PromoteFirefoxWindowName" という名前のフレームもウィンドウも存在しない場合は、ブラウザは新しいウィンドウを生成し、そのウィンドウに "PromoteFirefoxWindowName" という名前を付けます。

+
上記のコードは、副ウィンドウを開くリンクに関する、わずかなユーザービリティの問題を解決します。コード内の return false の目的は、リンクの既定のアクションをキャンセルすることです。 onclick イベントハンドラーが実行される場合、リンクの既定のアクションを実行する必要はありません。しかし、ユーザーのブラウザー
+で javascript サポートが無効、もしくは、存在しない場合、onclick イベントハンドラーは無視され、ブラウーーは、target の "PromoteFirefoxWindowName" という名前のフレーム、もしくは、ウィンドウ内の参照されたリソースを読みこみます。"PromoteFirefoxWindowName" という名前のフレームもウィンドウも存在しない場合は、ブラウザーは新しいウィンドウを生成し、そのウィンドウに "PromoteFirefoxWindowName" という名前を付けます。

 
 
target 属性の使い方の参考ページ:

 
-
HTML 4.01 Target attribute specifications（日本語訳）

+
HTML 4.01 Target attribute specifications（日本語訳）

 
-
How do I create a link that opens a new window?

+
How do I create a link that opens a new window?

 
-
また、この関数をパラメータ化して、より多くの状況に対応できるようにし、スクリプトやウェブページで再利用できるようにすることもできます。

+
また、この関数をパラメーター化して、より多くの状況に対応できるようにし、スクリプトやウェブページで再利用できるようにすることもできます。

 
-
<script type="text/javascript">
+
<script type="text/javascript">
 var windowObjectReference = null; // グローバル変数
 
 function openRequestedPopup(url, windowName) {
@@ -258,11 +265,11 @@ function openRequestedPopup(url, windowName) {
 >Firefox 採用の宣伝</a></p>
 

 
-
この関数を、 副ウィンドウを 1 つだけ開くようにし、その単一の副ウィンドウをこの関数で開く他のリンクで再利用するようにすることもできます。:

+
この関数を、 副ウィンドウを 1 枚だけ開くようにし、その単一の既定のウィンドウをこの関数で開く他のリンクで再利用するようにすることもできます。

 
-
<script type="text/javascript">
+
<script type="text/javascript">
 var windowObjectReference = null; // グローバル変数
-var PreviousUrl; /* 副ウィンドウ内の現在の URL を
+var PreviousUrl; /* 既定のウィンドウ内の現在の URL を
                     保存しているであろうグローバル変数 */
 
 function openRequestedSinglePopup(url) {
@@ -296,7 +303,7 @@ function openRequestedSinglePopup(url) {
 >Firefox 採用の宣伝</a></p>
 
 <p><a
- href="http://www.mozilla.org/support/firefox/faq"
+ href="https://www.mozilla.org/support/firefox/faq"
  target="SingleSecondaryWindowName"
  onclick="openRequestedSinglePopup(this.href); return false;"
 title="このリンクは、新しいウィンドウを生成するか、すでに開かれているウィンドウを再利用します。"
@@ -306,185 +313,179 @@ title="このリンクは、新しいウィンドウを生成するか、すで
 
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（日本語版）

+  
どのようにすれば、ユーザーにウィンドウを閉じるかどうか確認するメッセージを出さないようにすることができますか？

+  
できません。 JavaScript によって開かれていない新しいウィンドウは、 JavaScript によって閉じることは原則としてできません。 Mozilla ベースブラウザーの JavaScript コンソールには、 "Scripts may not close windows that were not opened by script." という警告メッセージが報告されるでしょう。そうしなければ、ブラウザーセッション中の訪問した URL の履歴が失われてしまいます。

+  
詳細は、{{domxref("window.close()")}} メソッドを参照してください

+  
どのようにすれば、ウィンドウを最小化状態または他のウィンドウの背後にある状態から復帰することができますか？

+  
まず、対象ウィンドウのウィンドウオブジェクトへの参照が存在するかどうかを調べてください。それが存在し、かつ、閉じてしまっていない場合は、focus() メソッドを使用してください。他に確実な方法はありません。 focus() メソッドの使用方法を説明している例でテストすることができます。

+  
ウィンドウを強制的に最大化するにはどうすればいいのですか？

+  
できません。どのブラウザーメーカーも、ユーザーが混乱しないように、新しい副ウィンドウが開いたことをユーザーが知り、気づけるように努力しています。

+  
どのようにすれば、ウィンドウのリサイズを無効にしたり、ツールバーを非表示にできますか？

+  
これを強制することはできません。Mozilla ベースのブラウザーを使用しているユーザーは、サイズ変更、スクロール、ツールバーの有無などのウィンドウの機能を about:config のユーザー設定で絶対的に制御することができます。このようなウィンドウを使用するのはユーザーですので (ウェブ制作者であるあなたではありません)、ユーザーの習慣や好みに干渉しないようにするのが一番です。コンテンツへのアクセシビリティとウィンドウの使いやすさを確保するために、リサイズ機能とスクロールバーの有無 (必要に応じて) を常に yes に設定することをお勧めします。これは、ウェブ制作者とユーザーの双方にとって最善の方法です。

+  
どのようにすれば、ウィンドウをコンテンツに合うようにリサイズできますか。

+  
確実にはできません。 about:config で dom.disable_window_move_resize を true に設定するか、ユーザーの user.js file ファイルを編集することで、ユーザーがウィンドウのサイズを変更できないようにすることができるためです。

+  
一般に、ユーザーはたいてい、ウィンドウの移動またはリサイズを無効にしています。その理由は、過去に開発者のそのようなスクリプトを許可することで、大変な弊害を受けており、この特性を濫用しない、めったにないスクリプトでも、ウィンドウをリサイズするときに、間違ったリサイズをしばしば行うからです。これらのスクリプトの 99% は、ウィンドウのリサイズを不可能にしたり、スクロールバーを非表示にしたりします。そのような場合、本来は、それらのスクリプトの計算が間違っている場合のための、用心深く、分別のある代替の仕組みとして、それらの特性の両方が有効であるべきです。

+  
window オブジェクトのメソッドである、sizeToContent() も無効にすることができます。スクリプトを使ってユーザーの画面上で遠隔的にウィンドウを移動したりサイズを変更したりすることは、多くの場合、ユーザーを悩ませ、ユーザーを混乱させ、そしてせいぜい間違ったことをするだけです。ウェブ制作者は、ユーザーのブラウザーウィンドウのあらゆる位置やサイズを完全に制御できる (決定できる) と期待していますが、それは真実ではありません。

+  
開いたウィンドウがまだ開かれているかどうかを知るにはどうすればいいですか。

+  
ウィンドウオブジェクトへの参照が存在するかどうかで検査することができます。それは、window.open() メソッドの呼び出しが成功した場合の返値です。また、windowObjectReference.closed プロパティの返値が false であるかどうかを調べることでもできます。

+  
どのようにすれば、ウィンドウがポップアップブロッカーによってブロックされていることを知ることができますか？

+  
組み込みポップアップブロッカーでは、 window.open() の返値を調べる必要があります。ウィンドウが開くことが許可されなかった場合の返値は、 null です。しかし、他の多くのポップアップブロッカーに対しては、そのような方法はありません。

+  
主ウィンドウと副ウィンドウの JavaScript での関係は？

+  
window.open() メソッドは、主ウィンドウに副ウィンドウへの参照を渡します。 opener プロパティは、副ウィンドウに主ウィンドウへの参照を渡します。

+  
新しい副ウィンドウのプロパティにアクセスできません。 JavaScript コンソールに、"Error: uncaught exception: Permission denied to get property <プロパティ名またはメソッド名>" と表示されます。どうしてですか。

+  
それは、クロスドメインスクリプトセキュリティの制限 (または「同一オリジンポリシー」) のためです。異なるオリジン (ドメイン名) からウィンドウ (またはフレーム) に読み込まれたスクリプトは、他のウィンドウ (またはフレーム) や他の離れたオリジン (ドメイン名) からきたあらゆる HTML オブジェクトのプロパティを取得または設定することができません。そのため、主ウィンドウのブラウザーは、副ウィンドウを対象としたスクリプトを実行する前に、副ウィンドウが同じドメイン名を持っているかを調べます。

+  
クロスドメインスクリプトセキュリティ制限については、 http://www.mozilla.org/projects/secu...me-origin.html (日本語訳) で詳細を参照してください。

 

 
-
ユーザビリティの問題

+
ユーザビリティの問題

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

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

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

+
一般的に言えば、いくつかの理由で、window.open() への依存を回避することをお勧めします。

 
 
    
- 
  • ほとんどの最新のデスクトップブラウザーはタブブラウジングを提供しており、タブに対応したブラウザーのユーザーは、大多数のウェブページの状況では新しいウィンドウを開くよりも新しいタブを開く方が好まれています。
    • 
- 
  • 最近のブラウザーの多くは、ポップアップブロック機能を提供しています。
    • 
- 
  • ユーザーは、新しいウィンドウでリンクを開くかどうか、同じウィンドウで、新しいタブで開くかどうか、「バックグラウンド」で開くかどうかを含むブラウザー内蔵の機能や拡張機能を使用している可能性があります。新しいウィンドウを開くために無造作にコーディングすることは、もはや成功を保証することはできません、強制的に成功することはできませんし、それが実行された場合、それは大多数のユーザーを悩ませることになります。
    • 
- 
  • 新しいウィンドウでは、メニューバーが非表示になったり、スクロールバーが非表示になったり、ステータスバーが非表示になったり、ウィンドウのリサイズができなくなるようになる可能性などがあります。したがって、タブブラウジングは多くのユーザーに好まれます。なぜなら、ユーザー好むブラウザーウィンドウの通常のユーザーインターフェースがそのまま維持され、安定しているからです。
    • 
- 
  • 新しいウィンドウを開くことは、たとえ機能を削減したとしても、ユーザーのシステムリソース (CPU、RAM) をかなり多く使用し、ソースコードのコーディング (セキュリティ管理、メモリ管理、様々なコード分岐、ウィンドウフレーム/クローム/ツールバーの構築、ウィンドウの位置とサイズ設定など) にもかなりの量を必要とします。新しいタブを開くことは、新しいウィンドウを開くことに比べて、ユーザーのシステムリソースへの要求が少なくて済みます (そして、より速く実現できます)。
    • 
+ 
  • 最近のデスクトップブラウザーは、ほとんどがタブ機能を備えており、タブ機能を備えたブラウザーのユーザーは、ウェブページの大半の場面で、新しいウィンドウを開くよりも新しいタブを開くことを好むと言われています。
    • 
+ 
  • 最近のブラウザーの多くが、ポップアップブロック機能を提供しています。
    • 
+ 
  • ユーザーはブラウザーに内蔵されている機能や拡張機能を使って、リンクを新しいウィンドウで開くか、同じウィンドウで開くか、新しいタブで開くか、「バックグラウンド」で開くかどうかなどを設定することができます。不用意に新しいウィンドウを開くようにコーディングしても、もはや成功は保証されませんし、強制的に成功させることもできませんし、もし成功したとしても、大多数のユーザーに迷惑をかけることになるでしょう。
    • 
+ 
  • 新しいウィンドウには、メニューバーがなかったり、スクロールバーがなかったり、ステータスバーがなかったり、ウィンドウのサイズ変更ができなかったりすることがあります。新しいタブにはこうした機能やツールバー (少なくとも、既定で存在するツールバー) がないことはありえません。したがって、タブブラウジングが多くのユーザーに好まれているのは、彼らが好むブラウザーウィンドウの通常のユーザーインターフェイスががそのまま維持され、安定しているからです。
    • 
+ 
  • 新しいウィンドウを開くには、機能を減らしたとしても、ユーザーのシステムリソース (CPU や RAM) を大量に使用し、ソースコードのコーディングもかなりの量になります (セキュリティ管理、メモリ管理、様々なコードの分岐 (非常に複雑な場合もある)、ウィンドウフレーム/クローム/ツールバーの構築、ウィンドウの位置やサイズの調整など)。新しいタブを開くことは、新しいウィンドウを開くことに比べて、ユーザーのシステムリソースへの負担が少ない (そして、より速く実現できる) のです。
    • 
 

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

+
リンクを新しいウィンドウで開く機能を提供したい場合は、テスト済みで推奨されるユーザービリティとアクセシビリティのガイドラインに従ってください。

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

+
"javascript:" 形式のリンクは、どのブラウザーでもウェブページのアクセシビリティとユーザービリティを損ないます。

 
 
    
- 
  • "javascript:" 擬似リンクは、JavaScript サポートが無効化、もしくは、存在しない場合、障害的な機能となります。企業によっては、従業員にウェブの閲覧を許可していても、それが厳格なセキュリティポリシーで管理されている場合があります。例えば、JavaScript 有効の禁止、Java の禁止、Active X の禁止、Flash の禁止などです。様々な理由で（セキュリティ、共用アクセス、テキストブラウザ、など…）、ユーザの 5%～10% が、JavaScript を無効化にしてウェブを閲覧しています。
    • 
- 
  • "javascript:" 形式のリンクは、タブ機能があるブラウザの高度な機能を妨害する可能性があります。例えば、リンクのミドルクリック、リンクの Ctrl + クリック、拡張におけるタブブラウジングの機能などです。
    • 
- 
  • "javascript:" 形式のリンクは、検索エンジンによるウェブページのインデックス処理を妨害する可能性があります。
    • 
- 
  • "javascript:" 形式のリンクは、ボイスブラウザーなどの{{ 原語併記("支援技術", "assistive technologies") }} と PDA や モバイルブラウザーなどのいくつかの Web-Aware アプリケーションを妨害します。
    • 
- 
  • "javascript:" 形式のリンクは、ブラウザーに実装された "マウスジェスチャ" 機能も妨害します。
    • 
- 
  • プロトコルスキーマとしての "javascript:" は、link Validator 及び リンクチェッカーでは、エラーとして報告されます。
    • 
+ 
  • "javascript:" 擬似リンクは、 JavaScript の対応が無効化または存在しない場合、機能しなくなります。いくつかの企業では、従業員がウェブを閲覧することを許可していますが、 javascript を有効にしない、 java を使用しない、 activeX を使用しない、 Flash を使用しないなど、厳しいセキュリティポリシーのもとで使用しています。さまざまな理由 (セキュリティ、公共の場でのアクセス、テキストブラウザーなど) から、ウェブ上のユーザーの約 5% から 10% が javascript を無効にしてウェブを閲覧しています。
    • 
+ 
  • "javascript:" リンクは、リンクの中央ボタンクリック、 Ctrl + クリック、拡張機能におけるタブブラウジングの機能など、タブ機能があるブラウザーの高度な機能を妨害する可能性があります。
    • 
+ 
  • "javascript:" リンクは、検索エンジンによるウェブページのインデックス処理を妨害する可能性があります。
    • 
+ 
  • "javascript:" リンクは、支援技術 (音声ブラウーーなど) や一部のウェブを利用するアプリケーション (PDA やモバイルブラウザーなど) を妨害します。
    • 
+ 
  • "javascript:" リンクは、ブラウザーに実装された「マウスジェスチャー」機能も妨害します。
    • 
+ 
  • プロトコルスキームとしての "javascript:" は、リンクバリデーターやリンクチェッカーでは、エラーとして報告されます。
    • 
 

 
-
参考 URL:

+
参考記事:

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

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

 
-
そのような擬似リンクもリンクのアクセシビリティを損ねます。常に href 属性値を持つ本来の URL を使ってください。 そうすれば、JavaScript サポートが無効にされていたり、存在しない場合や、 MS-Web TV や、テキストブラウザなどのようなユーザエージェントが副ウィンドウを開くことをサポートしていない場合でも、そのようなユーザエージェントが、それらがサポートするデフォルトの方法に従って参照されるリソースを読みこむことができます。また、この形式のコードは、タブ機能を持つブラウザの高度な機能を妨害します。例えば、リンクのミドルクリック、リンクの Ctrl + クリック、リンクの Ctrl + Enter、"マウスジェスチャ" 機能です。

+
このような疑似リンクも、リンクのアクセシビリティを損ないます。 href 属性の値には必ず本物の URL を使用してください。そうすれば、 javascript のサポートが無効または存在しない場合や、ユーザーエージェントが副ウィンドウを開くことに対応していない場合 (MS-Web TVやテキストブラウザーなど) でも、そのユーザーエージェントが参照されたリソースを開く/処理する既定のモードに従って、参照されたリソースをロードすることができます。この形のコードは、リンクの中央クリック、リンクの Ctrl + クリック、リンクの Ctrl + Enter、「マウスジェスチャー」など、タブ機能付きブラウザーの高度な機能にも干渉します。

 
-
+
 
-
リンクの title 属性を記述したり、リンクの最後にアイコンを追加したり、反応するカーソルを記述することによってユーザに情報を与え、新しいウィンドウを開くことになるリンクを識別できるようにしてください。

+
リンクに title 属性を記述したり、リンクの最後にアイコンを追加したり、反応するカーソルを記述することによってユーザーに情報を与え、新しいウィンドウを開くことになるリンクを識別できるようにしてください。

 
-
ユーザに警告をする目的は、コンテキストが変化するときに、ユーザの混乱を最小限にするためです。現在のウィンドウが変化したり、新しいウィンドウがポップアップすることは、ユーザを混乱させます（ツールバーボタンの戻るは使えません）。

+
ユーザーに警告をする目的は、コンテキストが変化するときに、ユーザーの混乱を最小限にするためです。現在のウィンドウが変化したり、新しいウィンドウがポップアップしたりすると、ユーザーが混乱します (ツールバーの戻るボタンが使えません)。

 
 

-
"ユーザが新しいウィンドウが開いたことに気づかないことはけっこうあります。特に、小さなモニターを使用していて、ウィンドウが最大化されている場合です。元のページに戻ろうとするユーザは、Back ボタンがグレーアウトしているので、混乱してしまいます。"

- 引用元：The Top TenNew Mistakes of Web Design: 2. Opening New Browser Windows, Jakob Nielsen, May 1999（日本語版）

+
"ユーザーが新しいウィンドウが開いたことに気づかないことはけっこうあります。特に、小さなモニターを使用していて、ウィンドウが最大化されている場合です。元のページに戻ろうとするユーザーは、戻るボタンがグレーアウトしているので、混乱してしまいます。"

+ 引用元：The Top TenNew Mistakes of Web Design: 2. Opening New Browser Windows, Jakob Nielsen, May 1999 (日本語版)/p>
 

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

+
コンテキストの極端な変化が発生する前に明示されていれば、ユーザーは先に進みたいかどうかを判断することができ、変化に備えることができます。ユーザーが混乱したり、混乱を感じたりすることがないだけでなく、経験豊富なユーザーは、そのようなリンクをどのように開くか (新しいウィンドウで開くか、同じウィンドウで開くか、新しいタブで開くか、「バックグラウンド」で開くか) をより適切に判断することができます。

 
 
リファレンス

 
 
 
 
- 
-  
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-  
- 
+  
+    
+      
+    
+    
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+    
+    
+    
+    
+    
+  
"新しいウィンドウ" を示すアイコンとカーソルの例
yahoo.com の新しいウィンドウアイコンmicrosoft.com の新しいウィンドウアイコンwebaim.org の新しいウィンドウアイコンsun.com の新しいウィンドウアイコン
bbc.co.uk の新しいウィンドウアイコンAccessible Internet Solutions の新しいウィンドウアイコンaccessify.com の新しいウィンドウアイコンwebstyleguide.com の新しいウィンドウアイコン
ソース不明の新しいウィンドウアイコンソース不明の新しいウィンドウアイコンソース不明の新しいウィンドウアイコンgtalbot.org の新しいウィンドウアイコン
draig.de の新しいウィンドウカーソルmithgol.ru の新しいウィンドウカーソル
「新しいウィンドウ」を示すアイコンとカーソルの例
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 属性を使う

+
常に target 属性を使う

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

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

 
-
target="_blank" を使わない

+
target="_blank" を使わない

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

+
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 引数の効果を定義します
仕様書状態備考
{{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 パーツの表示・非表示を個別に制御することはできません。

 
 
    
- 
  • Firefox 76 (2020年5月5日リリース) 以降
    • 
+ 
  • Firefox 76 以降
    • 
  
  • Google Chrome
    • 
  
  • Safari
    • 
  
  • Chromium Edge
    • 
@@ -494,47 +495,48 @@ title="このリンクは、新しいウィンドウを生成するか、すで
 
 
    この条件は実装上のものであり、安定性を保証するものではありません。
    
 
-
    スクロールバーに関する注意
    
+
    スクロールバーに関する注意
    
 
-
    コンテンツがビューポートの範囲からはみ出すときは、ユーザがコンテンツにアクセスできることを保証するために、スクロールバー（あるいは、スクロールする仕組み）が必要です。ウェブ制作者のコントロール外となるいくつかの理由でコンテンツがウィンドウの範囲をはみ出すことがあります。:
    
+
    コンテンツがビューポートの範囲からはみ出すときは、スクロールバー (またはスクロールする仕組み) によってコンテンツにユーザーがアクセスできることを保証する必要があります。ウェブ開発者が制御できないいくつかの理由で、コンテンツがウィンドウの範囲をはみ出すことがあります。
    
 
 
      
- 
    • ユーザはウィンドウをリサイズします。
      • 
- 
    • ユーザはテキストのフォントサイズを、Mozilla では、メニューアイテムの 表示/文字の大きさ (%) で、Firefox では、表示/文字サイズ/大きく or 小さく を使って大きくします。
      • 
- 
    • ユーザはページの最小フォントサイズをウェブ制作者が指定したフォントサイズよりも大きく設定します。40 歳以上、もしくは、特殊な閲覧習慣、閲覧設定を持つ人々は、よく、Mozilla ベースのブラウザで最小フォントサイズを設定しています。
      • 
- 
    • ウェブ制作者は、様々なブラウザ及び様々なブラウザのバージョンの、ルート要素、または、body ノードに適用されるデフォルトの margin（かつ/または border かつ/または padding）の値に注意していません。
      • 
- 
    • ユーザは、文書のボックスサイズ（margin、padding、デフォルトフォントサイズ）を大きくする閲覧習慣のためにユーザスタイルシート(userContent.css in Mozilla-based browsers, 日本語版)を用いています。
      • 
- 
    • ユーザは、オペレーティングシステムの設定で多くのツールバーのサイズ（高さ、幅）を独自にカスタマイズしています。例えば、Windows XP オペレーティングシステムでは、ユーザがウィンドウリサイズの限界、ブラウザのタイトルバー、メニューバー、スクロールバーの高さ、フォントサイズを完全にカスタマイズできます。これらのツールバーの寸法は、ブラウザテーマとスキン、あるいは、オペレーティングシステムのテーマによっても設定されることがあります。
      • 
- 
    • ウェブ制作者は、ユーザのデフォルトのブラウザウィンドウに、指定された目的のためのカスタムツールバーがあることに気付きません。例えば、設定バー、ウェブ開発者パー、アクセシビリティツールバー、ポップアップブロックと検索ツールバー、多機能ツールバーなどです。
      • 
- 
    • ユーザは、アプリケーションのためのオペレーティングシステムの作業領域を変更する支援技術、あるいは、アドオン機能を用います。例えば、{{ 原語併記("拡大鏡", "MS-Magnifier") }}です。
      • 
- 
    • ユーザは、直接、または、間接的に、アプリケーションのためのオペレーティングシステムの作業領域を再配置 かつ/または リサイズします。例えば、ユーザは、Windows のタスクバーをリサイズしたり、Windows のタスクバーを左側（アラビア語ベース）や右側（ヘブライ語）に配置したり、固定の MS-Office クイック起動ツールバーを置いたりします。
      • 
- 
    • いくつかのオペレーティングシステム（Mac OS X）はウェブ制作者のブラウザウィンドウの有効範囲の予測、計算がはずれたツールバーを強制的に表示させます。
      • 
+  
    • ユーザーによるウィンドウのサイズ変更
      • 
+  
    • Mozilla の場合は表示/テキストの拡大率(%)、 Firefox の場合は表示/テキストのサイズ/拡大または縮小を使用した、ユーザーによるフォントの文字サイズの拡大
      • 
+  
    • ユーザーがウェブ制作者が要求したフォントサイズよりも大きい最小フォントサイズをページに設定している場合。 40 歳以上の方や、特定の閲覧習慣や読書傾向のある方は、Mozilla ベースのブラウザーで最小のフォントサイズをよく設定しています。
      • 
+  
    • ウェブ制作者が、様々なブラウザーおよび様々なブラウザーのバージョンの、ルート要素または body ノードに適用される既定の margin (や境界やパディング) の値に気づいていない場合
+  
      • 
+  
    • ユーザーがユーザースタイルシート (Mozilla ベースのブラウザーでは userContent.css) を使用して、文書のボックスの大きさ (margin、padding、既定のフォントサイズ）を拡大する閲覧習慣に対応しています。
      • 
+  
    • オペレーティングシステムの設定により、ほとんどのツールバーのサイズ (高さまたは幅) を個別にカスタマイズできます。例えば Windows XP では、ウィンドウのサイズ変更、ブラウザのタイトルバー、メニューバー、スクロールバーの高さ、フォントサイズなどをユーザーが自由にカスタマイズできます。これらのツールバーの大きさは、ブラウザのテーマやスキン、オペレーティングシステムのテーマでも設定できます。
      • 
+  
    • ウェブ制作者は、ユーザーの既定のブラウザーウィンドウが、特定の目的のためにカスタムツールバーを持っていることに無関心です (例えば、環境設定バー、ウェブ開発者バー、アクセシビリティツールバー、ポップアップブロックおよび検索ツールバー、多機能ツールバーなど)。
      • 
+  
    • アプリケーションのために OS の作業領域を変更する支援技術やアドオン機能を使用している場合。例えば MS-Magnifier (拡大鏡) など。
      • 
+  
    • ユーザーは、オペレーティングシステムのアプリケーションの作業領域を直接または間接的に再配置やリサイズすることがあります。例えば、ユーザーが Windows のタスクバーのサイズを変更したり、 Windows のタスクバーを左端 (アラビア語ベース) または右端 (ヘブライ語ベース) に配置したり、 MS-Office のクイック起動ツールバーを固定したりします。
      • 
+  
    • 一部のオペレーティングシステム (Mac OS X) は、強制的にツールバーを表示させるため、ウェブ制作者の予想を裏切りってブラウザーウィンドウの有効寸法を計算してしまうことがあります。
      • 
 
    
 
-
    位置と大きさのエラー修正に関する注意
    
+
    位置と大きさのエラー修正に関する注意
    
 
-
    features のリストで指定された位置と寸法の値でブラウザウィンドウ全体がユーザのオペレーティングシステムにおけるアプリケーションのための作業領域内に表示し切れない場合、それらの値は、優先されず、修正されません。新しいウィンドウのどの部分も最初からスクリーン外に配置されることはありません。これは、Mozilla ベースのブラウザのリリース版の全てでデフォルトです。
    
+
    特性リストで要求された位置と寸法の値が守られず、そのような要求された値のいずれかが、ユーザーのオペレーティングシステムのアプリケーションのための作業領域内にブラウザーウィンドウ全体をレンダリングすることができない場合は修正されます。新しいウィンドウの一部が画面外に初期配置されることはありません。これは、Mozilla ベースのブラウザーではすべてのリリースで既定となっています。
    
 
-
    MSIE 6 SP2 にも同じようなエラー修正の仕組みがあります。（日本語版）
    
+
    MSIE 6 SP2にも同様のエラー修正機構がありますが、既定ではすべてのセキュリティレベルで有効になっているわけではありません。セキュリティ設定により、このエラー修正機構を無効にすることができます。
    
 
-
    チュートリアル
    
+
    チュートリアル
    
 
 
 
-
    リファレンス
    
+
    リファレンス
    
 
 
 
-
    その他
    
+
    その他
    
 
 
-- 
cgit v1.2.3-54-g00ecf