Window.open()

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

構文

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

引数

url

DOMString で、読み込むリソースの URL を示します。これは HTML ページ、画像ファイル、その他のブラウザーが対応しているリソースのパスまたは URL にすることができます。空文字列 ("") が url として指定されると、対象の閲覧コンテキストに空のページが開きます。

windowName Optional

DOMString で、指定したリソースを読み込むための閲覧コンテキスト (ウィンドウ、 <iframe>、タブ) の名前を指定します。名前が既存のコンテキストを示していない場合は、新しいウィンドウが作成され、 windowName で指定した名前が与えられます。

この名前は <a> や <form> 要素の target 属性のターゲットとして使うことができます。この名前はホワイトスペースを含んではいけません。これはウィンドウのタイトルとしては使用されないことに注意してください。

windowFeatures Optional

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

返値

WindowProxy オブジェクトで、基本的には新しく作成されたウィンドウを表す 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 に使用してください。

ウィンドウ特性

windowFeatures はオプションの文字列で、新しいウィンドウに指定する特性をコンマで分割したリストを指定します。ウィンドウが開かれた後、ウィンドウの機能やウィンドウのツールバーを変えるために JavaScript を用いることはできません。 windowName が既存のウィンドウを指定せず、かつ、引数 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 部品の特性

以下の機能は、各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

この機能が設定されている場合、新しく開いたウィンドウは通常通りに開きますが、元のウィンドウには (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 の履歴が失われるでしょう。

詳細は、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() への依存を回避することを選択するべきです。:

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

リンクを新しいウィンドウに開く場合、以下のガイドラインを使用してください

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

決してリンクに次の形式のコードを使わない: <a href="javascript:window.open(...)" ...>

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

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

参考 URL:

• Top Ten Web-Design Mistakes of 2002, 6. JavaScript in Links, Jakob Nielsen, December 2002（日本語版）
• Links & JavaScript Living Together in Harmony, Jeff Howden, February 2002
• comp.lang.javascript newsgroup discussion FAQ on "javascript:" links

決して <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（日本語版）

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

リファレンス

• "リンクが新しいウィンドウを開いたり、別のウィンドウをディスプレイにポップアップさせたり、システムのフォーカスを新しいフレームやウィンドウに移動させる場合、行うべき良策は、ユーザにそのようなことが起きるということを伝えることです。" World Wide Web Consortium Accessibility Initiative regarding popups
• "リンクをクリックする前に、そのリンクでどこへ行くかの情報をユーザに提供するためにリンクタイトルを使用してください。" Ten Good Deeds in Web Design, Jakob Nielsen, October 1999（日本語版）
• Using Link Titles to Help Users Predict Where They Are Going, Jakob Nielsen, January 1998（日本語版）

"新しいウィンドウ" を示すアイコンとカーソルの例

常に target 属性を使う

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

target="_blank" を使わない

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

用語集

オープナーウィンドウ、親ウィンドウ、メインウィンドウ、最初のウィンドウ

これらの語は、同じウィンドウのことを記述、または、指し示すために使われています。これは、新しいウィンドウが生成される元ウィンドウのことです。つまり、これは、ユーザが別の新しいウィンドウを生成するためのリンクをクリックした際の元ウィンドウのことです。

サブウィンドウ、子ウィンドウ、副ウィンドウ、第2ウィンドウ

これらの語は、同じウィンドウのことを記述、または、指し示すために使われています。これは、生成された新しいウィンドウのことです。

リクエストのないポップアップウィンドウ

スクリプトで初期化されたウィンドウで、ユーザーの了承無しに、自動的に開くウィンドウのことです。

仕様書

ブラウザーの互換性

注意事項

ポップアップの条件

ほとんどの最新ブラウザー (以下に記載) では、ウェブコンテンツが UI パーツの表示・非表示を個別に制御することはできません。

• Firefox 76 (2020年5月5日リリース) 以降
• Google Chrome
• Safari
• Chromium Edge

ポップアップを開くか新規タブを開くか、新規ウィンドウを開くかの条件として windowFeatures の UI 関連項目を使用し、それぞれの UI パーツの表示状態を固定しています。

この条件は実装上のものであり、安定性を保証するものではありません。

スクロールバーに関する注意

コンテンツがビューポートの範囲からはみ出すときは、ユーザがコンテンツにアクセスできることを保証するために、スクロールバー（あるいは、スクロールする仕組み）が必要です。ウェブ制作者のコントロール外となるいくつかの理由でコンテンツがウィンドウの範囲をはみ出すことがあります。:

• ユーザはウィンドウをリサイズします。
• ユーザはテキストのフォントサイズを、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）はウェブ制作者のブラウザウィンドウの有効範囲の予測、計算がはずれたツールバーを強制的に表示させます。

位置と大きさのエラー修正に関する注意

features のリストで指定された位置と寸法の値でブラウザウィンドウ全体がユーザのオペレーティングシステムにおけるアプリケーションのための作業領域内に表示し切れない場合、それらの値は、優先されず、修正されません。新しいウィンドウのどの部分も最初からスクリーン外に配置されることはありません。これは、Mozilla ベースのブラウザのリリース版の全てでデフォルトです。

MSIE 6 SP2 にも同じようなエラー修正の仕組みがあります。（日本語版）

チュートリアル

• JavaScript windows (tutorial) by Lasse Reichstein Nielsen
• The perfect pop-up (tutorial) by Ian Lloyd
• Popup windows and Firefox (interactive demos) by Gérard Talbot

リファレンス

• Links Want To Be Links by Jukka K. Korpela
• Links & JavaScript Living Together in Harmony by Jeff Howden

その他

• 古い機能
• 特権が必要な機能