recursal/MDN huggingface dataset:
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
==============

**`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.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()
=============

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

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

`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
=====================

**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 プロパティ
========================

`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 イベント
=============================

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

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

**`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
=============

概要
--

`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
======================

`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.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 イベント
==============================

`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
===========

**`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.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()
===========================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (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
==============

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

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

概要
--

ウィンドウの文書の履歴のひとつ分だけ前へ進めます。これは 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
======================

**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 イベント
===================================

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

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

**`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 イベント
=======================

**`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 イベント
=================

**`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`