recursal/MDN huggingface dataset:
Window: locationbar プロパティ
=========================

`locationbar` オブジェクトを返します。

これは `Window` プロパティのうちの論理値を持つ `visible` プロパティの 1 つであり、ウェブブラウザーのユーザーインターフェイスの特定の部分が可視であるかどうかを表すものでした。

プライバシーと相互運用性の理由から、これで `visible` プロパティの値は、この `Window` がポップアップの場合は `false` となり、そうでない場合は `true` となるようになりました。

構文
--

単一のプロパティを持つオブジェクトです。

`visible` 読取専用 

論理値のプロパティで、 `false` は `Window` がポップアップの場合、 `true` はそれ以外を表します。

仕様書
---

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

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

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

関連情報
----

* `window.menubar`
* `window.personalbar`
* `window.scrollbars`
* `window.statusbar`
* `window.toolbar`
Window: opener プロパティ
====================

`Window` インターフェイスの **`opener`** プロパティは、 `open()` によって、または `target` 属性の付いたリンクの操作によって開かれたウィンドウを開いたウィンドウへの参照を返します。

言い換えれば、ウィンドウ `A` がウィンドウ `B` を開いた場合、 `B.opener` は `A` を返します。

値
-

`Window` 風のオブジェクトで、（`window.open()` を使用するか、または `target` 属性が設定されたリンクによって）現在のウィンドウを開いたウィンドウ（オープナー）を参照します。このウィンドウが他のウィンドウにリンクされたり作成されたりして開かれたものでない場合は `null` を返します。

オープナーが現在のページと同じオリジン上にない場合、オープナーオブジェクトの機能は制限されます。例えば、ウィンドウオブジェクトの変数と関数はアクセスすることができません。しかし、オープナーウィンドウのナビゲーションは利用可能です。これは、開かれたページが元のタブやウィンドウで URL を開くためのものであることを意味しています。場合によっては、これによりフィッシング攻撃が可能であり、元のウィンドウで開かれた信頼できるページが、新しく開かれたページによってフィッシングページに置き換えられてしまいます。

以下の場合、ブラウザーは `window.opener` を生成せず、 `null` のままにします。

* リンクに `rel=noopener` を指定するか、 `noopener` を `windowFeatures` 引数に渡すことで、オープナーを消すことができます。
* `target` が `_blank` であるリンクによって開かれたウィンドウは、明示的に `rel=opener` を要求しない限り、 `opener` になることはありません。
* 値が `same-origin` である `Cross-Origin-Opener-Policy` ヘッダーがあると、 `opener` を設定することができません。新しいウィンドウは異なる閲覧コンテキストで読み込まれるので、開くためのウィンドウを参照することはありません。
仕様書
---

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

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

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

**`innerHeight`** は `Window` インターフェイスの読み取り専用プロパティで、ウィンドウの内部の高さをピクセル単位で返します。水平スクロールバーがあれば、その高さを含みます。

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

値
-

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

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

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

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

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

例
-

### フレームセットの想定


```js
console.log(window.innerHeight); // または

console.log(self.innerHeight);
// フレームセット内にあるフレームのビューポートの高さを返します

console.log(parent.innerHeight);
// 最も近いフレームセットのビューポートの高さを返します

console.log(top.innerHeight);
// もっとも外側のフレームセットのビューポートの高さを返します
```


ウィンドウの寸法を変更するには、 `window.resizeBy()` と `window.resizeTo()` を参照してください。

ウィンドウの外形の高さ、すなわちブラウザーウィンドウ全体の高さを取得するには、 `window.outerHeight` を参照してください。

### 図の例

以下の図は `outerHeight` と `innerHeight` の違いを示しています。

![innerHeight と outerHeight の説明](/ja/docs/Web/API/Window/innerHeight/firefoxinnervsouterheight2.png)

デモ
--

### 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 resizeListener() {
  heightOutput.textContent = window.innerHeight;
  widthOutput.textContent = window.innerWidth;
}

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

### 結果

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

仕様書
---

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

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

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

関連情報
----

* `window.innerWidth`
* `window.outerHeight`
* `window.outerWidth`
Window: hashchange イベント
=======================

**`hashchange`** イベントは、 URL のフラグメント識別子 (URL の `#` 記号で始まり続く部分) が変化したときに発生します。

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

例
-

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


```js
window.addEventListener(
  "hashchange",
  function () {
    console.log("The hash has changed!");
  },
  false,
);
```


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


