Window: popstate イベント - Web API

Window: popstate イベント
=====================

**`popstate`** は `Window` インターフェイスのイベントで、ユーザーがセッション履歴を操作している間にアクティブな履歴項目が変更されたときに発行されます。これは現在の履歴項目をユーザーが最後に訪れたページのものに変更するか、または `history.pushState()` が履歴項目を履歴スタックに追加するために使用されていた場合、その履歴項目が代わりに使用されます。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("popstate", (event) => {});
onpopstate = (event) => {};
```

イベント型
-----

`PopStateEvent` です。 `Event` を継承しています。

Event

PopStateEventイベントプロパティ
---------

`PopStateEvent.state` 読取専用

`pushState()` または `replaceState()` に提供された情報のコピーを返します。

イベントハンドラーの別名
------------

`Window` インターフェイスに加えて、イベントハンドラープロパティ `onpopstate` は以下の要素でも利用できます。

* `HTMLBodyElement`
* `HTMLFrameSetElement` (en-US)
* `SVGSVGElement` (en-US)
履歴スタック
------

アクティブ化される履歴項目が `history.pushState()` の呼び出しによって作成されたものである場合、または `history.replaceState()` の呼び出しの影響を受けた場合、 `popstate` イベントの `state` プロパティには履歴項目の状態オブジェクトのコピーが格納されます。

これらのメソッドと対応するイベントは、履歴スタックにデータを追加するために使用することができ、動的に生成されたページを再構築したり、同じ `Document` に留まりながら表示するコンテンツの状態を変更したりするために使用することができます。

ただ、 `history.pushState()` や `history.replaceState()` を呼び出すだけでは、 `popstate` イベントが発行されないことに注意してください。 `popstate` イベントは、戻るボタンや進むボタンをクリックする（あるいは JavaScript で `history.back()` や `history.forward()` を呼び出す）など、ブラウザーの操作によって発行されます。

ブラウザーは、ページ読み込み時に `popstate` イベントを異なる方法で処理する傾向があります。 Chrome （v34 以前）と Safari ではページ読み込み時に常に `popstate` イベントが発行されますが、 Firefox では発行されません。

**メモ:** `popstate` イベントを処理する関数を書くときには、 `window.location` のようなプロパティはすでに状態の変化を反映していますが（それが現在の URL に影響する場合）、 `document` はまだ反映されていないかもしれないことを考慮に入れておくことが重要です。新しい文書の状態が完全に反映された瞬間を捉えることが目的であれば、遅延ゼロの `setTimeout()` メソッド呼び出しを使用して、処理を行う内部の *callback* 関数をブラウザーのイベントループの最後に効果的に配置する必要があります。例えば `window.onpopstate = () => setTimeout(doSomeThing, 0);` のようにします。

popstate が送信される場面
-----------------

ブラウザーは迷惑なポップアップに対抗するために、ページが操作されない限り `popstate` イベントをすべて発行しないことがあります。

この節では、ブラウザーが潜在的に `popstate` イベントを発行する場合（つまり、ページが操作された場合）に従う手順を記述します。

ユーザーがブラウザーの `戻る` ボタンを押すなどして遷移が発生した場合、 `popstate` イベントは新しい場所に遷移するためのプロセスの終了間際に発行されます。新しい場所の読み込み（必要な場合）、表示、可視化などが行われた後に `pageshow` イベントが送信され、持続的なユーザー状態情報が復元されて `hashchange` イベントが送信される前に発行されます。

`popstate` イベントが発行されるタイミングをよりよく理解するために、ユーザーがサイトを移動するか、履歴をプログラムで走査することによって、現在の履歴項目が変更されたときに発行されるイベントのシーケンスを単純化して考えてみましょう。ここでは、現在の履歴項目を**新しい項目**と呼ぶものに変更する遷移を示します。現在のページのセッション履歴スタック項目は**現在の項目**と呼びます。

1. もし**新しい項目** が現在、既存の `Document` を含んでいなければ、続行する前にコンテンツを取得し、その `Document` を作成します。これは `DOMContentLoaded` や `load` イベントを最終的に文書を含む `Window` に送信しますが、以下のステップはその間に実行され続けます。
2. **現在の項目**のタイトルが履歴 API のメソッド、 (`pushState()` または `replaceState()`) の何れかで設定されなかった場合は、その項目のタイトルが `document.title` 属性が返す文字列に設定されます。
3. もし、ブラウザーが**現在の項目**から離れる前に保存したい状態情報を持っている場合は、保存します。このとき、その項目は「ユーザーの状態を保持した」とみなされます。ブラウザーが履歴セッションの項目に追加する可能性のあるこの情報には、たとえば、文書のスクロール位置、フォーム入力の値、および他のそのようなデータが含まれる場合があります。
4. もし、**新しい項目**が**現在の項目**と異なる `Document` オブジェクトを持っている場合は、その閲覧コンテキストは、その `document` プロパティが**新しい項目**によって参照される文書を参照するように更新され、コンテキストの名前は現在の文書のコンテキスト名と一致するように更新されます。
5. **新しい項目**の `Document` 内の各フォームコントロールで、自動入力フィールド名が `off` に設定された `autocomplete` が設定されているものは、リセットされます。自動補完されるフィールド名や自動補完の仕組みについては HTML の自動補完を参照してください。
6. **新しい項目**の文書が既に完全に読み込まれ準備されている場合、つまり、その `readyState` が `complete` で、文書がまだ表示されていない場合、文書が表示され、 `pageshow` イベントは `PageTransitionEvent` の `persisted` (en-US) 属性が `true` に設定された状態でその文書で発行されます。
7. この文書の `URL` が**新しい項目**のものに設定されます。
8. 履歴の走査が置換を有効にして行われている場合、（`go()` などのメソッドの `delta` 引数を考慮して）目的の項目の直前の項目が履歴スタックから削除されます。
9. もし**新しい項目**が持続的なユーザーの状態を持っておらず、その URL のフラグメントが `null` でなければ、その文書はそのフラグメントまでスクロールされます。
10. 次に、**現在の項目**が**新しい項目**に設定されます。宛先の項目は現在のものであると認識されます。
11. **新しい項目** にシリアライズされた状態情報が保存されている場合、その情報は `History.state` にデシリアライズされます。それ以外の場合は `state` は `null` となる。
12. `state` の値が変化した場合、文書に `popstate` イベントが送信されます。
13. ブラウザーが選択した場合、永続化されたユーザー状態が復元されます。
14. 元の項目と新しい項目が同じ文書を共有しているが、 URL のフラグメントが異なる場合、 `hashchange` イベントをウィンドウに送ります。

ご覧の通り、`popstate` イベントは、この方法でページ間を移動する過程で、ほぼ最後に発行されます。

例
-

`http://example.com/example.html` にあるページで以下のコードを実行すると、書かれている通りのログを出力します。

```js
window.addEventListener("popstate", (event) => {
  console.log(
    `location: ${document.location}, state: ${JSON.stringify(event.state)}`,
  );
});
history.pushState({ page: 1 }, "title 1", "?page=1");
history.pushState({ page: 2 }, "title 2", "?page=2");
history.replaceState({ page: 3 }, "title 3", "?page=3");
history.back(); // "location: http://example.com/example.html?page=1, state: {"page":1}" と出力
history.back(); // "location: http://example.com/example.html, state: null" と出力
history.go(2); // "location: http://example.com/example.html?page=3, state: {"page":3}" と出力
```

同じ例で、 `onpopstate` イベントハンドラープロパティを使用したものです。

```js
window.onpopstate = (event) => {
  console.log(
    `location: ${document.location}, state: ${JSON.stringify(event.state)}`,
  );
};
history.pushState({ page: 1 }, "title 1", "?page=1");
history.pushState({ page: 2 }, "title 2", "?page=2");
history.replaceState({ page: 3 }, "title 3", "?page=3");
history.back(); // "location: http://example.com/example.html?page=1, state: {"page":1}" と出力
history.back(); // "location: http://example.com/example.html, state: null" と出力
history.go(2); // "location: http://example.com/example.html?page=3, state: {"page":3}" と出力
```

元のの履歴項目 (`http://example.com/example.html`) には、状態オブジェクトが関連付けられていませんが、 2 回目の `history.back()` の呼び出しの後にその項目をアクティブにすると、 `popstate` イベントが発生することに注意してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # event-popstate |
| HTML Standard # handler-window-onpopstate |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ブラウザーの履歴の操作（履歴 API）
* Window: `hashchange` イベント


Window: sessionStorage プロパティ - Web API

Window: sessionStorage プロパティ
============================

**`sessionStorage`** プロパティは読み取り専用で、セッションの `Storage` オブジェクトにアクセスできます。`sessionStorage` は `Window.localStorage` に似ています。唯一の違いは、`localStorage` に保存されたデータに期限がないのに対して、`sessionStorage` に保存されたデータはページのセッションが終了するときに消去されることです。

* 文書がブラウザー内の特定のタブに読み込まれるたびに、固有のページセッションが作成され、その特定のタブに割り当てられます。そのページセッションは特定のタブでのみ有効です。
* ページセッションはタブやブラウザーが開いている限り続き、ページの再読み込みや復元にも耐えられます。
* **新しいタブやウィンドウでページを開くと、最上位の閲覧コンテキストの値で新しいセッションが作成されますが、これはセッションクッキーの動作方法とは異なります。**
* 同じ URL で複数のタブ/ウィンドウを開くための `sessionStorage` はタブ/ウィンドウごとに作成します。
* タブをコピーすると、そのタブの `sessionStorage` が新しいタブにコピーされます。
* タブ/ウィンドウを閉じられた場合、セッションは終わり、 `sessionStorage` 内のオブジェクトは消去されます。

`sessionStorage` に格納されるデータはページのプロトコルごとに分かれています。例えば、http://example.com のように HTTP でアクセスしたサイトのスクリプトで格納されるデータは、 https://example.com のように HTTPS でアクセスしたサイトとは異なる `sessionStorage` オブジェクトに格納されます。

キーと値は常に UTF-16 文字列形式で、 1 文字あたり 2 バイトを使用します。オブジェクトと同様に、整数のキーは自動的に文字列に変換されます。

値
-

現在のオリジンのセッションストレージ領域にアクセスするのに使用できる `Storage` オブジェクトを返します。

### 例外

`SecurityError`

以下のいずれかの場合に発生します。

* オリジンが妥当なスキーム/ホスト名/ポート番号の組み合わせでない。これは例えば、オリジンが `file:` や `data:` スキームを使うときに起こります。
* リクエストがポリシーの決定に反している。例えば、ユーザーがブラウザーで特定のオリジンにおいてデータの永続化を拒否している場合です。

なお、ユーザーが Cookie をブロックしている場合、ブラウザーはこれをデータの永続化の拒否と解釈する可能性が高いです。

例
-

### 基本的な使用法

```js
// sessionStorage にデータを保存
sessionStorage.setItem("key", "value");

// sessionStorage に保存したデータを取得
let data = sessionStorage.getItem("key");

// sessionStorage に保存したデータを削除
sessionStorage.removeItem("key");

// sessionStorage からすべての保存したデータを削除
sessionStorage.clear();
```

### ページ更新時にデータを保持

以下の例は、テキストフィールドの内容を自動的に保存して、ブラウザーが再読み込みされた場合に、記入した内容を失わないようにテキストフィールドの内容を復元します。

```js
// 追跡するテキストフィールドを取得
let field = document.getElementById("field");

// 自動保存された値があるかを確認
// （ページが意図せず再読み込みされた場合にのみ発生）
if (sessionStorage.getItem("autosave")) {
  // テキストフィールドの内容を復元
  field.value = sessionStorage.getItem("autosave");
}

// テキストフィールドの変更を待ち受け
field.addEventListener("change", () => {
  // セッションストレージオブジェクトに結果を保存
  sessionStorage.setItem("autosave", field.value);
});
```

**メモ:** 詳細な使用例は ウェブストレージ API の使用 の記事を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-sessionstorage-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブストレージ API の使用
* `Window.localStorage`


Window: localStorage プロパティ - Web API

Window: localStorage プロパティ
==========================

**`localStorage`** は `window` プロパティの読み取り専用プロパティで、この `Document` の origin における `Storage` オブジェクトにアクセスできます。格納されたデータは、ブラウザーのセッションを跨いで保存されます。

`localStorage` は `sessionStorage` によく似ていまが、 `localStorage` のデータには期限がないのに対し、 `sessionStorage` のデータはページセッションが終了したとき、すなわちページが閉じられたときにクリアされます。（「プライベートブラウジング」や「プライバシーモード」のセッションに読み込まれた文書の `localStorage` のデータは、最後の「プライベート」タブが閉じられたときにクリアされます。）

値
-

現在のオリジンのローカルストレージ領域にアクセスするのに使用できる `Storage` オブジェクトを返します。

### 例外

`SecurityError`

以下のいずれかの場合に発生します。

* オリジンが妥当なスキーム/ホスト名/ポート番号の組み合わせでない。これは例えば、オリジンが `file:` や `data:` スキームを使うときに起こります。
* リクエストがポリシーの決定に反している。例えば、ユーザーがブラウザーで特定のオリジンにおいてデータの永続化を拒否している場合です。

なお、ユーザーが Cookie をブロックしている場合、ブラウザーはこれをデータの永続化の拒否と解釈する可能性が高いです。

解説
--

`localStorage` に保存されるキーと値は*常に* UTF-16 文字列であり、 1 文字あたり 2 バイトを使用します。オブジェクトと同様に、整数のキーは自動的に文字列に変換されます。

`localStorage` のデータは**その文書のプロトコルに依存する**ことに注意する必要があります。特に、 `http://example.com` のような HTTP で読み込まれているページにおける `localStorage` は、`https://example.com` のような対応する HTTPS で読み込まれているページにおける `localStorage` とは異なるオブジェクトを返します。

文書が `file:` URL から読み込まれている（すなわち、ファイルをウェブサーバーから読み込んだのではなくローカルのファイルシステムからブラウザーで直接開いている）場合、`localStorage` に関する要件は定義されておらず、ブラウザーによって異なる可能性があります。

現在の全てのブラウザーにおいて、 `localStorage` はそれぞれの `file:` URL に対して異なるオブジェクトを返すようです。すなわち、それぞれの `file:` URL がそれぞれ独自のローカルストレージ領域を持つようです。しかし、前述のように `file:` URL における要件は未定義なので、この挙動は保証されず、この挙動に頼るべきではありません。ブラウザーは `file:` URL における `localStorage` の扱いを変える可能性があり、実際にいくつかのブラウザーは変えています。

例
-

以下のスニペットでは現在のドメインのローカル `Storage` オブジェクトにアクセスし、`Storage.setItem()` を利用してデータを追加しています。

