Window.open()

url

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

windowName 省略可

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

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

windowFeatures 省略可

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 に空の文字列を指定すると、開いているウィンドウの場所を変更せずにその名前で参照を取得することができます。そうでない場合は、 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 Deprecated (Firefox のみ、 Firefox 80 で廃止)

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

outerHeight Deprecated (Firefox のみ、 Firefox 80 で廃止)

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

以下の機能は、各 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="https://www.mozilla.org/support/firefox/faq"
 target="SingleSecondaryWindowName"
 onclick="openRequestedSinglePopup(this.href); return false;"
title="このリンクは、新しいウィンドウを生成するか、すでに開かれているウィンドウを再利用します。"
>Firefox FAQ</a></p>

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

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

詳細は、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() への依存を回避することをお勧めします。

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

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

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

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

• "javascript:" 擬似リンクは、 JavaScript の対応が無効化または存在しない場合、機能しなくなります。いくつかの企業では、従業員がウェブを閲覧することを許可していますが、 javascript を有効にしない、 java を使用しない、 activeX を使用しない、 Flash を使用しないなど、厳しいセキュリティポリシーのもとで使用しています。さまざまな理由 (セキュリティ、公共の場でのアクセス、テキストブラウザーなど) から、ウェブ上のユーザーの約 5% から 10% が javascript を無効にしてウェブを閲覧しています。
• "javascript:" リンクは、リンクの中央ボタンクリック、 Ctrl + クリック、拡張機能におけるタブブラウジングの機能など、タブ機能があるブラウザーの高度な機能を妨害する可能性があります。
• "javascript:" リンクは、検索エンジンによるウェブページのインデックス処理を妨害する可能性があります。
• "javascript:" リンクは、支援技術 (音声ブラウーーなど) や一部のウェブを利用するアプリケーション (PDA やモバイルブラウザーなど) を妨害します。
• "javascript:" リンクは、ブラウザーに実装された「マウスジェスチャー」機能も妨害します。
• プロトコルスキームとしての "javascript:" は、リンクバリデーターやリンクチェッカーでは、エラーとして報告されます。

参考記事:

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

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

"ユーザーが新しいウィンドウが開いたことに気づかないことはけっこうあります。特に、小さなモニターを使用していて、ウィンドウが最大化されている場合です。元のページに戻ろうとするユーザーは、戻るボタンがグレーアウトしているので、混乱してしまいます。"
引用元：The Top TenNew Mistakes of Web Design: 2. Opening New Browser Windows, Jakob Nielsen, May 1999 (日本語版)/p>

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

リファレンス

• "リンクが新しいウィンドウを開いたり、別のウィンドウをディスプレイにポップアップさせたり、システムのフォーカスを新しいフレームやウィンドウに移動させる場合、行うべき良策は、ユーザーにそのようなことが起きるということを伝えることです。" 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 属性値として "_blank" を使用すると、ユーザーのデスクトップ上にいくつもの新しい無名のウィンドウが作成され、再利用されることはありません。いずれにしても、コードがよくできていれば、ユーザーの最終的な選択を妨げることはなく、むしろ、ユーザーに選択肢を増やし、リンクを開く方法を増やし、ユーザーが使っているツール (ブラウザー) をより強力にするものになるはずです。

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

同じウィンドウを説明したり、識別するためによく使われる用語です。新しいウィンドウが作成される元となるウィンドウです。別の新しいウィンドウの作成につながるリンクをユーザーがクリックしたウィンドウです。

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

同じウィンドウを説明したり、識別するためによく使われる用語。生成された新しいウィンドウのことです。

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

スクリプトが起動し、ユーザーの同意なしに自動的に開くウィンドウのことです。

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

• Firefox 76 以降
• Google Chrome
• Safari
• Chromium Edge

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

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

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

• ユーザーによるウィンドウのサイズ変更
• Mozilla の場合は表示/テキストの拡大率(%)、 Firefox の場合は表示/テキストのサイズ/拡大または縮小を使用した、ユーザーによるフォントの文字サイズの拡大
• ユーザーがウェブ制作者が要求したフォントサイズよりも大きい最小フォントサイズをページに設定している場合。 40 歳以上の方や、特定の閲覧習慣や読書傾向のある方は、Mozilla ベースのブラウザーで最小のフォントサイズをよく設定しています。
• ウェブ制作者が、様々なブラウザーおよび様々なブラウザーのバージョンの、ルート要素または body ノードに適用される既定の margin (や境界やパディング) の値に気づいていない場合
• ユーザーがユーザースタイルシート (Mozilla ベースのブラウザーでは userContent.css) を使用して、文書のボックスの大きさ (margin、padding、既定のフォントサイズ）を拡大する閲覧習慣に対応しています。
• オペレーティングシステムの設定により、ほとんどのツールバーのサイズ (高さまたは幅) を個別にカスタマイズできます。例えば Windows XP では、ウィンドウのサイズ変更、ブラウザのタイトルバー、メニューバー、スクロールバーの高さ、フォントサイズなどをユーザーが自由にカスタマイズできます。これらのツールバーの大きさは、ブラウザのテーマやスキン、オペレーティングシステムのテーマでも設定できます。
• ウェブ制作者は、ユーザーの既定のブラウザーウィンドウが、特定の目的のためにカスタムツールバーを持っていることに無関心です (例えば、環境設定バー、ウェブ開発者バー、アクセシビリティツールバー、ポップアップブロックおよび検索ツールバー、多機能ツールバーなど)。
• アプリケーションのために OS の作業領域を変更する支援技術やアドオン機能を使用している場合。例えば MS-Magnifier (拡大鏡) など。
• ユーザーは、オペレーティングシステムのアプリケーションの作業領域を直接または間接的に再配置やリサイズすることがあります。例えば、ユーザーが Windows のタスクバーのサイズを変更したり、 Windows のタスクバーを左端 (アラビア語ベース) または右端 (ヘブライ語ベース) に配置したり、 MS-Office のクイック起動ツールバーを固定したりします。
• 一部のオペレーティングシステム (Mac OS X) は、強制的にツールバーを表示させるため、ウェブ制作者の予想を裏切りってブラウザーウィンドウの有効寸法を計算してしまうことがあります。

特性リストで要求された位置と寸法の値が守られず、そのような要求された値のいずれかが、ユーザーのオペレーティングシステムのアプリケーションのための作業領域内にブラウザーウィンドウ全体をレンダリングすることができない場合は修正されます。新しいウィンドウの一部が画面外に初期配置されることはありません。これは、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

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