Window
Window インターフェイスは、 DOM 文書を収めるウィンドウを表します。 document プロパティは、そのウィンドウに読み込まれた DOM の document オブジェクト を指します。
特定の文書が属するウィンドウは、 document.defaultView プロパティを使用して取得できます。
グローバル変数の window は、スクリプトを実行しているウィンドウを表しており、 JavaScript コードに公開されます。
Window インターフェイスは、ユーザーインターフェイスのウィンドウの概念とは必ずしも直接関連づかない、さまざまな関数、名前空間、オブジェクト、コンストラクターのホームです。一方、 Window インターフェイスはグローバルで使用可能であることが必要な、さまざまなアイテムを含むのに適した場所です。これらの多くは JavaScript リファレンス や DOM リファレンス で文書化しています。
タブブラウザーでは、それぞれのタブが個々の Window オブジェクトで表されます。タブ内で実行している JavaScript から見えるグローバルの window は、常にコードを実行しているタブを表します。しかし、タブブラウザーであっても resizeTo() や innerHeight のように、タブを含むウィンドウ全体に適用されるプロパティやメソッドがあります。一般に、タブに所属することができない合理的な理由があるものは、代わりにウィンドウに属します。
EventTarget Window
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| blur イベントは、要素がフォーカスを失ったときに発生します。 | 5 | 12 | 6 | 5.1 | 18 | 5 |
| Window.close() メソッドは、現在のウィンドウ、またはそのページ上で呼び出されたウィンドウを閉じます。 | 1 | 12 | 1 | 1 | 18 | 1 |
| Window.closed は読み取り専用プロパティで、対象ウィンドウが閉じられているかどうかを示します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| DOMContentLoaded イベントは、HTML の文書が完全に読み込まれ構文解析され、すべての遅延スクリプト（ および ）がダウンロードされ、実行されたときに発生します。画像、サブフレーム、非同期スクリプトの読み込みの完了は待ちません。 | 1 | 12 | 1 | 3.1 | 18 | 2 |
| error イベントは、リソースの読み取りに失敗したり、使用できなかったりした場合 — 例えば、スクリプトに実行エラーがあった場合に Window オブジェクトに発生します。 | 10 | 12 | 6 | 5.1 | 18 | 5 |
| ウィンドウを最前面にするようリクエストします。ユーザー設定によっては失敗する可能性があり、このメソッドが返される前にウィンドウが最前面になることは保証されません。 | 1 | 12 | 1 | 1 | 18 | 1 |
| focus イベントは、要素がフォーカスを受け取ったときに発生します。 | 5 | 12 | 6 | 5.1 | 18 | 5 |
| Window.frameElement プロパティは、（iframe や object のような）ウィンドウが埋め込まれた要素を返します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| ウィンドウ自体を、現在のウィンドウの直接のサブフレームを列挙した配列風オブジェクトとして返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| innerHeight は Window インターフェイスの読み取り専用プロパティで、ウィンドウの内部の高さをピクセル単位で返します。水平スクロールバーがあれば、その高さを含みます。 | 1 | 12 | 1 | 3 | 18 | 1 |
| Window の innerWidth プロパティは読み取り専用で、ウィンドウの内部の幅をピクセル単位で返します。これには垂直スクロールバーがある場合、その幅を含みます。 | 1 | 12 | 1 | 3 | 18 | 1 |
| ウィンドウにおけるフレーム（frame か iframe 要素のいずれか）の数を返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| load イベントは、ページ全体が、スタイルシートや画像などのすべての依存するリソースを含めて読み込まれたときに発生します。 これは Document/DOMContentLoaded_event が、ページの DOM の読み込みが完了すれば、リソースの読み込みが完了するのを待たずに発生するのと対照的です。 | 1 | 12 | 1 | 1.3 | 18 | 1 |
| moveBy() は Window インターフェイスのメソッドで、現在のウィンドウを指定された量だけ移動します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| moveTo() は Window インターフェイスのメソッドで、現在のウィンドウを指定された座標へ移動します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| Window.name プロパティは、このウィンドウの閲覧コンテキストの名前を取得/設定します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| open() は Window インターフェイスのメソッドで、指定されたリソースを、新しい、または既存の指定された名前を持った閲覧コンテキスト (ウィンドウ、 iframe、タブ) に読み込みます。 | 1 | 12 | 1 | 1 | 18 | 1 |
open (features parameter popup) `features` パラメータは `"popup"` という値を受け付けます | 98 | 98 | 96 | | 98 | |
open (once per event) イベントごとに1回の `Window.open()` の呼び出し | 23 | 12 | 65 | 11 | 25 | 11 |
| Window インターフェイスの opener プロパティは、 Window.open によって、または target 属性の付いたリンクの操作によって開かれたウィンドウを開いたウィンドウへの参照を返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| Window.outerHeight は読み取り専用のプロパティで、サイドバー、ウィンドウの操作部分、ウィンドウをリサイズする境界やハンドルを含む、ブラウザーウィンドウ全体の高さをピクセル単位で表します。 | 1 | 12 | 1 | 3 | 18 | 3 |
| Window.outerWidth は読み取り専用のプロパティで、ブラウザーウィンドウの外側の幅を返します。これはサイドバー (展開されている場合)、ウィンドウの操作部分、ウィンドウをリサイズする境界やハンドルを含む、ブラウザーウィンドウ全体の幅を表します。 | 1 | 12 | 1 | 3 | 18 | 3 |
| Window.parent プロパティは、現在のウィンドウ、または、サブフレームの親への参照を返します。 | 1 | 12 | 1 | 1.3 | 18 | 1 |
| resize イベントは、この文書のビュー (ウィンドウ) の大きさが変更されたときに発行されます。 | 1 | 12 | 1 | 1.1 | 18 | 1 |
| Window.resizeBy() メソッドは、現在のウィンドウを指定した大きさにリサイズします。 | 1 | 12 | 1 | 1 | 18 | 1 |
| Window.resizeTo() メソッドは、ウィンドウのサイズを動的に変更します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| Window の screen プロパティは、ウィンドウに関連付けられた画面オブジェクトへの参照を返します。 screen オブジェクトは Screen インターフェイスを実装しており、現在のウィンドウがレンダリングされている画面のプロパティを検査するための特別なオブジェクトです。 | 1 | 12 | 1 | 1 | 18 | 1 |
| Window.screenLeft は読み取り専用プロパティで、ユーザーのブラウザーのビューポートの左端から、画面の左端までの水平方向の距離を、 CSS ピクセル単位で返します。 | 1 | 12 | 64 | 1 | 18 | 1 |
| Window.screenTop は読み取り専用プロパティで、ユーザーのブラウザーのビューポートの上端から、画面の上端までの垂直方向の距離を、 CSS ピクセル単位で返します。 | 1 | 12 | 64 | 1 | 18 | 1 |
| Window.screenX は読み取り専用のプロパティで、ユーザーのブラウザーのビューポートから画面の左端までの水平距離を CSS ピクセル数で返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| Window.screenY は読み取り専用のプロパティで、ユーザーのブラウザーのビューポートの上端から画面の上端までの垂直距離を CSS ピクセル数で返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| Window.self 読み取り専用プロパティは、WindowProxy のように、ウィンドウ自身を返します。window オブジェクトでドット表記法 (つまり、window.self) を使用して使うことも、単独 (self) で使うこともできます。単独表記法を使用する利点は、Workerのようなウィンドウコンテキスト以外にも同様の表記法が存在することです。self を使用することで、ウィンドウコンテキスト (self は window.self として解決されます) だけでなく、ワーカーコンテキスト (self は WorkerGlobalScope.self として解決されます) でも機能するようにグローバルスコープを参照できます。 | 1 | 12 | 1 | 3 | 18 | 1 |
| window.stop() は、現在の閲覧コンテキストでこれ以上リソースが読み込まれるのを停止します。これは、ブラウザーの停止ボタンと同じ機能です。 | 1 | 14 | 1 | 3 | 18 | 1 |
| ウィンドウ階層における最上位のウィンドウへの参照を返します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| window は Window オブジェクトのプロパティで、 window オブジェクト自身を指します。 | 1 | 12 | 1 | 3 | 18 | 1 |
- 他のブラウザと同様に `window` オブジェクトでイベントを発生させるだけでなく、Firefox では `document` オブジェクトでもイベントを発生させます。バグ 1228802 を参照してください。
- Firefox 24 以前では、このイベントのインターフェースは `FocusEvent` ではなく、単なる `Event` です。
- Chrome 95以前では、スクリプトの閉じ可能性は、Webコンテンツによって作成されたかどうかではなく、オープナーが存在するかどうかによって決まっていました。
- Firefox 128以前では、スクリプトの閉じ可能性は、Webコンテンツによって作成されたかどうかではなく、オープナーが存在するかどうかによって決まっていました。
- Chrome Android 95以前では、スクリプトの閉じ可能性は、Webコンテンツによって作成されたかどうかではなく、オープナーが存在するかどうかによって決まっていました。
- Chrome 66以降、ポップアップを全画面モードで開いた状態でこの関数を呼び出すと、全画面モードが終了します。
- 他のブラウザと同様に `window` オブジェクトでイベントを発生させるだけでなく、Firefox では `document` オブジェクトでもイベントを発生させます。バグ 1228802 を参照してください。
- Firefox 24 以前では、このイベントのインターフェースは `FocusEvent` ではなく、単なる `Event` です。
- バージョン4から24にかけて、特定の状況下では、ページが読み込まれる前にこのプロパティが誤った値を返すことがありました（バグ641188を参照）。
- このプロパティは、レイアウトビューポートではなく、ビジュアルビューポートの高さを返します。詳細については、バグ 174362 を参照してください。
- バージョン4から24にかけて、特定の状況下では、ページが読み込まれる前にこのプロパティが誤った値を返すことがありました（バグ641188を参照）。
- このプロパティは、レイアウトビューポートではなく、ビジュアルビューポートの幅を返します。詳細については、バグ 174362 を参照してください。
- Firefox 86 以前のバージョンでは、別のドメインの新しいページがタブに読み込まれた場合、`window.name` が空の文字列に設定されないため、一部のクロスサイト攻撃が可能となる可能性があります。バグ 1685089 およびバグ 444222 を参照してください。
- このブラウザでは部分的にしか実装されていません
- `target` パラメータが指定されていないか、`_blank` に設定されている場合、この方法は機能しません。
- Chromeでは、ページの読み込み時に`resize`イベントが発生しません。
- Edge 79 以前では、Edge はページの読み込み時に `resize` イベントを発火させていました。しかし、現在はそうではありません。
- Firefox 68以前では、Firefoxはページの読み込み時に`resize`イベントを発火させていました。しかし、現在はそうではありません。
- Chrome for Androidでは、ページの読み込み時に`resize`イベントが発生しません。
- Firefox 7以降、`window.open`によって作成されたウィンドウでない場合、または複数のタブを含むウィンドウの場合、Webサイトがブラウザのウィンドウのデフォルトサイズを変更することはできなくなりました。詳細についてはこちらをご覧ください。
- Firefox 7以降、`window.open`によって作成されたウィンドウでない場合、または複数のタブを含むウィンドウの場合、Webサイトがブラウザのウィンドウのデフォルトサイズを変更することはできなくなりました。詳細についてはこちらをご覧ください。
- Firefox 28以前、GeckoはCSSピクセルではなくデバイスピクセルを使用していました。つまり、どのデバイスにおいても`screenPixelsPerCSSPixel`の値を1と仮定していたのです。
- Firefox 28以前、GeckoはCSSピクセルではなくデバイスピクセルを使用していました。つまり、どのデバイスにおいても`screenPixelsPerCSSPixel`の値を1と仮定していたのです。
- Firefox 6 以降、このプロパティは標準仕様に基づき読み取り専用となります。
基本構文
window.onresize = (e) => console.log(e.currentTarget);
document.body.onresize = (e) => console.log(e.currentTarget);実務での使いどころ
-
Window の活用
Window インターフェイスは、 DOM 文書を収めるウィンドウを表します。
注意点
- 古いブラウザでは対応していない場合がある。
実装メモ
- 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。