```js
localStorage.setItem("myCat", "Tom");
```

`localStorage` からのアイテムの読み込みは以下のようにします。

```js
const cat = localStorage.getItem("myCat");
```

`localStorage` からのアイテムの削除は以下のようにします。

```js
localStorage.removeItem("myCat");
```

`localStorage` からの全アイテムの削除は以下のようにします。

```js
localStorage.clear();
```

**メモ:** 詳細な使用例は、ウェブストレージ API の使用の記事を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-localstorage-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブストレージ API の使用
* `Window.sessionStorage`


Window.mozInnerScreenX - Web API

Window.mozInnerScreenX
======================

概要
--

ウィンドウのビューポートの左上隅のX座標を、スクリーン座標で返します。

**メモ:** この座標は CSS ピクセルで報告され、ハードウェアピクセルではありません。つまり、ズームレベルによって影響を受ける可能性があります。実際の物理的な画面のピクセル数を計算するには、 `nsIDOMWindowUtils.screenPixelsPerCSSPixel` プロパティを使用する必要があります。

値
-

`window.mozInnerScreenX` プロパティは浮動小数点数で、読み取り専用です。既定値はありません。

仕様書
---

W3C の技術仕様や勧告に属しません。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `window.mozInnerScreenY`
* `nsIDOMWindowUtils.screenPixelsPerCSSPixel`


window.scroll - Web API

window.scroll
=============

概要
--

ウィンドウを文書内の特定の位置までスクロールします。

構文
--
```

window.scroll(x-coord,y-coord)
window.scroll(options)
```

### 引数

* `x-coord` : 左上を基準とした、表示させたい文書の水平軸上のピクセル
* `y-coord` : 左上を基準とした、表示させたい文書の垂直軸上のピクセル

または

* `options` : 三つのプロパティを持たせられるオブジェクト
    + `top` `y-coord` と同じです
    + `left` `x-coord` と同じです
    + `behavior` `smooth`、 `instant`、 `auto` のうちどれか一つを含む文字列。初期値は `auto` です
例
-

```html
<!-- 100 個目の垂直ピクセル上にウィンドウの最上部を配置します。 -->

<button onClick="scroll(0, 100);">click to scroll down 100 pixels</button>
```

#### スクロールの動作を変更する

スクロールの仕方を変えたいなら、options で指定してください

```js
window.scroll({
  top: 1000,
  behavior: "smooth",
});
```

注記
--

効果としては、 `window.scrollTo` もこのメソッドと同じです。 繰り返し特定の距離をスクロールさせるには `window.scrollBy` を使用してください。

次のページもご覧下さい : `window.scrollByLines` 、 `window.scrollByPages` 、 `Element.scrollIntoView()`

仕様
--

| Specification |
| --- |
| CSSOM View Module # dom-window-scroll |


window.closed - Web API

window.closed
=============

概要
--

この読取専用プロパティは、対象ウィンドウが閉じられているかどうかを示します。

構文
--
```

var isClosed = windowRef.closed;
```

`isClosed`

真偽値。次の何れかの値を取り得ます :

* `true`: ウィンドウが閉じられている事を示す
* `false`: ウィンドウが開いている事を示す

例
-

### ポップアップからウィンドウの URL を変化させる

次の例は、どのようにポップアップウィンドウでそれを開いたウィンドウの URL を変化させるかというデモです。URL を変化させる前に、 `window.opener` プロパティを用いて、現在のウィンドウがそのポップアップを開いたウィンドウであるどうか、そして、その開いた側のウィンドウが閉じられていないかをチェックします。:

```js
// 開いた側のウィンドウが存在するか、かつ、閉じられていないかを調べます。
if (window.opener && !window.opener.closed) {
  window.opener.location.href = "http://www.mozilla.org";
}
```

ポップアップはそれを開いたウィンドウにしかアクセスできないことに注意してください。

### 以前に開いたポップアップを更新する

この例では、関数 `refreshPopupWindow()` が ポップアップのデータを更新するために ポップアップの location オブジェクト中の `reload` メソッドを呼び出します。ポップアップがまだ開かれていない場合、または、ユーザがそれを閉じてしまっている場合は、新しいウィンドウが開かれます。

```js
var popupWindow = null;

function refreshPopupWindow() {
  if (popupWindow && !popupWindow.closed) {
    // popupWindow が開いている場合、それを更新します
    popupWindow.location.reload(true);
  } else {
    // 新しいウィンドウを開きます。
    popupWindow = window.open("popup.html", "dataWindow");
  }
}
```

仕様
--

DOM Level 0。 `window.closed` は、W3C の仕様や技術勧告に含まれるものではありません。

関連情報
----

* MSDN window.closed


Window: pagehide イベント - Web API

Window: pagehide イベント
=====================

**`pagehide`** イベントは、ブラウザーがセッションの履歴から他のページを表示する過程において、現在のページを非表示にしたときに `Window` へ送られます。例えば、ユーザーがブラウザーの戻るボタンをクリックしたとき、現在のページはひとつ前のページが表示される前に `pagehide` イベントを受け取ります。

|  |  |
| --- | --- |
| バブリング | なし |
| キャンセル | 不可 |
| インターフェイス | `PageTransitionEvent` |
| イベントハンドラープロパティ | `onpagehide` |

例
-

この例では、イベントハンドラーが `pagehide` イベントを監視するために確立され、ページが再利用できるように保存されようとするときに特殊な扱いを行います。

```js
window.addEventListener(
  "pagehide",
  (event) => {
    if (event.persisted) {
      /\* このページは破棄されないので、後で再利用することができます \*/
    }
  },
  false,
);
```

これは `onpagehide` イベントハンドラープロパティを `Window` 上で利用することで書くこともできます。

