DOM

：

Window.open() メソッド

　編集：2022.09.15 by T.A.

[Edge]？。→、、

新しいウインドウを開き、指定されたリソースを表示し、そのウインドウを WindowProxyオブジェクトで返します。

ウィンドウやタブに新しく、または <iframe> に読み込ませることができます。

構文

window.open(url[, target[, windowFeatures]])

url

文字列で、読み込むリソースの URL を示します。

これは HTML ページ、画像ファイル、その他のブラウザーが対応しているリソースのパスまたは URL にすることができます。

空文字列（""）がこの時期数（¶）に指定されると、対象の閲覧コンテキストに空のページが開きます。

target

省略可。ホワイトスペースのない文字列で、指定したリソースを読み込むための閲覧コンテキスト（ウィンドウ、<iframe>、タブ）の名前を指定します。

その名前で既存のコンテキストが識別できない場合は、新しいコンテキストが指定された名前で作成されます。

特殊な target キーワードである _self、_blank、_parent、_top も利用することができます。

この名前は <a> や <form> 要素の target 属性として使うことができます。

windowFeatures

省略可。ウインドウのオプションを表す文字列。name=value の形式で、それらをカンマ「,」で区切って指定する。論理特性の場合は name だけよい。

以下のようなオプションに対応しています：

`name`	説明
`popup`	この特性を有効にすると、最小限のポップアップウィンドウを使用するように要求されます。ポップアップウィンドウに含まれる UI 機能はブラウザーが自動的に決定し、一般的にはアドレスバーのみを含みます。もし popup が有効でなく、ウィンドウ機能が宣言されていない場合、新しい閲覧コンテキストはタブになります。 Note： `windowFeatures` 引数で noopener や noreferrer 以外の機能を指定すると、ポップアップを要求する効果もあります。この機能を有効にするには、popup を指定して値を指定しないか、`yes`、`1`、`true` のいずれかに設定します。例： popup=yes、popup=1、popup=true、popup は同じ結果になります。
`width` または `innerWidth`	スクロールバーを含むコンテンツ領域の幅を指定します。必要最小値は 100 です。
`height` または `innerHeight`	スクロールバーを含むコンテンツ領域の高さを指定します。必要最小値は 100 です。
`left` または `screenX`	新しいウィンドウを生成する、ユーザーのオペレーティングシステムによって定義される作業領域の左側からの距離をピクセル単位で指定します。
`top` または `screenY`	新しいウィンドウを生成する、ユーザーのオペレーティングシステムによって定義される作業領域の上側からの距離をピクセル単位で指定します。
`noopener`	この特性が設定されている場合、新しいウィンドウは Window.opener を介して元のウィンドウにアクセスすることはできなくし、null を返すようにします。 noopener を使用した場合、_top、_self、_parent 以外の空でないターゲット名は、新しい閲覧コンテキストを開くかどうかの判断において、_blank と同様に扱われます。
`noreferrer`	この特性が設定されると、ブラウザーは Referer ヘッダーを省略し、noopener を true に設定します。詳しくはを参照してください。

Note：要求位置（top、left）、要求寸法（width、height）の値が windowFeatures で指定された場合、ブラウザーポップアップ全体をユーザーのオペレーティングシステムのアプリケーションの作業領域内に表示できないと、修正されます。言い換えれば、新しいポップアップのどの部分も、最初は画面外に位置することはできません。

戻り値

WindowProxy オブジェクトです。

返される参照は、同一オリジンポリシーのセキュリティ要件に準拠する限り、新しいウィンドウのプロパティとメソッドにアクセスするために使用することができます。

解説

Window インターフェイスの open() メソッドは、URL を引数として取り、識別する新規または既存のタブまたはウィンドウにリソースを読み込みます。target 引数は、リソースを読み込むウィンドウやタブを決定します。また、windowFeatures 引数は、最小限のユーザーインターフェイス機能で新しいポップアップを開き、そのサイズや位置を制御するために使用することができます。

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

例

ポップアップを開く

以下の例では、popup 特性を使用して、ポップアップを開く方法を示しています。