```js
function locationHashChanged() {
  if (location.hash === "#cool-feature") {
    console.log("You're visiting a cool feature!");
  }
}

window.onhashchange = locationHashChanged;
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-hashchange |
| HTML Standard # handler-window-onhashchange |

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

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

関連情報
----

* `popstate`
* `WindowEventHandlers.onhashchange`
Window: beforeunload イベント
=========================

**`beforeunload`** イベントは、ウィンドウ、文書、およびそのリソースがアンロードされる直前に発生します。文書はまだ表示されており、この時点ではイベントはキャンセル可能です。

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

このイベントによって、ウェブページがダイアログボックスを表示し、ユーザーにページを終了するかどうかの確認が求めることができます。ユーザーが確認すれば、ブラウザーは新しいページへ遷移し、そうでなければ遷移をキャンセルします。

仕様書によれば、確認ダイアログを表示するためにはイベントハンドラーでイベントの `preventDefault()` を呼び出すことになっています。

しかし、すべてのブラウザーがこのメソッドに対応しているわけではなく、一部はイベントハンドラーに古い方法二つのうちの一つを実装するよう求めていることに注意してください。

* イベントの `returnValue` プロパティに文字列を代入する
* イベントハンドラーから文字列を返す

一部のブラウザーでは返された文字列を確認ダイアログで表示するために使用し、イベントハンドラーがユーザーに独自のメッセージを表示できるようにしていました。しかし、これは非推奨であり、すでに多くのブラウザーが対応していません。

望ましくないポップアップに対処するために、ブラウザーはページが操作されていない限り、 `beforeunload` のイベントハンドラーで生成したプロンプトを表示しなかったり、全くプロンプトを表示しなかったりする可能性があります。

イベントハンドラー/リスナーを `window` または`document` の `beforeunload` イベントに割り当てると、ブラウザーはメモリ内のページナビゲーションキャッシュ、例えば Firefox の Back-Forward キャッシュや WebKit のページキャッシュなどを使用することを防ぎます。

HTML 仕様書は `window.alert()`, `window.confirm()`, `window.prompt()` などのメソッドが、このイベントの実行中には無視されることがあることを示しています。詳しくは、 HTML 仕様書をご覧ください。

例
-

HTML の仕様では、 `Event.returnValue` を使用する代わりに `Event.preventDefault()` メソッドを使用する必要があります。ただし、これはすべてのブラウザーで対応しているわけではありません。


```js
window.addEventListener("beforeunload", (event) => {
  // Cancel the event as stated by the standard.
  event.preventDefault();
  // Chrome requires returnValue to be set.
  event.returnValue = "";
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-beforeunload |
| HTML Standard # handler-window-onbeforeunload |

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

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

関連情報
----

* 関連イベント: `DOMContentLoaded`, `readystatechange`, `load`, `unload`
* Unloading Documents — Prompt to unload a document
* Remove Custom Messages in onbeforeload Dialogs after Chrome 51
Window.screenY
==============

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

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

構文
--


```js
topWindowPos = window.screenY;
```

### 返値

ブラウザーのビューポートの上端から画面の上端までの 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-screeny |

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

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

関連情報
----

* `window.screenTop` (en-US)
* `window.screenX`
Window: personalbar プロパティ
=========================

`personalbar` オブジェクトを返します。

これは `Window` プロパティのうちの論理値を持つ `visible` プロパティの 1 つであり、ウェブブラウザーのユーザーインターフェイスの特定の部分が可視であるかどうかを表すものでした。

プライバシーと相互運用性の理由から、これで `visible` プロパティの値は、この `Window` がポップアップの場合は `false` となり、そうでない場合は `true` となるようになりました。

構文
--

単一のプロパティを持つオブジェクトです。

`visible` 読取専用 

論理値のプロパティで、 `false` は `Window` がポップアップの場合、 `true` はそれ以外を表します。

仕様書
---

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

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

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

関連情報
----

* `window.locationbar`
* `window.menubar`
* `window.scrollbars`
* `window.statusbar`
* `window.toolbar`
Window: offline イベント
====================

**`offline`** は `Window` インターフェイスのイベントで、ブラウザーがネットワークへのアクセスを失い、 `Navigator.onLine` の値が `false` に切り替わったときに発行されます。

構文
--

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


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

イベント型
-----

一般的な `Event` です。

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

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

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


```js
// addEventListener 版
window.addEventListener("offline", (event) => {
  console.log("The network connection has been lost.");
});

// onoffline 版
window.onoffline = (event) => {
  console.log("The network connection has been lost.");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-offline |
| HTML Standard # handler-window-onoffline |

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

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

関連情報
----

* `online`
Window: toolbar プロパティ
=====================

`toolbar` オブジェクトを返します。

これは `Window` プロパティのうちの論理値を持つ `visible` プロパティの 1 つであり、ウェブブラウザーのユーザーインターフェイスの特定の部分が可視であるかどうかを表すものでした。

プライバシーと相互運用性の理由から、これで `visible` プロパティの値は、この `Window` がポップアップの場合は `false` となり、そうでない場合は `true` となるようになりました。

構文
--

単一のプロパティを持つオブジェクトです。

`visible` 読取専用 

論理値のプロパティで、 `false` は `Window` がポップアップの場合、 `true` はそれ以外を表します。

仕様書
---

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

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

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

関連情報
----

* `window.locationbar`
* `window.menubar`
* `window.personalbar`
* `window.scrollbars`
* `window.statusbar`
window.top
==========

ウィンドウ階層における最上位のウィンドウへの参照を返します。

構文
--
```

var topWindow = window.top;
```

注記
--

`window.parent` プロパティは、現在のウィンドウの直近の親を返しますが、`window.top` は、ウィンドウオブジェクトの階層における最上位のウィンドウを返します。

このプロパティは、親、あるいは、階層になっているウィンドウのサブフレーム内にあるウィンドウを扱っていて、最上位のフレームセットを取得したいときに特に役立ちます。

仕様
--

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

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

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

**`Window.outerHeight`** は読み取り専用のプロパティで、サイドバー、ウィンドウの操作部分、ウィンドウをリサイズする境界やハンドルを含む、ブラウザーウィンドウ全体の高さをピクセル単位で表します。

メモ
--

ウィンドウの大きさを変更するには、 `window.resizeBy()` および `window.resizeTo()` を使用してください。

ウィンドウの内側の高さ、つまりページが表示される高さを取得するには、 `window.innerHeight` を使用してください。

### 図による例示

以下の図は、 `outerHeight` と `innerHeight` の違いを示しています。

![innerHeight vs outerHeight illustration](/ja/docs/Web/API/Window/outerHeight/firefoxinnervsouterheight2.png)

仕様書
---

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

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

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

関連情報
----

* `window.innerHeight`
* `window.innerWidth`
* `window.outerWidth`
* `window.resizeBy()`
* `window.resizeTo()`
Window.scrollByLines()
======================

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

**`Window.scrollByLines()`** メソッドは、指定された行数だけ文書をスクロールさせます。

構文
--


```js
window.scrollByLines(lines);
```

### 引数

* `lines` は文書をスクロールする行数です。これは正または負の整数を指定することができます。
例
-


```html
<!-- 文書を 5 行だけ上方向にスクロールする -->
<button id="scroll-up" onclick="scrollByLines(-5);">Up 5 lines</button>

<!-- 文書を 5 行だけ下方向にスクロールする -->
<button id="scroll-down" onclick="scrollByLines(5);">Down 5 lines</button>
```

仕様書
---

どの仕様書にもありません。

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

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

関連情報
----

* `window.scroll()`
* `window.scrollBy()`
* `window.scrollByPages()`
* `window.scrollTo()`
Window.outerWidth
=================

**`Window.outerWidth`** は読み取り専用のプロパティで、ブラウザーウィンドウの外側の幅を返します。これはサイドバー (展開されている場合)、ウィンドウの操作部分、ウィンドウをリサイズする境界やハンドルを含む、ブラウザーウィンドウ全体の幅を表します。

メモ
--

ウィンドウの大きさを変更するには、 `window.resizeBy()` および `window.resizeTo()` を参照してください。

ウィンドウの内側の幅、つまりページが表示される幅を取得するには、 `window.innerWidth` を参照してください。

仕様書
---

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

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

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

関連情報
----

* `window.outerHeight`, `window.innerHeight`, `window.innerWidth`
* `window.resizeBy()`, `window.resizeTo()`
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 プロパティ
==========================

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

概要
--

ウィンドウのビューポートの左上隅の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
=============

概要
--

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

構文
--
```

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

概要
--

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

構文
--
```

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

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

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

概要
--

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

構文
--
```

framesCount = window.length;
```


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


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

仕様
--

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