```js
window.onpagehide = (event) => {
  if (event.persisted) {
    /\* このページは破棄されないので、後で再利用することができます \*/
  }
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-pagehide |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `onpageshow` イベントハンドラープロパティ
* `pageshow` イベント


Window: unhandledrejection イベント - Web API

Window: unhandledrejection イベント
===============================

**`unhandledrejection`** イベントは、 JavaScript の拒否ハンドラーを持たない `Promise` が拒否されたときにスクリプトのグローバルスコープに送られます。 通常、これは `window` ですが、 `Worker` であることもあります。 これはデバッグや、予期しない場面でのエラーハンドリングのエラーの代替手段を提供するために利用することができます。

|  |  |
| --- | --- |
| バブリング | なし |
| キャンセル | 可 |
| インターフェイス | `PromiseRejectionEvent` |
| イベントハンドラープロパティ | `onunhandledrejection` |

使用上のメモ
------

`unhandledrejection` イベントにバブリングを許すと、結局はコンソールにエラーメッセージを出力することになります。 これは `PromiseRejectionEvent` の `preventDefault()` を呼び出すことで防ぐことができます。 例は以下の Preventing default handling を参照してください。

例
-

ここで `unhandledrejection` イベントの使い方が分かる例をいくつか見てみましょう。 イベントには 2 つの有用な情報があります。

`promise`

拒否を扱うために利用できるハンドラーがなく拒否された実際の `Promise` です。

`reason`

拒否ハンドラーに渡されるはずだった理由です。 詳しくは `catch()` を参照してください。

### 基本的なエラーのログ

この例では、処理されなかった Promise の拒否についての情報を単純にコンソールにログ出力します。

```js
window.addEventListener("unhandledrejection", (event) => {
  console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`);
});
```

イベントハンドラープロパティを使用して、イベントリスナーを設定することもできます。

```js
window.onunhandledrejection = (event) => {
  console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`);
};
```

### 既定のハンドリングの防止

(Node.js など) 多くの環境では、既定では処理されなかった Promise の拒否はコンソールに報告されます。 `unhandledrejection` イベントのハンドラー — と、さらに実行したいその他のタスク — を追加して、 `preventDefault()` を呼び出すことでイベントをキャンセルし、実行時のログ出力コードが扱われるまでバブリングすることを防ぐことができます。 これは `unhandledrejection` がキャンセル可能であるためです。

```js
window.addEventListener("unhandledrejection", function (event) {
  // ...your code here to handle the unhandled rejection...

  // Prevent the default handling (such as outputting the
  // error to the console

  event.preventDefault();
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-unhandledrejection |
| HTML Standard # handler-window-onunhandledrejection |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* プロミスの拒否イベント
* `onunhandledrejection` イベントハンドラープロパティ1
* `rejectionhandled` イベント
* `Promise`

[1] 対応するイベントハンドラープロパティは、`WindowEventHandlers` ミックスインで定義されています。 これは、`Window` インターフェイスとすべての種類の `Worker` インターフェイスの両方で使用できます。


window.length - Web API

window.length
=============

概要
--

ウィンドウにおけるフレーム（`<frame>` か `<iframe>` 要素のいずれか）の数を返します。

構文
--
```

framesCount = window.length;
```

* `framesCount` はフレームの数です。
例
-

```js
if (window.length) {
  // サブフレーム数が 0 でない場合の処理をここに記述
}
```

仕様
--

| Specification |
| --- |
| HTML Standard # dom-length-dev |


Window.fullScreen - Web API

Window.fullScreen
=================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`fullScreen`** は `Window` インターフェイスのプロパティで、そのウィンドウが全画面モードで表示されているかどうかを示します。

構文
--
```

isInFullScreen = windowRef.fullScreen;
```

クローム特権があればこのプロパティは読み書き可能で、それ以外では読み取り専用です。クローム特権なしでこのプロパティを設定しようとすると、例外は発生せず、ただ暗黙に失敗することに注意してください。これは、 Internet Explorer でこのプロパティを設定するように設計されたスクリプトが壊れるのを防ぐためです。

### 返値

`isInFullScreen`

論理値。取り得る値は次の通りです。

* `true`: そのウィンドウは全画面モードです。
* `false`: そのウィンドウは全画面モードではありません。
注
-

* 通常のウィンドウと全画面との間で切り替えが行われると、 "resize" イベントが該当するウィンドウで発生します。
例
-

```js
if (window.fullScreen) {
  // 全画面モード
} else {
  // 全画面モードではない
}
```

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


window.confirm - Web API

window.confirm
==============

**`Window.confirm()`** はブラウザーへ任意のメッセージ付きのダイアログを表示し、ユーザーがダイアログを承認またはキャンセルするまで待機します。

ある条件下、例えばユーザーがタブを切り替えているときなどでは、ブラウザーがダイアログを実際に表示しないことや、ダイアログの承認やキャンセルを待機しないことがあります。

構文
--

```js
confirm(message)
```

### 引数

`message`

確認ダイアログ内に表示したい文字列。

### 返値

論理型で、OK (`true`) とキャンセル (`false`) のどちらが選択されたかを示します。ブラウザーがページ内ダイアログを拒否している場合、常に `false` を返します。

例
-

```js
if (window.confirm("Do you really want to leave?")) {
  window.open("exit.html", "Thanks for Visiting!");
}
```

は以下のようになります。

![Firefox の confirm](/ja/docs/Web/API/Window/confirm/firefox_confirm_dialog.png)

注記
--

ダイアログボックスはモーダルウィンドウです。つまり閲覧者は、これを閉じないと他のプログラムのインターフェイスにアクセスできません。したがって、ダイアログボックス（もしくは、モーダルウィンドウ）を生成する関数を乱用するべきではありません。何にせよ、それ相応の 確認を目的としたダイアログボックスの使用を避けるべき 理由があります。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-confirm-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<dialog>` 要素
* `window.alert()`
* `window.prompt()`


Window.getComputedStyle() - Web API

Window.getComputedStyle()
=========================

**`Window.getComputedStyle()`** メソッドは、アクティブなスタイルシートを適用し、それらの値に含まれる可能性のある基本的な計算を解決した後、要素のすべての CSS プロパティの値を含むオブジェクトを返します。

個々の CSS プロパティの値は、オブジェクトによって提供される API を介してアクセスするか、CSS プロパティ名でインデックスを作成することでアクセスすることができます。

構文
--

```js
getComputedStyle(element);
getComputedStyle(element, pseudoElt);
```

### 引数

`element`

この `Element` の計算したスタイルを取得します。

`pseudoElt` 省略可

一致させる擬似要素を指定する文字列。実在する要素の場合は省略 (または `null`)。

### 返値

*生きた* `CSSStyleDeclaration` オブジェクトで、要素のスタイルが変わると自動で更新されます。

### 例外

`TypeError`

渡されたオブジェクトが `Element` ではないか、 `pseudoElt` が有効な擬似要素セレクターではないか、 `::part()` または `::slotted()` である場合。

**メモ:** 有効な擬似要素とは構文的に適切であることを指します。例えば `::unsupported` は擬似要素として対応されていませんが、有効と判断されます。さらに、最新の W3 標準では `::before` と `::after` のみを明示的に対応していますが、CSS の WG 草案はこの値を制限していません。 ブラウザーの互換性は様々かもしれません。

例
-

この例では、 `<p>` の要素のスタイルを設定してから、`getComputedStyle()` を使用してそれらのスタイルを取得し、それらを `<p>` のテキストコンテンツに出力します。

### HTML

```html
<p>Hello</p>
```

### CSS

```css
p {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  font: 2rem/2 sans-serif;
  text-align: center;
  background: purple;
  color: white;
}
```

### JavaScript

```js
const para = document.querySelector("p");
const compStyles = window.getComputedStyle(para);
para.textContent =
  `My computed font-size is ${compStyles.getPropertyValue("font-size")},\n` +
  `and my computed line-height is ${compStyles.getPropertyValue(
 "line-height",
 )}.`;
```

### 結果

解説
--

返されるオブジェクトは `CSSStyleDeclaration` 型で、これは要素の `style` プロパティから返されるオブジェクトと同じです。しかし、2 つのオブジェクトは異なる目的を持っています。

* `getComputedStyle` から返されたオブジェクトは読み取り専用で、 `<style>` 要素や外部スタイルシートで設定されたものも含めて、要素のスタイルを検査するために使用するためのものです。
* `element.style` オブジェクトは、その要素にスタイルを**設定**したり、 JavaScript の操作やグローバルの `style` 属性から直接追加されたスタイルを検査したりするために使用するためのものです。

最初の引数は `Element` でなければなりません。要素以外、例えば `Text` ノードであった場合はエラーが発生します。

defaultView
-----------

多くのコードサンプルでは、 `getComputedStyle` は `document.defaultView` オブジェクトから使用されています。ほとんどの場合、 `getComputedStyle` は `window` オブジェクト上に存在するので、これは必要ありません。 `defaultView` パターンは、 `window` のテスト仕様を書きたくない人たちと、 Java でも使える API を作りたくない人たちの組み合わせだったのかもしれません。

擬似要素の使用
-------

`getComputedStyle` は擬似要素 (例えば `::after`, `::before`, `::marker`, `::line-marker` — the pseudo-element spec を参照してください) からスタイル情報を取得することができます。

```html
<style>
 h3::after {
 content: " rocks!";
 }
</style>

<h3>Generated content</h3>

<script>
 const h3 = document.querySelector("h3");
 const result = getComputedStyle(h3, ":after").content;

 console.log("the generated content is: ", result); // returns ' rocks!'
</script>
```

メモ
--

* 返された `CSSStyleDeclaration` オブジェクトは、 CSS プロパティの**個別指定**の名前のアクティブな値を含んでいます。例えば、 `border-bottom-width` の値は `border-width` や `border` などの一括指定プロパティ名ではアクセスできません。 `font-size` のような個別指定の名前だけで値を問い合わせるのが最も安全です。 `font` のような一括指定の名前では、ほとんどのブラウザーでは動作しません。
* CSS のプロパティ値は、 `getPropertyValue(propName)` API を使用してアクセスすることも、 `obj['z-index']` や `obj.zIndex`のようにオブジェクトに直接添字を指定してアクセスすることもできます。
* `getComputedStyle` によって返される値は、`解決値`です。これらの値は通常、CSS 2.1 の`計算値`と同じですが、 `width`, `height`, `padding` のような古いプロパティの場合は、`使用値`と同じになります。もともと CSS 2.0 では、*計算値*はカスケードと継承後のプロパティの「使用可能な」最終値として定義されていましたが、 CSS 2.1 ではレイアウトする前の値として再定義され、*使用値*はレイアウト後の値として再定義されています。 CSS 2.0 のプロパティでは、 `getComputedStyle` は計算値の古い意味を返しますが、現在は**使用値**と呼ばれています。レイアウト前の値とレイアウト後の値の違いの例として、 `width` や `height` のパーセント値の解像度があり、これらは*使用値*のみ同等のピクセル数に置き換えられます。
* 返される値が意図的に不正確になる場合があります。 "CSS History Leak" のセキュリティ問題を回避するために、ブラウザーは訪問したリンクの計算されたスタイルについて嘘をつき、ユーザーがリンク先の URL を訪問していないかのような値を返すことがあります。これがどのように実装されているかについては、 Plugging the CSS History Leak と Privacy-related changes coming to CSS :visited を参照してください。
* CSS トランジションが動作している間、 `getComputedStyle` は、 Firefox では元のプロパティ値を返しますが、 WebKit では最終的なプロパティ値を返します。
* Firefox では、 `auto` の値を持つプロパティは `auto` の値ではなく、使用値を返します。そのため、 `top:auto` と `bottom:0` を `height:30px` の要素に適用し、包含ブロックを `height:100px` を適用すると、 Firefox の `top` のスタイルの計算値は、 100 − 30 = 70 なので `70px` となります。
仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-window-getcomputedstyle |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `window.getDefaultComputedStyle` (en-US)
* `Resolved Value`


Window.updateCommands() - Web API

Window.updateCommands()
=======================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

概要
--

現在のクロームウィンドウ（UI）のコマンドの状態を更新します。

構文
--

```js
updateCommands("sCommandName");
```

### 引数

* sCommandName` は特定の文字列で、これがどのような更新イベントなのかを記述します（例えば、いま太字になったなど）。
### 返値

なし (`undefined`)。

メモ
--

これは、アイテムを有効または無効にしたり（コマンドノードの "disabled" 属性を適宜設定またはクリア）、 XUL コマンドノードの "state" 属性に現在の状態情報を設定してコマンドの状態が選択の状態を反映するようにするものです。

関連情報
----

DOM Level 0 です。仕様書には含まれていません。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Window.back() - Web API

Window.back()
=============

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

`back()` は `Window` インターフェイスの廃止された標準外のメソッドで、履歴の前の項目をウィンドウに返します。これは Firefox 固有のメソッドであり、Firefox 31 で削除されました。

**メモ:** 代わりに、標準の `history.back` メソッドを使用してください。

構文
--

```js
back();
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

この例は、`back()` を呼び出して "戻る" ボタンのクリックを制御します。

```js
function handleMyBackButton() {
  if (canGoBack) {
    window.back();
  }
}
```

仕様書
---

どの仕様にも属していません。

ブラウザーの互換性
---------

この標準外の方法は Firefox のみで実装され、 Firefox 31 で削除されました。

関連情報
----

* `History.back()`
* `History.forward()`


Window.visualViewport - Web API

Window.visualViewport
=====================

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

`Window` インターフェイスの **`visualViewport`** は読み取り専用プロパティーです。 特定のウィンドウの視覚的ビューポートを表す `VisualViewport` (en-US) オブジェクトを返します。

構文
--
```

var visualViewport = Window.visualViewport
```

### 値

`VisualViewport` (en-US) はオブジェクトです。

仕様
--

| Specification |
| --- |
| CSSOM View Module # dom-window-visualviewport |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Window: innerWidth プロパティ - Web API

Window: innerWidth プロパティ
========================

`Window` の **`innerWidth`** プロパティは読み取り専用で、ウィンドウの内部の幅をピクセル単位で返します。これには垂直スクロールバーがある場合、その幅を含みます。

もっと詳細に言えば、`innerWidth` の値はウィンドウのレイアウトビューポート (en-US)の幅から取られます。ウィンドウの内部の高さは `innerHeight` プロパティを使用して取ることができます。

値
-

整数値で、ウィンドウのレイアウトビューポートの幅をピクセル単位で示します。このプロパティは読み取り専用で、既定値はありません。

ウィンドウの幅を変更するには、 `Window` の寸法の変更メソッドのうちの一つ、例えば `resizeBy()` や `resizeTo()` などを呼び出してください。

使用上の注意
------

ウィンドウからスクロールバーや境界を引いた幅を取得するには、ルートの `<html>` 要素の `clientWidth` プロパティを代わりに使用してください。

`innerWidth` はすべてのウィンドウと、ウィンドウのように動作するすべてのオブジェクト、例えばタブやフレームで利用できます。

例
-

```js
// これはビューポートの幅を返す
console.log(window.innerWidth);

// これはフレームセット内のフレームビューポートの幅を返す
console.log(self.innerWidth);

// これは直近のフレームセットのビューポートの幅を返す
console.log(parent.innerWidth);

// これはもっとも外側のフレームセットのビューポートの幅を返す
console.log(top.innerWidth);
```

デモ
--

### HTML

```html
<p>
  <code>resize</code>
  イベントを発行させるためにブラウザーのウィンドウの大きさを変えてください。
</p>
<p>ウィンドウの幅: <span id="height"></span></p>
<p>ウィンドウの高さ: <span id="width"></span></p>
```

### JavaScript

```js
const heightOutput = document.querySelector("#height");
const widthOutput = document.querySelector("#width");

function updateSize() {
  heightOutput.textContent = window.innerHeight;
  widthOutput.textContent = window.innerWidth;
}

updateSize();
window.addEventListener("resize", updateSize);
```

### 結果

別なページでこのデモコードの結果を見ることができます。

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-window-innerwidth |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `window.outerWidth`
* `window.innerHeight`
* `window.outerHeight`


Window: vrdisplayconnect イベント - Web API

Window: vrdisplayconnect イベント
=============================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`vrdisplayconnect`** は WebVR API のイベントで、互換性のある VR 機器がコンピューターに接続された時に発行されます。

**メモ:** このイベントは古い WebVR API の一部でした。これは WebXR 機器 API に置き換えられました。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("vrdisplayconnect", (event) => {});

onvrdisplayconnect = (event) => {};
```

イベント型
-----

`VRDisplayEvent` です。 `Event` を継承しています。

イベントプロパティ
---------

*`VRDisplayEvent` は親オブジェクトである `Event` からプロパティを継承しています。*

`VRDisplayEvent.display`
非推奨
 読取専用

このイベントに関連付けられた `VRDisplay` です。

`VRDisplayEvent.reason`
非推奨
 読取専用

このイベントが発生した理由を人間可読な形で示します。

例
-

`vrdisplayconnect` イベントは `addEventListener` メソッドで使用することができます。

```js
window.addEventListener("vrdisplayconnect", () => {
  info.textContent = "Display connected.";
  reportDisplays();
});
```

または、 `onvrdisplayconnect` イベントハンドラープロパティを使用してください。

```js
window.onvrdisplayconnect = () => {
  info.textContent = "Display connected.";
  reportDisplays();
};
```

仕様書
---

このイベントは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

すべてのブラウザーが新しい WebXR API を実装するまで、 A-Frame、Babylon.js、Three.js などのフレームワークを使用するか、ポリフィルを使用することが、すべてのブラウザーで動作する WebXR アプリを開発する上で推奨されます。[1]

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* WebVR API


window.window - Web API

window.window
=============

概要
--

`window` オブジェクトの `window` プロパティは、その `window` オブジェクト自身を指します。故に、以下の表現は同じ `window` オブジェクトを返します。
```

window.window
window.window.window
window.window.window.window
  ...
```

Web ページに於いては、`window` オブジェクトは*グローバルオブジェクト* でもあります。これは次の事を意味します。

1. スクリプト中の変数 "global" は、実際には `window` オブジェクトのプロパティです。

```js
var global = { data: 0 };

alert(global === window.global); // "true" を表示します。
```

2. ブラウジングコンテキストに於いて `window` は最上位オブジェクトである為、 `window` オブジェクトのメンバへのアクセス時には "`window.`" 接頭辞を省略する事が可能となっています。

```js
// 次の 2 行は同じ動作となります。
window.setTimeout("window.alert('Hi!')", 50);
setTimeout("alert('Hi!')", 50);

// window プロパティが自身を参照しているか確認してみましょう。
alert((window === window.window) === window.window.window.window); // true
```

そのオブジェクト自身を参照する `window` プロパティが持っている理由は、おそらくグローバルオブジェクトの参照を容易にする為でしょう。もしこのようになっていない場合、 `var window = this;` という代入をスクリプトの一番最初に自分で書かなければならないでしょう。

別の理由としては、このプロパティ無しには、例えば、 "`window.open('http://google.com/')`" と書くことができないということが挙げられます。そうでなければ、単に、"open('http://google.com/')" と書かなければならないでしょう。

Yet another reason to use this property is for libraries which wish to offer OOP-versions and non-OOP versions (especially JavaScript modules). If, for example, we refer to "this.window.location.href", a JavaScript module could define a property called "window" inside of a class it defined (since no global "window" variable exists for it by default) which, could be created, for example, after passing in a window object to the module class' constructor. Thus, "this.window" inside of its functions would refer to that window object. In the non-namespaced version, "this.window" would simply refer back to "window", and also be able to get the document location without trouble. Another advantage is that the objects of such a class (even if the class were defined outside of a module) could change their reference to the window at will, as they would not be able to do if they had hard-coded a reference to "window" (yet the default in the class could still be set as the current window object).

仕様
--

| Specification |
| --- |
| HTML Standard # dom-window-dev |


Window.mozInnerScreenY - Web API

Window.mozInnerScreenY
======================

`mozInnerScreenY` は `Window` のプロパティで、ウィンドウのビューポートにおける左上隅の Y 座標をスクリーン座標で返します。

**メモ:** この座標は CSS ピクセルで報告され、ハードウェアピクセルではありません。

値
-

`window.mozInnerScreenY` プロパティは浮動小数点数で、読み取り専用です。既定値はありません。

仕様書
---

W3C の技術仕様や勧告に属しません。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `window.mozInnerScreenX`


Window.postMessage() - Web API

Window.postMessage()
====================

**`window.postMessage()`** は、 `Window` オブジェクト間で安全にオリジン間通信を可能にするためのメソッドです。例えば、ポップアップとそれを表示したページの間や、iframe とそれが埋め込まれたページの間での通信に使うことができます。

通常、異なった複数のページでのスクリプトはそれらが実行されたページが同じプロトコル、ポート番号、ホストである場合に限りお互いにアクセスすることが可能です（「同一オリジンポリシー」とも呼ばれます）。正しく使用した `window.postMessage` はこの制限を安全に回避するための制御された仕組みを提供します。

大まかには、ウィンドウが他のウィンドウへの参照を取得できる場合 ( `targetWindow = window.opener` など)、`targetWindow.postMessage()` を使って `MessageEvent` をそのウィンドウ上で配信することができます。受け取ったウィンドウでは必要に応じて自由にイベントを処理することができます。`window.postMessage()` に渡された引数 ("message") はイベントオブジェクトを通して対象のウィンドウに公開されます。

構文
--

```js
postMessage(message, targetOrigin)
postMessage(message, targetOrigin, transfer)
```

### 引数

`message`

他のウィンドウに送られるデータ。データは構造化複製アルゴリズムに従ってシリアル化されます。つまり、手動でシリアル化することなく様々なデータオブジェクトを宛先に安全に渡すことができます。

`targetOrigin`

イベントを配信するこのウィンドウのオリジンを指定します。リテラル文字列 `"*"` (優先順位なし) か URI のどちらかで指定します。イベントが配信される予定時刻に、このウィンドウの文書のスキーム、ホスト名、ポートが `targetOrigin` で指定されたものと一致しない場合、イベントは配信されません。この仕組みにより、メッセージが送信される場所を制御できます。例えば、 `postMessage()` をパスワードを送信するために使用する場合、悪意のある第三者によるパスワードの傍受を防ぐために、この引数がパスワードを含むメッセージの受信予定者と同じオリジンの URI であることが絶対に重要でしょう。 **他のウィンドウの文書がどこにあるものか知っている場合は、 `*` ではなく、常に特定の `targetOrigin` を指定してください。特定のターゲットを指定しないと、悪意のあるサイトに送信したデータが開示されてしまいます。**

`transfer` 省略可

メッセージと一緒に移譲される移譲可能オブジェクトのシーケンスです。これらのオブジェクトの所有権は送信先に移譲され、送信元では使えなくなります。

### 返値

なし (`undefined`)。

配信されるイベント
---------

`window` は以下の JavaScript を実行することで、配信されたメッセージを受け取ることができます。

```js
window.addEventListener(
  "message",
  (event) => {
    if (event.origin !== "http://example.org:8080") return;

    // …
  },
  false,
);
```

配信されたメッセージには、以下のプロパティがあります。

`data`

他のウィンドウから渡されたメッセージを保持しているオブジェクト。

`origin`

`postMessage` が呼び出されたときにメッセージを送るウィンドウのオリジン。この文字列は、プロトコルと "://"、ホスト名（存在する場合）、そして、":" の後に続くポート番号（既定のポートと指定したポートが異なる場合）が連結されたものです。典型的なオリジンの例は `https://example.org` (この場合のポートは `443`)、`http://example.net` (この場合のポートは `80`)、そして `http://example.com:8080`。このオリジン生成元はそのウィンドウの現在もしくは将来のオリジンであることを保証*していない*ことに注意してください。 `postMessage` が呼び出された時とは異なる場所に移動しているかもしれません。

`source`

メッセージを送った `window` オブジェクトへの参照。これを使うことでオリジンの異なる二つのウィンドウ間で双方向の通信を確立することができます。

セキュリティの考慮事項
-----------

**他のサイトからメッセージを受け取りたくない場合、`message` イベントに対して一切イベントリスナーを追加*しないでください***。これはセキュリティ的な問題を避けるための完全にフールプルーフな方法です。

他のサイトからメッセージを受け取りたい場合、`origin` あるいは `source` プロパティを用いて**常に送信者の識別情報を確かめてください**。任意のウィンドウ（例えば、`http://evil.example.com` も含む）は任意の他のウィンドウにメッセージを送ることができ、見知らぬ送信者が悪意あるメッセージを送らない保証はありません。識別情報を確かめたとしても、**常に受け取ったメッセージの構文を確かめる**べきです。そうしないと、信頼されたメッセージだけを送るとして信頼されたサイトにセキュリティホールが存在した場合に、クロスサイトスクリプティングのセキュリティホールをサイトに開けることになり得ます。

**他のウィンドウに `postMessage` でデータを送信する場合、 `*` ではなく、常に具体的なターゲットオリジンを指定してください**。悪意を持ったサイトはあなたの知らないうちに送信先ウィンドウの場所を変更することができ、そのまま `postMessage` で送信されたデータを傍受することができてしまいます。

### 安全な共有メモリーによるメッセージ

`postMessage()` が `SharedArrayBuffer` オブジェクトを扱った際にエラーが発生した場合は、サイトのサイト間分離を適切に行う必要があります。共有メモリーは、 2 つの HTTP ヘッダーの後ろにゲートされています。

* `Cross-Origin-Opener-Policy` で `same-origin` を値に指定する（オリジンを攻撃者から保護する）
* `Cross-Origin-Embedder-Policy` で `require-corp` を値に指定する（このオリジンから被害者を守る）

```http
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
```

オリジン間の分離が成功したかどうかを確認するには、ウィンドウとワーカーのコンテキストで利用できる `crossOriginIsolated` (en-US) プロパティを確認することで実現することができます。

```js
if (crossOriginIsolated) {
  // Post SharedArrayBuffer
} else {
  // Do something else
}
```

ブラウザー（例えば Firefox 79）に展開され始めている共有メモリーに関する変更予定もご覧ください。

例
-

```js
/\*
 \* http://example.com:8080 にある、window A のスクリプト:
 \*/

const popup = window.open(/\* ポップアップの詳細 \*/);

// ポップアップブロッカーでブロックされず、ポップアップが完全にロードされたとき

// ウィンドウがその場所を変更していない場合、これは何もしません。
popup.postMessage(
  "ユーザー名は 'bob' 、パスワードは 'secret' です",
  "https://secure.example.net",
);

// ウィンドウがその場所を変更していない場合、
//これはポップアップに送るメッセージのキューに追加します。
popup.postMessage("hello there!", "http://example.com");

window.addEventListener(
  "message",
  (event) => {
    // このメッセージの送信者は信頼している者か？（例えば、最初開いたものと違
    // うかもしれません）。
    if (event.origin !== "http://example.com") return;

    // event.source は popup
    // event.data は "hi there yourself! the secret response is: rheeeeet!"
  },
  false,
);
```

```js
/\*
 \* http://example.com で実行される popup のスクリプト:
 \*/

// postMessage が呼び出された後に呼び出されます。
window.addEventListener("message", (event) => {
  // このメッセージの送信者は信頼している者か？
  if (event.origin !== "http://example.com:8080") return;

  // event.source は window.opener
  // event.data は "hello there!"

  // 受け取ったメッセージのオリジンを確かめたい場合（どんな場合でもそうするべ
  // きです）、メッセージに返答するための便利なイディオムは event.source 上
  // の postMessage を呼び出し、targetOrigin に event.origin を指定すること
  // です。
  event.source.postMessage(
    "hi there yourself! the secret response " + "is: rheeeeet!",
    event.origin,
  );
});
```

メモ
--

任意のウィンドウが、いつでも、ウィンドウの文書の場所にかかわらず、メッセージを送るために、任意の他のウィンドウ上でこのメソッドにアクセスするかもしれません。従って、任意のイベントリスナーはメッセージを受け取る際に、`origin` あるいは `source` プロパティを用いて、まず最初にメッセージの送信者の識別情報をチェック**しなければなりません**。これを軽視することはできません。なぜなら、**`origin` あるいは `source` プロパティのチェックの失敗はクロスサイトスクリプティング攻撃を可能にする**からです。

非同期に配信されるスクリプト（タイムアウト、ユーザーが生成したイベント）のために `postMessage` の呼び出し元の判別が不可能であるとき、`postMessage` によって送られるイベントを待ち受けているイベントハンドラは例外を投げます。

`postMessage()` は `MessageEvent` を、*すべての待ち状態の実行コンテキストが終了した後のみ*配信するためにスケジューリングします。例えば、 `postMessage()` がイベントハンドラーから呼び出された場合、 `MessageEvent` が配信される前に、そのイベントハンドラーが最後まで実行され、同じイベントの残りのハンドラーが実行されます。

配信されるイベントの `origin` プロパティは呼び出すウィンドウの `document.domain` の現在の値に影響されません。

IDN ホスト名に限った話ですが、`origin` プロパティの値が Unicode と Punycode のどちらなのかは一貫していません。ですから、IDN サイトからのメッセージを期待する場合にこのプロパティを用いるときは、互換性を高めるために、IDN と Punycode の両方でチェックしてください。この値は最終的には 一貫して IDN になるはずですが、現在は IDN と Punycode 両方の形式を扱うべきです。

送信元ウィンドウが `javascript:` や `data:` のURLを持つ場合、`origin` プロパティの値はその URL を読み込んだスクリプトのオリジンになります。

### window.postMessage を拡張機能で使う
Non-standard

`window.postMessage` はクロームコード（拡張機能内および特権コード内）で実行される JavaScript で利用できます。しかし、配信されるイベントの `source` プロパティはセキュリティ上の制限から常に `null` です（他のプロパティは期待された値です）。

コンテンツスクリプトやウェブコンテキストスクリプトは `targetOrigin` を拡張機能 (バックグラウンドスクリプトやコンテンツスクリプト) と直接通信するために指定することはできません。ウェブやコンテンツのスクリプトは、 `window.postMessage` を `targetOrigin` を `"*"` にして使用することで、すべてのリスナーにブロードキャストすることができますが、これは拡張機能がそのようなメッセージのオリジンを特定することができないこと、他のリスナー (制御するべきでないものも含む) が待ち受けしている可能性があるため推奨されません。

コンテンツスクリプトでバックグラウンドスクリプトと通信したい場合は `runtime.sendMessage` を使うべきです。ウェブコンテキストスクリプトでバックグラウンドスクリプトと通信したい場合はカスタムイベント（ゲストページから覗かれなくない場合など、必要であればランダム生成したイベント名で）を使うことができます。

最後に、 `file:` URL のページへのメッセージを送るには `targetOrigin` 引数を `"*"` にする必要があります。 `file://` はセキュリティ上の制限のために用いることはできません、この制限は将来修正されるかもしれません。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-window-postmessage-options-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Document.domain`
* `CustomEvent`
* `BroadcastChannel` - 同一オリジンの通信用


Window.moveBy() - Web API

Window.moveBy()
===============

**`moveBy()`** は `Window` インターフェイスのメソッドで、現在のウィンドウを指定された量だけ移動します。

**メモ:** この関数はウィンドウを現在の位置からの相対位置で移動します。
 それに対して、 `window.moveTo()` はウィンドウを絶対位置へ移動します。

構文
--

```js
moveBy(deltaX, deltaY);
```

### 引数

* `deltaX` は、ピクセル数でウィンドウを水平方向に移動させる量を示します。正の値は右へ、負の値は左へ移動します。
* `deltaY` は、ピクセル数でウィンドウを垂直方向に移動させる量を示します。正の値は下方向、負の値は上方向です。
### 返値

なし (`undefined`)。

例
-

この例では、ウィンドウを右に 10 ピクセル、上に 10 ピクセル移動させています。

```js
function budge() {
  moveBy(10, -10);
}
```

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-window-moveby |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Firefox 7 より、ウェブサイトは以下の場合にブラウザーウィンドウを移動できなくなりました。

1. `Window.open()` で作成されたものではないウィンドウやタブを移動することはできません。
2. ウィンドウに複数のタブがある場合は、ウィンドウやタブを移動することができません。
関連情報
----

* `Window.moveTo()`


Window: orientationchange イベント - Web API

Window: orientationchange イベント
==============================

`orientationchange` イベントは、端末の向きが変化した時に発生します。

|  |  |
| --- | --- |
| バブリング | なし |
| キャンセル | 不可 |
| インターフェイス | `Event` |
| イベントハンドラー | `onorientationchange` |

例
-

`orientationchange` イベントは `addEventListener` メソッドで使用することができます。

```js
window.addEventListener("orientationchange", function () {
  console.log("端末の向きが " + screen.orientation.angle + "になりました。");
});
```

または、 `onorientationchange` イベントハンドラープロパティを使用します。

```js
window.onorientationchange = function () {
  console.log("端末の向きが " + screen.orientation.angle + "になりました。");
};
```

仕様書
---

| Specification |
| --- |
| Compatibility Standard # event-orientationchange |

ブラウザーの対応
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


window.self - Web API

window.self
===========

**`Window.self`** 読み取り専用プロパティは、`WindowProxy` のように、ウィンドウ自身を返します。`window` オブジェクトでドット表記法 (つまり、`window.self`) を使用して使うことも、単独 (`self`) で使うこともできます。単独表記法を使用する利点は、`Web Workers` のような非 window コンテクストにも同様の表記法が存在することです。`self` を使用することで、window コンテキスト (`self` は `window.self` として解決されます) だけでなく、worker コンテキスト (`self` は `WorkerGlobalScope.self` として解決されます) でも機能するようにグローバルスコープを参照できます。

構文
--
```

var w = window.self;  // w === window
```

例
-

次のような `window.self` の使い方は、`window` に置き換えることもできます。

```js
if (window.parent.frames[0] != window.self) {
  // このウィンドウは、一覧における一番最初のフレームではありません。
}
```

さらに、ブラウジングコンテクストのアクティブなドキュメントで実行するとき、`window` は現在のグローバルオブジェクトを参照するため、以下のものはすべて等価です:

```js
var w1 = window;
var w2 = self;
var w3 = window.window;
var w4 = window.self;
// w1, w2, w3, w4 は厳密に等価、しかし w2 だけは worker で動作します。
```

仕様
--

| Specification |
| --- |
| HTML Standard # dom-self-dev |

ブラウザー互換性
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連
--

* この `Worker` は `WorkerGlobalScope.self` と等しい。


Window.devicePixelRatio - Web API

Window.devicePixelRatio
=======================

**`devicePixelRatio`** は `Window` インターフェイスのプロパティで、現在のディスプレイ機器における CSS 解像度と物理解像度の比を返します。

これは 1 物理ピクセルの大きさに対する 1 CSS ピクセルの大きさの比率と考えることもできます。もっと簡単に言うと、 1 つの CSS ピクセルが実際にはいくつの物理ピクセルで表示されるかという値です。

これは一般的なディスプレイと、HiDPI (高 DPI) や Retina のように同じ大きさのオブジェクトを描画するのにより多くのピクセルを使って鮮明さを得ているディスプレイとの差異を扱うのに便利です。

`window.matchMedia()` を使うと、`devicePixelRatio` の値の変化（例えば、ユーザーが異なるピクセル解像度の画面へウィンドウをドラッグした時など）を検知することができます。後述の例を参照して下さい。

### 値

倍精度浮動小数点の値であり、 CSS ピクセル解像度に対するディスプレイの物理的なピクセル解像度の比率を表します。この値が 1 であることは、それが伝統的な 96 DPI (プラットフォームによっては 76 DPI) であることを意味し、2 であることは、HiDPI や Retina のディスプレイであると考えられます。それ以外の値が返されることもあり、それは一般的でない低解像度のディスプレイの場合や、より考えられるのはスクリーンが標準的な 96 または 76 DPI の解像度の単純な 2 倍よりも高いピクセル密度を持つ場合です。

例
-

### `<canvas>` の解像度の補正

Retina 画面では `<canvas>` がぼやけて見えることがあるでしょう。 `window.devicePixelRatio` を使うことで、鮮明に表示するために必要なピクセル密度を調べます。

#### HTML

```html
<canvas id="canvas"></canvas>
```

#### JavaScript

```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 表示サイズを設定（CSS におけるピクセル数です）。
const size = 200;
canvas.style.width = `${size}px`;
canvas.style.height = `${size}px`;

// メモリ上における実際のサイズを設定（ピクセル密度の分だけ倍増させます）。
const scale = window.devicePixelRatio; // Retina でこの値を 1 にするとぼやけた canvas になります
canvas.width = Math.floor(size \* scale);
canvas.height = Math.floor(size \* scale);

// CSS 上のピクセル数を前提としているシステムに合わせます。
ctx.scale(scale, scale);

ctx.fillStyle = "#bada55";
ctx.fillRect(10, 10, 300, 300);
ctx.fillStyle = "#ffffff";
ctx.font = "18px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";

const x = size / 2;
const y = size / 2;

const textString = "I love MDN";
ctx.fillText(textString, x, y);
```

![この画像は、Retina ディスプレイにおける異なる値の影響を表すものです。](/ja/docs/Web/API/Window/devicePixelRatio/devicepixelration_diff.jpg)

### 画面解像度や拡大率の変化の監視

この例では、`devicePixelRatio` の値をチェックして必要な変化に対処できるよう、メディアクエリーを設定して機器の解像度がいつ変化するかを監視します。

#### JavaScript

この JavaScript のコードは、機器の解像度を監視するメディアクエリーを作り、`devicePixelRatio` の値が変化したときはいつでもそれをチェックします。

```js
let pixelRatioBox = document.querySelector(".pixel-ratio");

const updatePixelRatio = () => {
  let pr = window.devicePixelRatio;
  let prString = (pr \* 100).toFixed(0);
  pixelRatioBox.innerText = `${prString}% (${pr.toFixed(2)})`;
  matchMedia(`(resolution: ${pr}dppx)`).addEventListener(
    "change",
    updatePixelRatio,
    { once: true },
  );
};

updatePixelRatio();
```

文字列 `mqString` は、メディアクエリーそのものになるように作ります。このメディアクエリーは、`(resolution: 1dppx)` (標準的なディスプレイの場合)、または `(resolution: 2dppx)` (HiDPI / Retina ディスプレイの場合) のような内容で始まり、現在のディスプレイ解像度のピクセルあたりのドット数が特定の数であるかをチェックします。

関数 `updatePixelRatio()` は、現在の `devicePixelRatio` の値を取得し、`pixelRatioBox` 要素の `innerText` に、その比率をパーセント値と小数第 2 位までの未加工の 10 進数の値の両方で表示する文字列を設定します。

そして、 `updatePixelRatio()` 関数が一度呼び出されて開始値を表示した後、 `matchMedia()` を用いてメディアクエリーを作成し、 `addEventListener()` が呼び出されて `updatePixelRatio()` が `change` イベントに対するハンドラーとして設定されます。

#### HTML

この HTML は、説明文を含むボックスと、現在のピクセル比率情報を表示する `pixel-ratio` ボックスを作成します。

```html
<div class="container">
  <div class="inner-container">
    <p>
      この使用例により、ページをズームまたはズームアウトすること
      (または異なる表示倍率の画面にページを移動させること) の
      <code>Window.devicePixelRatio</code> プロパティに与える影響がわかります。
      どのようなことが起こるか、試してみましょう！
    </p>
  </div>
  <div class="pixel-ratio"></div>
</div>
```

#### CSS

```css
body {
  font:
    22px arial,
    sans-serif;
}

.container {
  top: 2em;
  width: 22em;
  height: 14em;
  border: 2px solid #22d;
  margin: 0 auto;
  padding: 0;
  background-color: #a9f;
}

.inner-container {
  padding: 1em 2em;
  text-align: justify;
  text-justify: auto;
}

.pixel-ratio {
  position: relative;
  margin: auto;
  height: 1.2em;
  text-align: right;
  bottom: 0;
  right: 1em;
  font-weight: bold;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-window-devicepixelratio |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* メディアクエリー
* メディアクエリーの使用
* CSS の `resolution` メディア特性
* `image-resolution` プロパティ


Window.scrollBy() - Web API

Window.scrollBy()
=================

**`Window.scrollBy()`** メソッドは、ウィンドウ内の文書を指定された量だけスクロールさせます。

構文
--

```js
scrollBy(x_coord, y_coord);
scrollBy(options);
```

### 引数

* `x_coord` はスクロールさせたい水平方向のピクセル数です。
* `y_coord` はスクロールさせたい垂直方向のピクセル数です。

- または -

`options`

以下の引数を含む辞書です。

`top`

ウィンドウまたは要素をスクロールする Y 軸方向のピクセル数を指定します。

`left`

ウィンドウまたは要素をスクロールする X 軸方向のピクセル数を指定します。

`behavior`

スクロールを滑らかにアニメーションさせるか (`smooth`)、瞬時に一回のジャンプで行うか (`instant`)、あるいはブラウザーに選択させるか (`auto`, 既定値) を指定することができます。

### 返値

なし (`undefined`)。

例
-

1 ページ分下スクロールさせるには、次のようにします。

```js
window.scrollBy(0, window.innerHeight);
```

上スクロールさせるには、次のようにします。

```js
window.scrollBy(0, -window.innerHeight);
```

`options` を使用します。

```js
window.scrollBy({
  top: 100,
  left: 100,
  behavior: "smooth",
});
```

メモ
--

`window.scrollBy()` は特定の量だけスクロールしますが、 `window.scroll()` は文書内の絶対位置までスクロールします。 `window.scrollByLines()` および `window.scrollByPages()` も参照してください。

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-window-scrollby |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Window.showOpenFilePicker() - Web API

Window.showOpenFilePicker()
===========================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

`Window` インターフェイスの **`showOpenFilePicker()`** メソッドは、ユーザーが単一または複数のファイルを選択できるファイルピッカーを表示し、それらのファイルのハンドルを返します。

構文
--

```js
showOpenFilePicker()
```

### 引数

`options` 省略可

以下のオプションを含むオブジェクトです。

* `multiple`
    + : `boolean` 値で、デフォルトは `false` です。
     `true` に設定すると、複数のファイルを選択できるようになります。
* `excludeAcceptAllOption`
    + `boolean` 値で、デフォルトは `false` です。
     通常、ピッカーは (以下の `type` オプションに基づく) ファイル形式フィルターを何も適用しない選択肢を含むはずです。このオプションを `true` にすると、この選択肢を利用 *不可能* にします。
* `types`
    + : 選択可能なファイル形式の`配列`です。各項目は、以下のオプションを持つオブジェクトです。

    `description`

    選択可能なファイル形式のカテゴリーの説明で、省略可能です。

    `accept`

    キーを MIME タイプ、値をファイルの拡張子の`配列`とする `Object` です。(例は以下を参照してください)

### 返値

`FileSystemFileHandle` オブジェクトの`配列`で解決する `Promise` を返します。

### 例外

`AbortError`

ユーザーが選択せずにプロンプトを閉じた場合や、選択されたファイルがウェブサイトに開示するにはセンシティブであったり危険であったりするとみなされた場合、`AbortError` が投げられます。

セキュリティ
------

ユーザーによる一時的な有効化が必要です。この機能が動作するには、ユーザーがページまたは UI 要素を操作する必要があります。

例
-

このメソッドに渡すオプションオブジェクトを設定します。画像のファイル形式の選択を許可し、すべてのファイル形式の選択や複数ファイルの選択は許可しません。

```js
const pickerOpts = {
  types: [
    {
      description: "Images",
      accept: {
        "image/\*": [".png", ".gif", ".jpeg", ".jpg"],
      },
    },
  ],
  excludeAcceptAllOption: true,
  multiple: false,
};
```

そして、ファイルピッカーを表示して選択されたファイルを返す非同期の関数を作成できます。

```js
// ファイルハンドルへの参照を作成する
let fileHandle;

async function getFile() {
  // ファイルピッカーを開き、返される 1要素の配列を展開する
  [fileHandle] = await window.showOpenFilePicker(pickerOpts);

  // fileHandle を用いてコードを実行する
}
```

仕様書
---

| Specification |
| --- |
| File System Access # api-showopenfilepicker |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files


window.forward - Web API

window.forward
==============

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

 **非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

概要
--

ウィンドウの文書の履歴のひとつ分だけ前へ進めます。これは Firefox 固有のメソッドであり、Firefox 31 で削除しました。代わりに、標準の `window.history.forward()` メソッドを使用してください。

構文
--
```

window.forward();
```

### 引数

ありません。

### 戻り値

`undefined` です。

例
-

```js
function goForward() {
  if (canGoForward) {
    window.forward();
  }
}
```

仕様
--

どの仕様にも属していません。

ブラウザー実装状況
---------

この非標準メソッドは Firefox だけが実装しており、Firefox 31 で削除しました。

関連情報
----

* `History.back()`
* `History.forward()`


Window.speechSynthesis - Web API

Window.speechSynthesis
======================

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

Window オブジェクトの `speechSynthesis` 読み取り専用プロパティは、`SpeechSynthesis` オブジェクトを返します。これは、Web Speech API の音声合成機能を使用するためのエントリーポイントです。

構文
--

```js
var synth = window.speechSynthesis;
```

### 値

`SpeechSynthesis` オブジェクト。

例
-

私たちの基本的な 音声合成のデモ では、最初に `window.speechSynthesis` を使用して SpeechSynthesis コントローラーへの参照を取得します。いくつかの必要な変数を定義した後、`SpeechSynthesis.getVoices()` (en-US) を使用して利用可能な音声のリストを取得し、それらの選択メニューを構成します。ユーザーは、そこから使用したい音声を選べます。

`inputForm.onsubmit` ハンドラー内部では、preventDefault() でフォーム送信を停止し、テキスト `<input>` に入力されたテキストを含む新しい `SpeechSynthesisUtterance` インスタンスを作成します。その発声 (utterance) にユーザーが `<select>` 要素で選択した音声を設定し、`SpeechSynthesis.speak()` (en-US) メソッドを通して発声の発話を開始します。

```js
var synth = window.speechSynthesis;

var inputForm = document.querySelector("form");
var inputTxt = document.querySelector("input");
var voiceSelect = document.querySelector("select");

function populateVoiceList() {
  voices = synth.getVoices();

  for (i = 0; i < voices.length; i++) {
    var option = document.createElement("option");
    option.textContent = voices[i].name + " (" + voices[i].lang + ")";

    if (voices[i].default) {
      option.textContent += " -- DEFAULT";
    }

    option.setAttribute("data-lang", voices[i].lang);
    option.setAttribute("data-name", voices[i].name);
    voiceSelect.appendChild(option);
  }
}

populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
  speechSynthesis.onvoiceschanged = populateVoiceList;
}

inputForm.onsubmit = function (event) {
  event.preventDefault();

  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  var selectedOption = voiceSelect.selectedOptions[0].getAttribute("data-name");
  for (i = 0; i < voices.length; i++) {
    if (voices[i].name === selectedOption) {
      utterThis.voice = voices[i];
    }
  }
  synth.speak(utterThis);
  inputTxt.blur();
};
```

仕様
--

| Specification |
| --- |
| Web Speech API # tts-section |

ブラウザーの実装状況
----------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連項目
----

* Web Speech API


Window: vrdisplaypresentchange イベント - Web API

Window: vrdisplaypresentchange イベント
===================================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`vrdisplaypresentchange`** は WebVR API のイベtので、 VR 機器の表示状態が変化したときに発行されます。つまり、表示状態から非表示になったとき、あるいはその逆のケースです。

**メモ:** このイベントは古い WebVR API の一部でした。これは WebXR 機器 API に置き換えられました。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("vrdisplaypresentchange", (event) => {});

onvrdisplaypresentchange = (event) => {};
```

イベント型
-----

`VRDisplayEvent` です。 `Event` を継承しています。

イベントプロパティ
---------

*`VRDisplayEvent` は親オブジェクトである `Event` からプロパティを継承しています。*

`VRDisplayEvent.display`
非推奨
 読取専用

このイベントに関連付けられた `VRDisplay` です。

`VRDisplayEvent.reason`
非推奨
 読取専用

このイベントが発生した理由を人間可読な形で示します。

例
-

`vrdisplaypresentchange` イベントは `addEventListener` メソッドで使用することができます。

```js
window.addEventListener("vrdisplaypresentchange", () => {
  info.textContent = vrDisplay.isPresenting
    ? "Display has started presenting."
    : "Display has stopped presenting.";
  reportDisplays();
});
```

または、 `onvrdisplaypresentchange` イベントハンドラープロパティを使用してください。

```js
window.onvrdisplaypresentchange = () => {
  info.textContent = vrDisplay.isPresenting
    ? "Display has started presenting."
    : "Display has stopped presenting.";
  reportDisplays();
};
```

仕様書
---

このイベントは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

すべてのブラウザーが新しい WebXR Device API を実装するまで、 A-Frame、Babylon.js、Three.js などのフレームワークを使用するか、ポリフィルを使用することが、すべてのブラウザーで動作する WebXR アプリを開発する上で推奨されます。[1]

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* WebVR API


Window: afterprint イベント - Web API

Window: afterprint イベント
=======================

**`afterprint`** イベントは、関連する文書の印刷が開始されたか、印刷プレビューが閉じた後に発生します。

|  |  |
| --- | --- |
| バブリング | いいえ |
| キャンセル | 不可 |
| インターフェイス | `Event` |
| イベントハンドラープロパティ | `onafterprint` |

例
-

`addEventListener()` の使用例:

```js
window.addEventListener("afterprint", (event) => {
  console.log("After print");
});
```

`onafterprint` イベントハンドラープロパティの使用例:

```js
window.onafterprint = (event) => {
  console.log("After print");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-afterprint |
| HTML Standard # handler-window-onafterprint |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 関連イベント: `beforeprint`


Window: load イベント - Web API

Window: load イベント
=================

**`load`** イベントは、ページ全体が、スタイルシートや画像などのすべての依存するリソースを含めて読み込まれたときに発生します。
 これは `DOMContentLoaded` が、ページの DOM の読み込みが完了すれば、リソースの読み込みが完了するのを待たずに発生するのと対照的です。

このイベントはキャンセル不可で、バブリングしません。

**メモ:** たとえ `bubbles` が `true` に初期化されていても、 `load` という名前のイベントはすべて `window` に伝搬しません。 `window` 上で `load` イベントを捕捉するには、 `load` イベントを直接 `window` に配信する必要があります。

**メモ:** メイン文書が読み込まれたときに配信される `load` イベントは `window` に配信されますが、 2 つのプロパティが変更されています。 `target` は `document` であり、`path` は `undefined` です。これら 2 つのプロパティは過去との互換性のために変更されています。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("load", (event) => {});

onload = (event) => {};
```

イベント型
-----

一般的な `Event` です。

例
-

ページが完全に読み込まれたときに、メッセージを記録します。

```js
window.addEventListener("load", (event) => {
  console.log("ページが完全に読み込まれました");
});
```

同じですが、 `onload` イベントハンドラープロパティの場合です。

```js
window.onload = (event) => {
  console.log("page is fully loaded");
};
```

### ライブデモ

#### HTML

```html
<div class="controls">
  <button id="reload" type="button">Reload</button>
</div>

<div class="event-log">
  <label for="eventLog">Event log:</label>
  <textarea
 readonly
 class="event-log-contents"
 rows="8"
 cols="30"
 id="eventLog"></textarea>
</div>
```

```
body {
  display: grid;
  grid-template-areas: "control log";
}

.controls {
  grid-area: control;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-log {
  grid-area: log;
}

.event-log-contents {
  resize: none;
}

label,
button {
  display: block;
}

#reload {
  height: 2rem;
}
```

#### JavaScript

```js
const log = document.querySelector(".event-log-contents");
const reload = document.querySelector("#reload");

reload.addEventListener("click", () => {
  log.textContent = "";
  setTimeout(() => {
    window.location.reload(true);
  }, 200);
});

window.addEventListener("load", (event) => {
  log.textContent += "load\n";
});

document.addEventListener("readystatechange", (event) => {
  log.textContent += `readystate: ${document.readyState}\n`;
});

document.addEventListener("DOMContentLoaded", (event) => {
  log.textContent += `DOMContentLoaded\n`;
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| UI Events # event-type-load |
| HTML Standard # delay-the-load-event |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 文書 readyState API
* 関連イベント:
    + `DOMContentLoaded`
    + `readystatechange`
    + `beforeunload`
    + `unload`


Window.frames - Web API

Window.frames
=============

ウィンドウ自体を、現在のウィンドウの直接のサブフレームを列挙した配列風オブジェクトとして返します。

構文
--
```

frameList = window.frames;
```

* `frameList` は、フレームオブジェクトのリストを返します。これは配列と似ており、 `length` プロパティを持ち、要素に `[i]` 表記を使ってアクセスできます。
* `frameList === window` は真と評価されます。
* window.frames 擬似配列の各要素は `Window` オブジェクトであり、 `<frame>` または `<iframe>` の内容に対応します。 (i)frame の DOM 要素ではありません (つまり `window.frames[0]` は `document.getElementsByTagName("iframe")[0].contentWindow` と同じことです)。
* 返値についての詳細は、 mozilla.dev.platform のスレッドを参照してください。
例
-

```js
var frames = window.frames; // or // var frames = window.parent.frames;
for (var i = 0; i < frames.length; i++) {
  // frames[i] で各サブフレームに何らかの処理をします
  frames[i].document.body.style.background = "red";
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-frames-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Window.find() - Web API

Window.find()
=============

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**メモ:** `Window.find()` の対応は、 Gecko の将来のバージョンで変更される可能性があります。 Firefox バグ 672395 を参照してください。

**`Window.find()`** メソッドは、ウィンドウ内の文字列を順次検索します。

構文
--

```js
find(
  aString,
  aCaseSensitive,
  aBackwards,
  aWrapAround,
  aWholeWord,
  aSearchInFrames,
  aShowDialog,
);
```

### 引数

`aString`

検索するテキスト文字列です。

`aCaseSensitive`

論理値です。 `true` の場合、大文字と小文字を区別して検索します。

`aBackwards`

論理値です。 `true` の場合、後方検索を行います。

`aWrapAround`

論理値です。 `true` の場合、折り返し検索を行います。

`aWholeWord` 未実装

論理値です。 `true` の場合、完全一致検索を行います。これは実装されていません。 Firefox バグ 481513 を参照してください。

`aSearchInFrames`

論理値です。 `true` の場合、フレーム内の検索を行います。

### 返値

文字列が見つかったら `true` です。それ以外の場合は `false` です。

例
-

### JavaScript

```js
function findString(text) {
  document.querySelector("#output").textContent =
    "String found? " + window.find(text);
}
```

### HTML

```html
<p>Apples, Bananas, and Oranges.</p>
<button type="button" onClick='findString("Apples")'>Search for Apples</button>
<button type="button" onClick='findString("Bananas")'>
  Search for Bananas
</button>
<button type="button" onClick='findString("Orange")'>Search for Orange</button>

<p id="output"></p>
```

### 結果

メモ
--

一部のブラウザーでは、 `Windows.find()` はサイト内で見つかったコンテンツを選択（強調表示）します。

仕様書
---

どの仕様書にも含まれていません。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Window.getSelection() - Web API

Window.getSelection()
=====================

**`Window.getSelection()`** メソッドは、ユーザーが選択した文字列の範囲やキャレットの現在位置を示す `Selection` オブジェクトを返します。

構文
--

```js
getSelection();
```

### 引数

なし。

### 返値

A `Selection` オブジェクト。

文字列へ型変換すると、空の文字列 (`""`) を追加するか `Selection.toString()` (en-US) を使って、選択された文字列を返します。

表示されていない `<iframe>` に対して呼び出された場合（例えば `display: none` が設定されている場合）、 Firefox は `null` を、他のブラウザーは `None` を設定した `Selection.type` (en-US) オブジェクトを返します。

例
-

```js
function foo() {
  const selObj = window.getSelection();
  alert(selObj);
  const selRange = selObj.getRangeAt(0);
  // 以下、取得した選択文字列に対して何らかの処理を行う
}
```

メモ
--

### Selection オブジェクトの文字列表現

JavaScript では、文字列が渡されることを前提としている関数 (`window.alert()` や `document.write()`) にオブジェクトが渡されると、そのオブジェクトの `toString()` メソッドが呼び出され、その結果が関数へ渡されます。このため、実際はプロパティとメソッドを持つオブジェクトなのに、文字列であるかのように見えてしまいます。

上の例では、 `selObj.toString()` が `window.alert()` へ渡されるときに自動的に呼び出されます。しかし、 JavaScript の String のプロパティや、 `length`、`substr` などのメソッドを直接 `Selection` オブジェクトに対して使おうとすると、オブジェクトにその名前のプロパティやメソッドが存在しないはエラーとなり、存在する場合は予期せぬ結果を返すでしょう。 `Selection` オブジェクトを文字列として使うなら、下記のように `toString()` メソッドを呼び出してください。

```js
const selectedText = selObj.toString();
```

* `selObj` は `Selection` オブジェクトです。
* `selectedText` は文字列です。 (選択された文字列)
### 関連オブジェクト

同じように機能する `Document.getSelection()` を呼び出すことができます。

現在 `getSelection()` は Firefox、Edge (旧)、Internet Explorer では、 `<textarea>` と `<input>` 要素の内容に対して動作しないことは知っておくとよいでしょう。`HTMLInputElement.setSelectionRange()` または `selectionStart` と `selectionEnd` プロパティを使用すると、この問題を回避することができます。

*選択* と *フォーカス* の違いに注意してください。`Document.activeElement` はフォーカスされた要素を返します。

仕様書
---

| Specification |
| --- |
| Selection API # dom-window-getselection |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 選択 API
* `Selection`
* `Range`
* `Document.getSelection()`
* `HTMLInputElement.setSelectionRange()`


Window: resize イベント - Web API

Window: resize イベント
===================

**`resize`** イベントは、この文書のビュー (ウィンドウ) の大きさが変更されたときに発行されます。

|  |  |
| --- | --- |
| バブリング | なし |
| キャンセル | 不可 |
| インターフェイス | `UIEvent` |
| イベントハンドラープロパティ | `onresize` |

一部の初期のブラウザーでは、 `resize` イベントのハンドラーをすべての HTML 要素に設定することができました。現在でも `onresize` 属性や `addEventListener()` を使用して、どの要素にもハンドラーを設定することができます。しかし、 `resize` イベントは `window` オブジェクト (すなわち `document.defaultView` で返されるもの) でのみ発行されます。 `window` オブジェクトに登録されたハンドラーのみが、 `resize` イベントを受け取ります。

すべての要素が大きさの変更を通知できるようにする提案があります。 Resize Observer で草稿のドキュメントを、 GitHub issue で進行中の議論を読むことができます。

例
-

### ウィンドウの大きさのログ出力

以下の例では、ウィンドウの大きさが変更されるたびに報告を出力します。この例は `<iframe>` 内で実行されているので、効果を見る前に実際に `<iframe>` の大きさを変更する必要があることを覚えておいてください。

```html
<p>
  ブラウザーウィンドウを変更すると <code>resize</code> イベントを発行します。
</p>
<p>ウィンドウの高さ: <span id="height"></span></p>
<p>ウィンドウの幅: <span id="width"></span></p>
```

```js
const heightOutput = document.querySelector("#height");
const widthOutput = document.querySelector("#width");

function reportWindowSize() {
  heightOutput.textContent = window.innerHeight;
  widthOutput.textContent = window.innerWidth;
}

window.onresize = reportWindowSize;
```

### addEventListener による同等の実装

イベントハンドラーを設定するために `addEventListener()` メソッドを使用することもできます。

```js
window.addEventListener("resize", reportWindowSize);
```

仕様書
---

| Specification |
| --- |
| CSSOM View Module # eventdef-window-resize |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `GlobalEventHandlers.onresize`


Window: storage イベント - Web API

Window: storage イベント
====================

**`storage`** イベントは、保存領域 (`localStorage`) が変更されたときに発生します。詳しくはウェブストレージ API をご覧ください。

**メモ:** これは変更を行ったのと同じページでは動作しません。本来、これは同じ保存領域を使用している同じドメインの他のページが更新を同期するための仕組みです。他のドメインのページは、同じ保存領域オブジェクトにはアクセスできません。

構文
--

このイベント名を `addEventListener()` などのメソッドで使うか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("storage", (event) => {});
onstorage = (event) => {};
```

イベント型
-----

`StorageEvent` です。 `Event` を継承しています。

Event

StorageEventイベントプロパティ
---------

`key` (en-US) 読取専用

 変更されたキーを表す文字列を返します。
 変更が発生したのがこのストレージの `clear()` メソッドによるものであれば、 `key` 属性は `null` になります。

`newValue` (en-US) 読取専用

`key` の新しい値を文字列で返します。
 このストレージの `clear()` メソッドが呼び出されたり、その `key` がストレージから削除されたりして変更が行われた場合は、この値は `null` になります。

`oldValue` (en-US) 読取専用

`key` の元の値を文字列で返します。
 その `key` が新しく追加されたものであるため、以前の値が存在しない場合は、この値は `null` になります。

`storageArea` (en-US) 読取専用

変更が行われたストレージを表す `Storage` オブジェクトを返します。

`url` (en-US) 読取専用

`key` を変更した文書の URL を文字列で返します。

イベントハンドラーの別名
------------

`Window` インターフェイスに加え、イベントハンドラープロパティ `onstorage` は以下のターゲットでも利用可能です。

* `HTMLBodyElement`
* `HTMLFrameSetElement` (en-US)
* `SVGSVGElement` (en-US)
例
-

`storage` イベントが発生した時、項目 `sampleList` をコンソールに記録します。

```js
window.addEventListener("storage", () => {
  // ローカルストレージが変更された時、
  // リストをコンソールに書き出す。
  console.log(JSON.parse(window.localStorage.getItem("sampleList")));
});
```

`onstorage` イベントハンドラープロパティを用いても、同じことができます。

```js
window.onstorage = () => {
  // ローカルストレージが変更された時、
  // リストをコンソールに書き出す。
  console.log(JSON.parse(window.localStorage.getItem("sampleList")));
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-storage |
| HTML Standard # handler-window-onstorage |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブストレージ API
* ウェブストレージ API の使用
* StorageEvent を使用してストレージの変更に反応する


window.frameElement - Web API

window.frameElement
===================

（`<iframe>` や `<object>` のような）ウィンドウが埋め込まれた要素を返します。要素がトップレベルであるか異なるスクリプト生成元をもつ文書に埋め込まれるかのいずれかの場合は、 `null` を返します。

構文
--
```

frameEl = window.frameElement;
```

* `frameEl` は、ウィンドウが埋め込まれた要素です。ウィンドウが別の文書に埋め込まれていない場合、または埋め込まれている文書が異なる生成元を持つ（例えば異なるドメインから設置されている）場合、これは `null` になります。

**メモ:** このプロパティの名前にもかかわらず、これは`<object>`、`<iframe>`、または <embed>を含むすべての埋め込みポイント内に埋め込まれた文書の役に立ちます。

例
-

```js
var frameEl = window.frameElement;
// 埋め込みの場合、要素の URL が 'http://mozilla.org/' に変わります。
if (frameEl) {
  frameEl.src = "http://mozilla.org/";
}
```

仕様
--

| Specification |
| --- |
| HTML Standard # dom-frameelement-dev |

ブラウザー互換性
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連項目
----

* `window.frames` は、現在のウィンドウの直接のサブフレームを一覧する、配列のようなオブジェクトを返します。
* `window.parent` は、子ウィンドウの`frameElement`を含むウィンドウである、親ウィンドウを返します。


Window.screenX - Web API

Window.screenX
==============

**`Window.screenX`** は読み取り専用のプロパティで、ユーザーのブラウザーのビューポートから画面の左端までの水平距離を CSS ピクセル数で返します。

**メモ:** `screenX` の別名である `Window.screenLeft` (en-US) が、最近は新しいブラウザー間で実装されていました。これはもともと IE のみが対応していましたが、有名であるためあらゆる場所で導入されています。

構文
--

```js
leftWindowPos = window.screenX;
```

### 返値

ブラウザーのビューポートの左端から画面の左端までの CSS ピクセル数に等しい数値です。

例
-

screenleft-screentop (ソースコード) の例では、円が描かれたキャンバスを見ることができます。この例では、 `Window.screenLeft` (en-US)/`Window.screenTop` (en-US) に加えて `Window.requestAnimationFrame()` を使用することで、ウィンドウの位置を移動しても画面上の一定の物理的な位置に円を描き続けます。

```js
initialLeft = window.screenLeft + canvasElem.offsetLeft;
initialTop = window.screenTop + canvasElem.offsetTop;

function positionElem() {
  let newLeft = window.screenLeft + canvasElem.offsetLeft;
  let newTop = window.screenTop + canvasElem.offsetTop;

  let leftUpdate = initialLeft - newLeft;
  let topUpdate = initialTop - newTop;

  ctx.fillStyle = "rgb(0, 0, 0)";
  ctx.fillRect(0, 0, width, height);
  ctx.fillStyle = "rgb(0, 0, 255)";
  ctx.beginPath();
  ctx.arc(
    leftUpdate + width / 2,
    topUpdate + height / 2 + 35,
    50,
    degToRad(0),
    degToRad(360),
    false,
  );
  ctx.fill();

  pElem.textContent =
    "Window.screenLeft: " +
    window.screenLeft +
    ", Window.screenTop: " +
    window.screenTop;

  window.requestAnimationFrame(positionElem);
}

window.requestAnimationFrame(positionElem);
```

これは `screenX`/`screenY` でもまったく同じように動作します。

 また、このコードでは `screenLeft` に対応しているかどうかを検出するスニペットが入っており、対応していない場合は `screenLeft`/`screenTop` を
 `screenX`/`screenY` で代替するようになっています。

```js
if (!window.screenLeft) {
  window.screenLeft = window.screenX;
  window.screenTop = window.screenY;
}
```

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-window-screenx |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `window.screenLeft` (en-US)
* `Window.screenY`


Window: copy イベント - Web API

Window: copy イベント
=================

**`copy`** イベントは、ユーザーがブラウザーのユーザーインターフェイスからコピー操作を実行したときに発生します。

|  |  |
| --- | --- |
| バブリング | あり |
| キャンセル | 可 |
| インターフェイス | `ClipboardEvent` |
| イベントハンドラープロパティ | `oncopy` |

このイベントの本来の対象は、コピー操作の意図の対象である `Element` です。このイベントを `Window` インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントの局面について完全な詳細は、 Element: copy イベントを参照してください。

例
-

```js
window.addEventListener("copy", (event) => {
  console.log("copy action initiated");
});
```

仕様書
---

| Specification |
| --- |
| Clipboard API and events # clipboard-event-copy |
| HTML Standard # handler-oncopy |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 関連イベント: `cut`, `paste`
* `Element` を対象としたこのイベント: `copy`
* `Document` を対象としたこのイベント: `copy`


Window.resizeTo() - Web API

Window.resizeTo()
=================

**`Window.resizeTo()`** メソッドは、ウィンドウのサイズを動的に変更します。

構文
--

```js
resizeTo(width, height);
```

### 引数

`width`

整数で、新しい `outerWidth` （スクロールバーやタイトルバーなどを含む大きさ）をピクセル数で表します。

`height`

整数で、新しい `outerHeight` （スクロールバーやタイトルバーなどを含む大きさ）をピクセル数で表します。

### 返値

なし (`undefined`)。

例
-

この関数は、利用可能な画面の 1/4 を占めるようにウィンドウをリサイズします。 `Screen.availWidth` および `Screen.availHeight` プロパティを参照してください。

```js
function quarter() {
  window.resizeTo(window.screen.availWidth / 2, window.screen.availHeight / 2);
}
```

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-window-resizeto |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

注: **`window.open()`** によって作成されていないウィンドウまたはタブのサイズを変更することはできません。また、ウィンドウに複数のタブがある場合、サイズを変更することはできません。

関連情報
----

* `window.resizeBy()`


Window: message イベント - Web API

Window: message イベント
====================

`message` は `Window` オブジェクトのイベントで、ウィンドウが例えば他の閲覧コンテキストからの `Window.postMessage()` の呼び出しによってメッセージを受け取った時に発生します。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("message", (event) => {});

onmessage = (event) => {};
```

イベント型
-----

`MessageEvent` です。 `Event` を継承しています。

Event

MessageEventイベントプロパティ
---------

*このインターフェイスは親である `Event` からプロパティを継承しています。*

`MessageEvent.data` 読取専用

メッセージ送信元によって送信されたデータです。

`MessageEvent.origin` 読取専用

文字列で、メッセージ送信元のオリジンを表します。

`MessageEvent.lastEventId` 読取専用

文字列で、このイベントの一意の ID を表します。

`MessageEvent.source` 読取専用

`MessageEventSource` （`WindowProxy`、`MessagePort`、`ServiceWorker` の何れかのオブジェクト）で、メッセージの送信元を表します。

`MessageEvent.ports` 読取専用

`MessagePort` オブジェクトの配列で、メッセージが送信されるチャンネルに関連するポートを表します（チャンネルメッセージングや、共有ワーカーにメッセージを送信する場合など、適切な場合）。

例
-

あるスクリプトが、次のようなコードを使用して、別の `<iframe>` のような異なる閲覧コンテキストにメッセージを送信するとします。

```js
const targetFrame = window.top.frames[1];
const targetOrigin = "https://example.org";
const windowMessageButton = document.querySelector("#window-message");

windowMessageButton.addEventListener("click", () => {
  targetFrame.postMessage("hello there", targetOrigin);
});
```

受信側は、以下のようなコードで `addEventListener()` を使用し、メッセージを待ち受けることができます。

```js
window.addEventListener("message", (event) => {
  console.log(`Received message: ${event.data}`);
});
```

他にも、リスナーは `onmessage` イベントハンドラープロパティを使用することもできます。

```js
window.onmessage = (event) => {
  console.log(`Received message: ${event.data}`);
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-message |
| HTML Standard # handler-window-onmessage |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 関連イベント: `messageerror`
* `Window.postMessage()`


Window: messageerror イベント - Web API

Window: messageerror イベント
=========================

`messageerror` イベントは、解読できないメッセージを受け取った時に `Window` オブジェクトに発生します。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("messageerror", (event) => {});

onmessageerror = (event) => {};
```

イベント型
-----

`MessageEvent` です。 `Event` を継承しています。

Event

MessageEventイベントプロパティ
---------

*このインターフェイスは親である `Event` からプロパティを継承しています。*

`MessageEvent.data` 読取専用

メッセージ送信元によって送信されたデータです。

`MessageEvent.origin` 読取専用

文字列で、メッセージ送信元のオリジンを表します。

`MessageEvent.lastEventId` 読取専用

文字列で、このイベントの一意の ID を表します。

`MessageEvent.source` 読取専用

`MessageEventSource` （`WindowProxy`、`MessagePort`、`ServiceWorker` の何れかのオブジェクト）で、メッセージの送信元を表します。

`MessageEvent.ports` 読取専用

`MessagePort` オブジェクトの配列で、メッセージが送信されるチャンネルに関連するポートを表します（チャンネルメッセージングや、共有ワーカーにメッセージを送信する場合など、適切な場合）。

例
-

`messageerror` を `addEventListener()` で待ち受けします。

```js
window.addEventListener("messageerror", (event) => {
  console.error(event);
});
```

同じもので、 `onmessageerror` イベントハンドラープロパティを使用したものです。

```js
window.onmessageerror = (event) => {
  console.error(event);
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-messageerror |
| HTML Standard # handler-window-onmessageerror |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Window.postMessage()`
* 関連イベント: `message`


Window.moveTo() - Web API

Window.moveTo()
===============

**`moveTo()`** は `Window` インターフェイスのメソッドで、現在のウィンドウを指定された座標へ移動します。

**メモ:** この関数はウィンドウを絶対位置へ移動します。それに対して、 `window.moveBy()` はウィンドウを現在の位置からの相対位置へ移動します。

構文
--

```js
moveTo(x, y);
```

### 引数

* `x` は移動先の水平座標です。
* `y` は移動先の垂直座標です。
### 返値

なし (`undefined`)。

例
-

この例では、ウィンドウを画面の左上に移動しています。

```js
function origin() {
  window.moveTo(0, 0);
}
```

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-window-moveto |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Firefox 7 より、ウェブサイトは以下の場合にブラウザーウィンドウを移動できなくなりました。

1. `Window.open()` で作成されたものではないウィンドウやタブを移動することはできません。
2. ウィンドウに複数のタブがある場合は、ウィンドウやタブを移動することができません。
関連情報
----

* `Window.moveBy()`


Window.scrollMaxY - Web API

Window.scrollMaxY
=================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`Window.scrollMaxY`** は読み取り専用プロパティで、文書が縦方向にスクロールできる最大ピクセル数を返します。

構文
--

```js
yMax = window.scrollMaxY;
```

* `yMax` はピクセル数です。
例
-

```js
// ページの下端までスクロールする
let maxY = window.scrollMaxY;

window.scrollTo(0, maxY);
```

注
-

このプロパティを、文書の全体の高さを取得するためには使用しないでください。これは `window.innerHeight` + window.scrollMaxY とは等しくありません。これは `window.innerHeight` には表示中の水平スクロールバーがすべて含まれるからであり、結果は文書の幅よりすべての表示中の水平スクロールバーの幅だけ大きくなります。代わりに `document.body.scrollHeight` を使用してください。 `window.scrollMaxX` および `window.scrollTo` も参照してください。

仕様書
---

どの仕様書にも含まれていません。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Window.print() - Web API

Window.print()
==============

現在の文書を印刷するための印刷ダイアログを開きます。

この関数が呼び出されたとき、文書がまだ読み込み中であった場合、文書は印刷ダイアログを開く前に読み込みを終了します。

このメソッドは、印刷ダイアログが開いている間、ブロックされます。

構文
--

```js
print();
```

### 引数

なし。

### 返値

なし (`undefined`)。

仕様書
---

| Specification |
| --- |
| HTML Standard # printing |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 印刷
* `beforeprint` イベント
* `afterprint` イベント


Window: error イベント - Web API

Window: error イベント
==================

`error` イベントは、リソースの読み取りに失敗したり、使用できなかったりした場合 — 例えば、スクリプトに実行エラーがあった場合に `Window` オブジェクトに発生します。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("error", (event) => {});

onerror = (event, source, lineno, colno, error) => {};
```

**メモ:** 歴史的な理由により、 `window` の `onerror` はイベントハンドラープロパティの中で唯一、複数の引数を受け取ります。

イベント型
-----

イベントオブジェクトは、ユーザーインターフェイス要素から生成された場合は `ErrorEvent` インスタンスであり、そうでない場合は `Event` インスタンスです。

Event

ErrorEvent使用上の注意
------

### イベントハンドラープロパティ

歴史的な理由から、 `onerror` イベントハンドラープロパティは `Window` オブジェクトに対してのみ、他のイベントハンドラープロパティとは異なる動作をします。

これは `onerror` に割り当てられたハンドラーにのみ適用され、 `addEventListener()` を使用して追加したハンドラーには適用されないことに注意してください。

#### キャンセル

イベントハンドラープロパティに割り当てられたほとんどのイベントハンドラーでは、ハンドラーから `false` を返すことで、イベントの既定値の動作を取り消すことができます。

```js
textarea.onkeydown = () => false;
```

しかし、 `Window` の `error` イベントの既定の動作をイベントハンドラープロパティから取り消すためには、代わりに `true` を返す必要があります。

```js
window.onerror = () => true;
```

取り消された場合、エラーはコンソールに現れませんが、現在のスクリプトの実行は停止します。

#### 引数

イベントハンドラーのシグネチャは `addEventListener()` と `onerror` で異なります。 `Window.addEventListener()` に渡されるイベントハンドラーは、単一の `ErrorEvent` オブジェクトを受け取りますが、 `onerror` ハンドラーは `ErrorEvent` オブジェクトのプロパティと一致する 5 つの引数を受け取ります：

`event`

文字列で、関数を説明する人間が読むのに適したエラーメッセージが入ります。 `ErrorEvent.message` と同じです。

`source`

文字列で、エラーが発生したスクリプトファイルの名前が入ります。

`lineno`

整数で、エラーが発生したスクリプトファイルの行番号が入ります。

`colno`

整数で、エラーが発生したスクリプトファイルの列番号が入ります。

`error`

発生したエラーです。ふつうは `Error` オブジェクトです。

```js
window.onerror = (a, b, c, d, e) => {
  console.log(`message: ${a}`);
  console.log(`source: ${b}`);
  console.log(`lineno: ${c}`);
  console.log(`colno: ${d}`);
  console.log(`error: ${e}`);

  return true;
};
```

**メモ:** これらの引数名は HTML イベントハンドラー属性で監視可能で、最初の引数は `message` ではなく `event` と呼ばれます。

この特別な動作は `window` の `onerror` イベントハンドラーに対してのみ起こります。 `Element.onerror` ハンドラーの場合は単一の `ErrorEvent` オブジェクトを受け取ります。

例
-

### ライブデモ

#### HTML

```html
<div class="controls">
  <button id="script-error" type="button">Generate script error</button>
  <img class="bad-img" />
</div>

<div class="event-log">
  <label for="eventLog">Event log:</label>
  <textarea
 readonly
 class="event-log-contents"
 rows="8"
 cols="30"
 id="eventLog"></textarea>
</div>
```

```
body {
  display: grid;
  grid-template-areas: "control log";
}

.controls {
  grid-area: control;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-log {
  grid-area: log;
}

.event-log-contents {
  resize: none;
}

label,
button {
  display: block;
}

button {
  height: 2rem;
  margin: 0.5rem;
}

img {
  width: 0;
  height: 0;
}
```

#### JS

```js
const log = document.querySelector(".event-log-contents");

window.addEventListener("error", (event) => {
  log.textContent = `${log.textContent}${event.type}: ${event.message}\n`;
  console.log(event);
});

const scriptError = document.querySelector("#script-error");
scriptError.addEventListener("click", () => {
  const badCode = "const s;";
  eval(badCode);
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # event-error |
| HTML Standard # handler-onerror |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Element` を対象としたこのイベント: `error` イベント


Window.releaseEvents() - Web API

Window.releaseEvents()
======================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

 **非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

このウィンドウが指定された種類のイベントを捕捉することを解除します。

構文
--

```js
window.releaseEvents(eventType);
```

`eventType` は、 `Event.ABORT`, `Event.BLUR`, `Event.CLICK`, `Event.CHANGE`, `Event.DBLCLICK`, `Event.DRAGDDROP`, `Event.ERROR`, `Event.FOCUS`, `Event.KEYDOWN`, `Event.KEYPRESS`, `Event.KEYUP`, `Event.LOAD`, `Event.MOUSEDOWN`, `Event.MOUSEMOVE`, `Event.MOUSEOUT`, `Event.MOUSEOVER`, `Event.MOUSEUP`, `Event.MOVE`, `Event.RESET`, `Event.RESIZE`, `Event.SELECT`, `Event.SUBMIT`, `Event.UNLOAD` の値の組み合わせです。

例
-

```js
window.releaseEvents(Event.KEYPRESS);
```

注
-

イベントのリストをこのメソッドに渡すには、 `window.releaseEvents(Event.KEYPRESS | Event.KEYDOWN | Event.KEYUP)` のような構文を使用することに注意してください。

`window.captureEvents` (
非推奨
) も参照してください。

仕様書
---

どの仕様書にも含まれていません。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Window: paste イベント - Web API

Window: paste イベント
==================

**`paste`** イベントは、ユーザーがブラウザーのユーザーインターフェイスから「貼り付け」操作を実行したときに発生します。

|  |  |
| --- | --- |
| バブリング | あり |
| キャンセル | 可 |
| インターフェイス | `ClipboardEvent` |
| イベントハンドラープロパティ | `onpaste` |

このイベントの本来の対象は、貼り付け操作を意図する対象である `Element` です。このイベントを `Window` インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントの局面について完全な詳細は、 Element: paste イベントを参照してください。

例
-

```js
document.addEventListener("paste", (event) => {
  console.log("paste action initiated");
});
```

仕様書
---

| Specification |
| --- |
| Clipboard API and events # clipboard-event-paste |
| HTML Standard # handler-onpaste |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 関連イベント: `cut`, `copy`
* `Element` を対象としたこのイベント: `paste`
* `Document` を対象としたこのイベント: `paste`


Window.navigator - Web API

Window.navigator
================

**Window.navigator`** は読み取り専用のプロパティで、スクリプトを実行しているアプリケーションに関するメソッドとプロパティを持つ `Navigator` オブジェクトへの参照を返します。

値
-

`navigator` オブジェクト。

例
-

### 例 #1: ブラウザーを検出し文字列で返す

```js
var sBrowser,
  sUsrAg = navigator.userAgent;

// The order matters here, and this may report false positives for unlisted browsers.

if (sUsrAg.indexOf("Firefox") > -1) {
  sBrowser = "Mozilla Firefox";
  // "Mozilla/5.0 (X11; Ubuntu; Linux x86\_64; rv:61.0) Gecko/20100101 Firefox/61.0"
} else if (sUsrAg.indexOf("SamsungBrowser") > -1) {
  sBrowser = "Samsung Internet";
  // "Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36
} else if (sUsrAg.indexOf("Opera") > -1 || sUsrAg.indexOf("OPR") > -1) {
  sBrowser = "Opera";
  // "Mozilla/5.0 (Macintosh; Intel Mac OS X 10\_14\_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 OPR/57.0.3098.106"
} else if (sUsrAg.indexOf("Trident") > -1) {
  sBrowser = "Microsoft Internet Explorer";
  // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko"
} else if (sUsrAg.indexOf("Edge") > -1) {
  sBrowser = "Microsoft Edge (Legacy)";
  // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
} else if (sUsrAg.indexOf("Edg") > -1) {
  sBrowser = "Microsoft Edge (Chromium)";
  // Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.64
} else if (sUsrAg.indexOf("Chrome") > -1) {
  sBrowser = "Google Chrome or Chromium";
  // "Mozilla/5.0 (X11; Linux x86\_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
} else if (sUsrAg.indexOf("Safari") > -1) {
  sBrowser = "Apple Safari";
  // "Mozilla/5.0 (iPhone; CPU iPhone OS 11\_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306"
} else {
  sBrowser = "unknown";
}

alert("You are using: " + sBrowser);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-navigator |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


window.scrollTo - Web API

window.scrollTo
===============

**`Window.scrollTo()`** は文書内の特定の組み合わせの座標までスクロールします。

構文
--
```

window.scrollTo(x-coord, y-coord)
window.scrollTo(options)
```

### 引数

* `x-coord` は、左上に表示されたい文書の水平軸上のピクセルです。
* `y-coord` は、左上に表示されたい文書の垂直軸上のピクセルです。

- または -

* `options` は `ScrollToOptions` 辞書です。
例
-

```js
window.scrollTo(0, 1000);
```

`options` の使用例:

```js
window.scrollTo({
  top: 100,
  left: 100,
  behavior: "smooth",
});
```

注
-

`Window.scroll()` はこのメソッドとほぼ同じです。相対スクロールについては、 `Window.scrollBy()`, `Window.scrollByLines()`, `Window.scrollByPages()` を参照してください。

要素をスクロールするには、 `Element.scrollTop` および `Element.scrollLeft` を参照してください。

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-window-scrollto |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Window.prompt() - Web API

Window.prompt()
===============

`window.prompt()` は、ユーザーにテキストを入力するように促すダイアログをオプションのメッセージと共に表示し、ユーザーがテキストを送信するかダイアログをキャンセルするまで待機するようにブラウザーに指示します。

ある条件下では、例えば、ユーザーがタブを切り替えたとき、ブラウザーは実際にはダイアログを表示しないかもしれませんし、ユーザーがテキストを送信したり、ダイアログをキャンセルしたりするまで待たないかもしれません。

構文
--

```js
prompt()
prompt(message)
prompt(message, default)
```

### 引数

`message` 省略可

ユーザーに表示する文字列。プロンプトウィンドウに表示するものがない場合は省略可能です。

`default` 省略可

テキスト入力フィールドに表示される既定値を指定する文字列。 Internet Explorer 7 および 8 では、この引数を指定しなかった場合、文字列 `"undefined"` が既定値となることに注意してください。

### 返値

ユーザーが入力したテキストを含む文字列、または `null` です。

例
-

```js
let sign = prompt("What's your sign?");

if (sign.toLowerCase() == "scorpio") {
  alert("Wow! I'm a Scorpio too!");
}

// プロンプトの使い方には色々なものがあります。
sign = window.prompt(); // 空のプロンプトを表示
sign = prompt(); // 同上
sign = window.prompt("元気にしてる ?"); // 「元気にしてる ?」の文字列入りで表示
sign = window.prompt("元気にしてる ?", "元気だよ !"); // 「元気にしてる ?」 の文字列入りで、入力欄の初期値に「元気だよ !」を設定して表示
```

ユーザーが OK ボタンをクリックすると、入力フィールドに入力されたテキストが返ります。ユーザーがテキストを入力せずに OK をクリックする場合、空文字列が返ります。ユーザーがキャンセルボタンをクリックする場合、この関数は、 `null` を返します。

上記例のプロンプトは次のように表示されます（macOS の Chrome）。

![prompt() dialog in Chrome on macOS](/ja/docs/Web/API/Window/prompt/prompt.png)

メモ
--

プロンプトダイアログは、単一の行のテキストボックス、キャンセルボタン、OK ボタンを含み、ユーザーがテキストボックスに入力した（空の可能性もある）テキストを返します。

返値は文字列であることに注意してください。つまり、ユーザーから与えられた値をキャストする必要がある場合があります。例えば、答えが Number であるべきなら、その値を Number にキャストする必要があります。

```js
const aNumber = Number(window.prompt("Type a number", ""));
```

ダイアログボックスはモーダルウィンドウです。ダイアログボックスが閉じられるまで、ユーザーはプログラムの他のインターフェイスにアクセスすることができなくなります。このため、ダイアログボックス（またはモーダルウィンドウ）を作成する関数は、使いすぎないようにしましょう。

他にもユーザー入力には `<dialog>` 要素を使用することができます。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-prompt-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<dialog>` 要素
* `alert`
* `confirm`


window.matchMedia - Web API

window.matchMedia
=================

概要
--

指定された メディアクエリ文字列のパース結果を表す、新しい `MediaQueryList` オブジェクトを返します。

構文
--
```

mql = window.matchMedia(mediaQueryString)
```

`mediaQueryString` は、新しい `MediaQueryList` オブジェクトを返すための、メディアクエリ文字列です。

例
-

```js
if (window.matchMedia("(min-width: 400px)").matches) {
  /\* ビューポートの幅が 400 ピクセル以上の場合のコードをここに \*/
} else {
  /\* ビューポートの幅は 400 ピクセル未満の場合のコードをここに \*/
}
```

このコードでは、ウィンドウが非常に狭いときに、何か別の処理を行うことができます。

他にも『コード内でのメディアクエリの使用』にいくつか例があります。

仕様
--

| Specification |
| --- |
| CSSOM View Module # dom-window-matchmedia |

ブラウザ互換性
-------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連記事
----

* メディアクエリ
* コード内でのメディアクエリの使用
* `MediaQueryList`
* `MediaQueryListListener` (en-US)


Window.event - Web API

Window.event
============

`Window` の読み取り専用プロパティである **`event`** は、現在サイトのコードが処理している `Event` を返します。イベントハンドラーのコンテキスト外では、値が常に `undefined` になります。

新しいコードではこのプロパティの使用を*避けるべき*であり、代わりにイベントハンドラー関数になる `Event` を使用してください。このプロパティは広くサポートされておらず、またサポートされていてもコードが壊れやすくなるおそれがあります。

**メモ:** このプロパティは、返された `Event` が期待する値ではない状況になる場合があり、壊れやすい可能性があります。加えて `Window.event` は、shadow trees で発生したイベントに対して不適格です。

仕様
--

| Specification |
| --- |
| DOM Standard # dom-window-event |

ブラウザー実装状況
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Event.srcElement`


window.cancelAnimationFrame() - Web API

window.cancelAnimationFrame()
=============================

**`window.cancelAnimationFrame()`** メソッドは、以前に `window.requestAnimationFrame()` の呼び出しによってスケジュールされたアニメーションフレームリクエストをキャンセルします。

構文
--

```js
cancelAnimationFrame(requestID)
```

### 引数

`requestID`

コールバックをリクエストした `window.requestAnimationFrame()` の呼び出しによって返された ID 値。

### 返値

なし (`undefined`)。

例
-

```js
const requestAnimationFrame =
  window.requestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.msRequestAnimationFrame;

const cancelAnimationFrame =
  window.cancelAnimationFrame || window.mozCancelAnimationFrame;

const start = Date.now();

let myReq;

function step(timestamp) {
  const progress = timestamp - start;
  d.style.left = `${Math.min(progress / 10, 200)}px`;
  if (progress < 2000) {
    // requestAnimationFrame を呼び出すたびに requestId を更新することが重要です
    myReq = requestAnimationFrame(step);
  }
}
myReq = requestAnimationFrame(step);
// キャンセル処理は、最後の requestId を使用します
cancelAnimationFrame(myReq);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # animationframeprovider-cancelanimationframe |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `window.requestAnimationFrame()`
* ポリフィル


Window.document - Web API

Window.document
===============

**`window.document`** は、ウィンドウに含まれている文書への参照を返します。

例
-

```js
console.log(window.document.title);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-document-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Window: deviceorientation イベント - Web API

Window: deviceorientation イベント
==============================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**`deviceorientation`** イベントは、端末の現在の向きを地球座標フレームと比較した場合に、方角センサーから最新のデータが得られた場合に発生します。このデータは端末内部の方位磁針から収集されます。

詳しくは方向および動きとして示されるデータを参照してください。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("deviceorientation", (event) => {});

ondeviceorientation = (event) => {};
```

イベント型
-----

`DeviceOrientationEvent` です。 `Event` から継承しています。

Event

DeviceOrientationEventイベントプロパティ
---------

`DeviceOrientationEvent.absolute` 読取専用

論理値で、端末が絶対に方向データを提供するかどうかを示します。

`DeviceOrientationEvent.alpha` 読取専用

数値で、端末の Z 軸の回転量を表し、 0 （含む）から 360 （含まない）までの範囲の値で表します。

`DeviceOrientationEvent.beta` 読取専用

数値で、端末の X 軸の回転量を表し、 -180 （含む）から 180 （含まない）までの範囲の値で表します。これは端末の前後方向の動きを表します。

`DeviceOrientationEvent.gamma` 読取専用

数値で、端末の Z 軸の回転量を表し、 -90 （含む）から 90 （含まない）までの範囲の値で表します。これは端末の左右方向の動きを表します。

`DeviceOrientationEvent.webkitCompassHeading`
Non-standard
 読取専用

数値で、ワールドシステムの Z 軸を中心とした端末の動きと北の方向との差を表し、 0 から 360 の範囲の値で度数で表します。

`DeviceOrientationEvent.webkitCompassAccuracy`
Non-standard
 読取専用

コンパスの精度で、偏差が正の値または負の値を意味しています。通常は 10 です。

例
-

```js
if (window.DeviceOrientationEvent) {
  window.addEventListener(
    "deviceorientation",
    (event) => {
      const rotateDegrees = event.alpha; // alpha: rotation around z-axis
      const leftToRight = event.gamma; // gamma: left to right
      const frontToBack = event.beta; // beta: front back motion

      handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
    },
    true,
  );
}

const handleOrientationEvent = (frontToBack, leftToRight, rotateDegrees) => {
  // do something amazing
};
```

仕様書
---

| Specification |
| --- |
| DeviceOrientation Event Specification # deviceorientation |
| DeviceOrientation Event Specification # ref-for-dom-window-ondeviceorientation |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `devicemotion`
* 端末の方向の検出
* 方向および動きとして示されるデータ


Window.sidebar - Web API

Window.sidebar
==============

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**警告:** この `window.external` (en-US) プロパティの Firefox だけの標準外のエイリアスは削除されました。

ブラウザーにアドオンを登録するためのいくつかのメソッドを含むサイドバーオブジェクトを返します。

メソッド
----

返されるサイドバーオブジェクトは、以下のメソッドを持っています。

| メソッド | 説明 (SeaMonkey) | 説明 (Firefox) |
| --- | --- | --- |
| `addPanel(title, contentURL, "")` | サイドバーパネルを追加します。 |
 Firefox 23 からは廃止されました (SeaMonkey にのみ存在します)。エンドユーザーは、代わりに「このブックマークをサイドバーに読み込む」オプションを使用できます。また、 Firefox のサイドバーを作成するを参照してください。
 >
  |
| `addPersistentPanel(title, contentURL, "")` | バックグラウンドで動作可能なサイドバーパネルを追加します。 |
| `AddSearchProvider(*descriptionURL)*` |
 ダミー関数です。何もしません。
 検索プラグインの自動検出を参照してください。
  |
| `addSearchEngine(engineURL, iconURL, suggestedTitle, suggestedCategory)`

非推奨
 |
 検索エンジンをインストールします (Sherlock)。
 詳細はSherlock 検索エンジンを追加 (en-US)にあります。

**Note:** これは Firefox 44 で廃止され、 Firefox 59 で完全に削除されました。
 |
| `IsSearchProviderInstalled(*descriptionURL)*` | 特定の検索プロバイダー (OpenSearch) がインストールされているかどうかを示します。 |

仕様書
---

Mozilla 固有です。どの標準にも属しません。

ブラウザーの互換性
---------

 Firefox 102 で環境設定に隠されました。
 詳細は、 `window.external` (en-US) の Firefox 互換性情報を参照してください。


Window: cut イベント - Web API

Window: cut イベント
================

**`cut`** イベントは、ユーザーがブラウザーのユーザーインターフェイスから切り取り操作を実行したときに発生します。

|  |  |
| --- | --- |
| バブリング | あり |
| キャンセル | 可 |
| インターフェイス | `ClipboardEvent` |
| イベントハンドラープロパティ | `oncut` |

このイベントの本来の対象は、切り取り操作の意図の対象である `Element` です。このイベントを `Window` インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントの局面について完全な詳細は、 Element: cut イベントを参照してください。

例
-

```js
window.addEventListener("cut", (event) => {
  console.log("cut action initiated");
});
```

仕様書
---

| Specification |
| --- |
| Clipboard API and events # clipboard-event-cut |
| HTML Standard # handler-oncut |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 関連イベント: `copy`, `paste`
* `Element` を対象としたこのイベント: `cut`
* `Document` を対象としたこのイベント: `cut`


Window: gamepadconnected イベント - Web API

Window: gamepadconnected イベント
=============================

`gamepadconnected` イベントは、ゲームパッドが接続されたことをブラウザーが検出したとき、またはゲームパッドのボタン/軸が初めて使用されたときに発生します。

このイベントは、文書の `gamepad` (en-US) 権限ポリシーが不許可になっている場合には発生しません。

このイベントはキャンセル不可で、バブリングしません。

例
-

ゲームパッドが接続されたことを通知するには、`addEventListener()` を使用してウィンドウにハンドラーを追加します。

```js
window.addEventListener("gamepadconnected", (event) => {
  // すべてのボタンと軸の値は、次の方法でアクセスできます。
  const gamepad = event.gamepad;
});
```

また、`window.ongamepadconnected` イベントハンドラープロパティを使用して、`gamepadconnected` イベントのハンドラーを確立することもできます。

```js
window.ongamepadconnected = (event) => {
  // すべてのボタンと軸の値は、次の方法でアクセスできます。
  const gamepad = event.gamepad;
};
```

仕様書
---

| Specification |
| --- |
| Gamepad # event-gamepadconnected |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* gamepaddisconnected
* Gamepad API の使用