Warning：最近のブラウザーはポップアップブロッカーが内蔵されており、このようなポップアップを開くことを防いでいます。ユーザーは、ブラウザーの設定を変更してポップアップを有効にするか、ブラウザーのユーザーインターフェースからサイトごとに有効にする必要があります（サイトが最初にポップアップを開こうとしたときに通知が現れ、有効にするか破棄するかの選択肢が与えられる場合があります）。

window.open("https://www.mozilla.org/", "mozillaWindow", "popup");

新しいポップアップの大きさと位置を操作することが可能です。

const windowFeatures = "left=100,top=100,width=320,height=320";
const handle = window.open("https://www.mozilla.org/", "mozillaWindow", windowFeatures);
if (!handle) {
  // The window wasn't allowed to open
  // This is likely caused by built-in popup blockers.

  // …
}

プログレッシブエンハンスメント

JavaScriptが無効または利用できない場合、window.open()が動作しないことがあります。この機能の有無だけに頼るのではなく、サイトやアプリケーションが機能するような代替策を提供してください。

JavaScript が無効な場合の代替手段を提供する

JavaScript のサポートが無効または存在しない場合、ユーザーエージェントはそれに応じて副ウィンドウを作成するか、target 属性の処理に従って参照されるリソースをレンダリングします。目標とアイデアは、参照されるリソースを開く方法をユーザーに提供してください（押し付けないでください）ということです。

HTML：

<a href="https://www.wikipedia.org/" target="OpenWikipediaWindow">
  Wikipedia, a free encyclopedia (opens in another, possibly already existing, tab)
</a>

JavaScript：

let windowObjectReference = null; // global variable
function openRequestedTab(url, windowName) {
  if (windowObjectReference === null || windowObjectReference.closed) {
    windowObjectReference = window.open(url, windowName);
  } else {
    windowObjectReference.focus();
  };
}

const link = document.querySelector("a[target='OpenWikipediaWindow']");
link.addEventListener("click", (event) => {
  openRequestedTab(link.href);
  event.preventDefault();
  }, false);

上記のコードは、リンクがポップアップを開くことに関連するいくつかのユーザービリティの問題を解決しています。

コード中の event.preventDefault() の目的は、リンクの既定値のアクションを取り消すことです。click のイベントリスナーが実行されれば、リンクの既定値のアクションを実行する必要はありません。しかし、ユーザーのブラウザーで JavaScript のサポートが無効または存在しない場合、click のイベントリスナーは無視され、ブラウザーは "WikipediaWindowName" という名前を持つターゲットフレームまたはウィンドウに参照されたリソースを読み込む。フレームやウィンドウに "WikipediaWindowName" という名前がない場合、ブラウザーは新しいウィンドウを作成して "WikipediaWindowName" という名前を付けます。

Note： target 属性についての詳細は、<a>、<form> 要素を参照してください。

¶省く

D=window.open("../Com/Test.htm", "Test"); //新しいウインドウを開き、Test.htm を表示させる。

Dを表示させるとエラー発生：Blocked a frame with origin "null" from accessing a cross-origin frame.
（オリジンが「null」のフレームがクロスオリジンフレームにアクセスするのをブロックしました。）

オフラインだと内容を見られないようだ。

以下はオンラインで得られた内容：

//D＝[object]：[object Window]
//window＝[object]：[object Window]
//self＝[object]：[object Window]
//document＝[object]：[object HTMLDocument]
//name＝[string]：Test
//location＝[object]：http://tetuya-amamiya.la.coocan.jp/HTML_R/HTML-Rifarennsu/DOM/Com/Test.htm
//customElements＝[object]：[object CustomElementRegistry]
//history＝[object]：[object History]
//locationbar＝[object]：[object BarProp]
//menubar＝[object]：[object BarProp]
//personalbar＝[object]：[object BarProp]
//scrollbars＝[object]：[object BarProp]
//statusbar＝[object]：[object BarProp]
//toolbar＝[object]：[object BarProp]
//status＝[string]：
//closed＝[boolean]：false
//frames＝[object]：[object Window]
//…