recursal/MDN huggingface dataset:
Location.assign()
=================

**`Location.assign()`** 方法会触发窗口加载并显示指定的 URL 的内容。

如果由于安全原因无法执行跳转，那么会抛出一个 `SECURITY_ERROR` 类型的 `DOMException`。当调用此方法的脚本来源和页面的 `Location` 对象中定义的来源隶属于不同域的时候，就会抛出上述错误。

如果传入了一个无效的 URL，则会抛出一个 `SYNTAX_ERROR` 类型的 `DOMException`。

语法
--
```

location.assign(url);
```

### 参数

`url`

一个包含了要跳转到的链接的`DOMString`。

示例
--


```js
// 跳转到 Location.reload() 这篇文章
document.location.assign(
  "https://developer.mozilla.org/zh-CN/docs/Web/API/Location/reload",
);
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-location-assign-dev |

浏览器兼容性
------

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

相关内容
----

* 父级接口 `Location`。
* 相似的方法：`Location.replace()` 和 `Location.reload()`。
Location: ancestorOrigins
=========================

`Location`接口的 **`ancestorOrigins`** 只读属性是一个静态的`DOMStringList`，倒序排列了此`Location`对象所属文档先前所有浏览上下文的来源。

你可以在脚本中使用`location.ancestorOrigins`来检测你的网页是否被你不希望的对象嵌入了。你也可以使用它让网页在被特定站点嵌入时做出不同的表现。

语法
--


```js
const ancestors = location.ancestorOrigins;
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-location-ancestororigins-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Location: host
==============

`Location` 接口的 **`host`** 属性是包含了主机的一段 `USVString`，其中包含：主机名，如果 URL 的端口号是非空的，还会跟上一个 `':'` ，最后是 URL 的端口号。

Syntax
------
```

string = object.host;
object.host = string;
```

Examples
--------


```js
var anchor = document.createElement("a");

anchor.href = "https://developer.mozilla.org/en-US/Location.host";
anchor.host == "developer.mozilla.org";

anchor.href = "https://developer.mozilla.org:443/en-US/Location.host";
anchor.host == "developer.mozilla.org";
// 这里 host 中没有包含端口号，因为 443 是 https 协议的默认端口号

anchor.href = "https://developer.mozilla.org:4097/en-US/Location.host";
anchor.host == "developer.mozilla.org:4097";
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-location-host-dev |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Location: hostname
==================

`Location`的 **`hostname`** 属性是包含了域名的一段 `USVString`。

Syntax
------
```

string = object.hostname;
object.hostname = string;
```

Examples
--------


```js
// 在文档流中声明了一个元素： <a id="myAnchor" href="https://developer.mozilla.org/zh-CN/docs/Location.hostname">
var anchor = document.getElementById("myAnchor");
var result = anchor.hostname; // Returns:'developer.mozilla.org'
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-location-hostname-dev |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
location.reload()
=================

**`location.reload()`** 方法用来刷新当前页面，就像刷新按钮一样。

该方法在跨域调用（执行该方法的脚本文件的域和 `Location` 对象所在页面的域不同）时，将会抛出 `SECURITY_ERROR` `DOMException` 异常。有关更多信息，请参阅浏览器的同源策略。

语法
--


```js
location.reload();
```

location.reload() 没有参数
----------------------

Firefox 对于该方法支持一个非标准的 `forceGet` boolean 参数 ，当值为 `true` 时，将强制 Firefox 从服务器加载页面资源。但是在其他浏览器中任何参数都是无效的，`location.reload()` 执行时将会忽略它们并且不会有任何效果。

不过你可能会看到在现有的代码中写入 `location.reload(true)` 并假装硬性重新加载在所有浏览器中均生效的使用方式。在 GitHub 中搜索 "`location.reload(true)`" 将会得到 成千上万个结果。所以现在有大量的现有代码中包含它。

由于一些历史的原因，网景浏览器的一些版本添加了对它的支持，显然被继承到了 Firefox 中。并且一度被 W3C Web APIs 工作组作为一个提案来考虑添加到 `location.reload()` 中。但是它从未实际实现过。

因此 boolean 参数当前不符合 `location.reload()` 的规范。— 实际上它*从未*成为 `location.reload()` 的规范。

规范
--

| Specification |
| --- |
| HTML Standard # dom-location-reload-dev |

浏览器兼容性
------

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

相关链接
----

* `Location` 接口。
* 类似功能的方法：`Location.assign()` 和 `Location.replace()`。
Location: href
==============

`Location` 接口的 **`href`** 属性是一个字符串化转换器 (stringifier), 返回一个包含了完整 URL 的 `USVString` 值，且允许 href 的更新。

语法
--
```

string = object.href;
object.href = string;
```

范例
--


```js
// 假设文档中包含标签： <a id="myAnchor" href="https://developer.mozilla.org/en-US/Location/href">
var anchor = document.getElementById("myAnchor");
var result = anchor.href; // 返回：'https://developer.mozilla.org/en-US/Location/href'
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-location-href-dev |

浏览器兼容性
------

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

概述
--

根据指定的值，移动当前窗口。

语法
--
```

window.moveBy(deltaX, deltaY)
```

### 参数

* `deltaX` 表示窗口在水平方向移动的像素值。
* `deltaY` 表示窗口在垂直方向移动的像素值。
示例
--


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

备注
--

可以使用负值作为该函数的参数。该函数产生相对移动，而 `window.moveTo` 产生一个绝对移动。

从 Firefox 7 开始，依据下面的规则，不能再移动一个浏览器里的窗口。

1. 不能移动非 window.open 创建的窗口或 Tab。
2. 当一个窗口里有多于一个 Tab 时，不能移动该窗口。
规范
--

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

概述
--

返回浏览器顶部距离系统桌面顶部的垂直距离。

语法
--
```

lLoc = window.screenY
```


* `lLoc` 距离屏幕顶部的像素值。
规范
--

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

浏览器兼容性
------

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

参见
--

* `window.screenX`
Window.mozInnerScreenY
======================

概要
--

在屏幕坐标下获取窗口视口左上角的 Y 坐标

> 
> \*\*备注：\*\*该坐标是以 CSS 像素报告显示的，而不是以硬件像素。这意味着它可以受缩放级别的影响; 要计算物理屏幕像素的实际数量，需要使用`nsIDOMWindowUtils.screenPixelsPerCSSPixel` 属性
> 
> 
> 

语法
--
```

screenY = window.mozInnerScreenY;
```

值
-

* *screenY* 存储的是 `window.mozInnerScreenY` 的属性值。
* `window.mozInnerScreenY`的属性值是一个浮点数，只读;它没有默认值。
规范
--

不属于任何 W3C 规范或标准

相关链接
----

* `window.mozInnerScreenX`
* `nsIDOMWindowUtils.screenPixelsPerCSSPixel`
Window：copy 事件
==============

当用户通过浏览器的用户界面发起一个复制动作时，将触发 **`copy`** 事件。

该事件的原始目标是 `Element`，它是复制动作的预期目标。你可以在 `Window` 接口上监听这个事件，以便在捕获或冒泡阶段处理它。关于此事件的全部细节，请参见 Element：copy 事件的页面。

语法
--

在类似于 `addEventListener()` 这样的方法中使用事件名，或设置事件处理器属性。


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

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

事件类型
----

`ClipboardEvent`。继承自 `Event`。

Event

ClipboardEvent示例
--


```js
window.addEventListener("copy", (event) => {
  console.log("已发起复制！");
});
```

规范
--

| 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` (en-US)
Window.screenTop
================

**`Window.screenTop`** 只读属性返回垂直距离，单位是 CSS 像素，从用户浏览器的上边界到屏幕最顶端。

**备注：** `screenTop` is an alias of the older `Window.screenY` property. `screenTop` was originally supported only in IE but was introduced everywhere due to popularity.

语法
--
```

topWindowPos = window.screenTop
```

### 返回值

A number equal to the number of CSS pixels from the top edge of the browser viewport to the top edge of the screen.

例子
--

In our screenleft-screentop example, you'll see a canvas onto which has been drawn a circle. In this example we are using `screenLeft`/`screenTop` plus `Window.requestAnimationFrame()` to constantly redraw the circle in the same physical position on the screen, even if the window position is moved.


```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);
```


Also in the code we include a snippet that detects whether `screenLeft` is supported, and if not, polyfills in `screenLeft`/`screenTop` using `Window.screenX`/`Window.screenY`.


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

规范
--

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

浏览器兼容性
------

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

参考
--

* `window.screenLeft`
* `Window.screenY`
Window.history
==============

**`Window.history`** 是一个只读属性，用来获取`History` 对象的引用，`History` 对象提供了操作浏览器*会话历史*（浏览器地址栏中访问的页面，以及当前页面中通过框架加载的页面）的接口。

`History` 对象有如下方法：参见 Manipulating the browser history 中的示例和详情。尤其指出的是文章里解释了在使用 `pushState()` 和 `replaceState()` 方法前，你需要了解的安全问题。

语法
--
```

var historyObj = window.history;
```

示例
--


```js
history.back(); // 等同于点击浏览器的回退按钮
history.go(-1); //等同于 history.back();
```

附注
--

在顶层页面中，浏览器的回退和前进按钮旁的下拉菜单显示了可以通过`History`对象访问到的页面会话历史（session history）列表。

出于安全考虑，History 对象不允许未授权代码访问会话历史（session History）中其他页面的 URLs，但可以导航到其他会话历史（session History）指向的页面。

未授权代码无法清除会话历史（session History），也不能禁用回退/前进功能。最快捷的可用方式是使用location.replace()方法，提供指定的 URL 来替换当前的会话历史（session history）。

规范
--

* HTML5 History interface
Window.updateCommands()
=======================

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

概要
--

更新当前 chrome 窗口（UI）的命令状态。

语法
--
```

window.updateCommands("sCommandName")
```

参数
--

* `sCommandName` 是一个特定的字符串，它描述了这种更新事件的类型 (我们用到了背景色注明).
记录
--

这将启用或禁用项目（根据需要在命令节点上设置或清除“disabled”属性），或通过在 XUL 命令节点的“state”属性中设置当前状态信息来确保命令状态反映选择的状态。

规范
--

DOM 0 级。不属于规范。

浏览器兼容性
------

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

当元素获得焦点时， **`focus`** 事件就会触发。

与 `focus` 相反的事件是 `blur`

|
|  |
| Bubbles（支持冒泡） | No |
| Cancelable（可撤销） | No |
| Interface（接口） | `FocusEvent` |
| Event handler property（事件处理程序属性） | `onfocus` |
| Sync / Async（同步/异步） | Sync |
| Composed（可组成） | Yes |

示例
--

### 在线示例

本示例在失去焦点时更改文档的外观。它使用 `addEventListener()` 监听 `focus` 和 `blur` 事件。

#### HTML


```html
<p id="log">Click on this document to give it focus.</p>
```


#### CSS


```css
.paused {
  background: #ddd;
  color: #555;
}
```


#### JavaScript


```js
function pause() {
  document.body.classList.add("paused");
  log.textContent = "FOCUS LOST!";
}

function play() {
  document.body.classList.remove("paused");
  log.textContent =
    "This document has focus. Click outside the document to lose focus.";
}

const log = document.getElementById("log");

window.addEventListener("blur", pause);
window.addEventListener("focus", play);
```


#### 结果

规范
--

| Specification |
| --- |
| UI Events # event-type-focus |
| HTML Standard # handler-onfocus |

浏览器兼容性
------

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

参考
--

* 相关联事件： `blur`
* `Element` 目标上的这个事件：`focus` 事件
Window.visualViewport
=====================

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

`Window` 接口的 visualViewport 只读属性返回一个`VisualViewport`对象，该对象表示给定窗口的可视视口。

语法
--
```

var visualViewport = Window.visualViewport
```

### 值

一个 `VisualViewport` 对象。

规范
--

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

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Window：showSaveFilePicker() 方法
==============================

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

`Window` 接口的 **`showSaveFilePicker()`** 方法用于显示一个文件选择器，以允许用户保存一个文件。可以选择一个已有文件覆盖保存，也可以输入名字新建一个文件。

语法
--


```js
showSaveFilePicker()
```

### 参数

`options` 可选

选项对象，包含以下属性：

`excludeAcceptAllOption`

布尔值，默认为 `false`。默认情况下，文件选择器带有一个允许用户选择所有类型文件的过滤选项（展开于文件类型选项中）。设置此选项为 `true` 以使该过滤选项不可用。

`suggestedName`

`String` 字符串。建议的文件名称。

`types`

允许保存的文件类型的 `Array` 数组。其中的元素为包含以下选项的对象：

`description`

可选，对此允许文件类型集合的描述。

`accept`

`Object` 对象，带有键名为 MIME 类型、键值为包含文件扩展名的 `Array` 数组的键值对（参考下方的示例）。


### 返回值

一个 `Promise` 对象，会兑现一个 `FileSystemFileHandle` 对象。

### 异常

`AbortError`

当用户直接关闭了文件选择器或选择的文件是敏感文件时将会抛出 AbortError。

安全性
---

要求发生临时性用户活动 (en-US)。用户必须与页面或 UI 元素进行交互才能使该特性正常运行。

示例
--

以下函数可以显示一个文件选择器，并突出显示文本文件类型以供选择。


```js
async function getNewFileHandle() {
  const opts = {
    types: [
      {
        description: "Text file",
        accept: { "text/plain": [".txt"] },
      },
    ],
  };
  return await window.showSaveFilePicker(opts);
}
```

规范
--

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

浏览器兼容性
------

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

参见
--

* 文件系统 API
* 文件系统访问 API：简化对本地文件的访问
Window：load 事件
==============

**`load`** 事件在整个页面及所有依赖资源如样式表和图片都已完成加载时触发。它与 `DOMContentLoaded` 不同，后者只要页面 DOM 加载完成就触发，无需等待依赖资源的加载。

该事件不可取消，也不会冒泡。

**备注：** *所有以 `load` 命名的事件都不会传递到 `Window` 上*，即使 `bubbles` 初始化为 `true`。要在 `window` 上捕获 `load` 事件，相关的 `load` 事件必须直接绑定到 `window` 上。

**备注：** 当主文档加载完成时，`load` 事件将在 `window` 上触发，但其有两个被修改的属性：`target` 为 `document`，以及 `path` 为 `undefined`。这是由遗留的一致性问题导致的。

语法
--

在如 `addEventListener()` 等方法中使用事件名称，或设置事件处理器属性。


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

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

事件类型
----

一个通用的 `Event`。

示例
--

当页面完全加载后在控制台打印一段信息：


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


也可以使用 `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.

参见
--

* Document readyState API
* 相关事件
    + `DOMContentLoaded`
    + `readystatechange`
    + `beforeunload`
    + `unload`
Window.window
=============

摘要
--

window 对象的 `window` 属性指向这个 window 对象本身。因此以下表达式所返回的 window 对象都是同一个。
```

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


在网页中，window 对象也是一个全局对象。这意味着：

1. 脚本中的全局变量实际上是 window 对象的属性：

```js
var global = { data: 0 };
alert(global === window.global); // displays "true"
```

2. 不用写 `window.` 前缀就可以访问 window 对象的内置属性：

```js
setTimeout("alert('Hi!')", 50); // equivalent to using window.setTimeout.
alert(window === window.window); // displays "true"
```


将 `window` 属性指向该 window 对象本身的目的，是为了更容易引用全局对象。不然，就得在最开始写代码的时候进行手动赋值：`var window = this;` 。

另外一个原因是如果没有这个属性，就不能像这样方便的写： `window.open('http://google.com/')`，而只能这样：open('http://google.com/')

使用该属性还有一个原因，有些库，特别是 JavaScript 模块希望能够提供 OOP 版本和非 OOP 版本。例如，如果引用了 `this.window.location.href` ，JavaScript 模块就可以在它定义的类里面定义一个 `window` 属性（因为默认没有全局性的 `window` 变量存在），这个属性可以在将 window 对象传进这个模块的类的构造器之后被创建。这样，这个类的方法中的 `this.window` 就指向了 window 对象。在没有命名空间的版本中，`this.window` 会重新指向 window 对象，从而很容易获取到文档的位置。还有一个优点，这个类（即使这个类定义在模块外面）的对象可以随意地改变对 window 的引用，而如果有一个写死了的 window 的引用就做不到这样。类内部的默认值仍然可以设置成当前的 window 对象。

规范
--

| Specification |
| --- |
| HTML Standard # dom-window-dev |
window.frameElement
===================

### 概述

返回嵌入当前`window`对象的元素 (比如 `<iframe>` 或者 `<object>`),如果当前`window`对象已经是顶层窗口，则返回`null`.

### 语法
```

var frameEl = window.frameElement;
```

### 例子
```

var frameEl = window.frameElement;
// 如果当前窗口被包含在一个框架里面，则将该框架的地址跳到'http://mozilla.org/'
if (frameEl)
  frameEl.src = 'http://mozilla.org/';
```

### 备注

虽然该属性名为`frameElement`,但该属性也会返回其他类型比如 `<object>` 或者其他可嵌入窗口的元素。

### 相关链接

* `window.frames` 返回一个类数组对象，返回当前窗口的所有子框架元素。
* `window.parent` 返回当前窗口的父窗口，也就是说，包含当前窗口所在的`frameElement`元素的窗口。
### 规范

WHATWG

### 浏览器兼容性

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Window：confirm() 方法
===================

`window.confirm()` 令浏览器显示一个带有可选的信息的对话框，并等待用户确认或取消该对话框。

在某些情况下（例如，当用户切换标签时）浏览器可能不会实际显示一个对话框，或者不等待用户确认或取消对话框。

语法
--


```js
confirm(message)
```

### 参数

`message`

在确认对话框中要显示的字符串。

### 返回值

一个布尔值，表示是否选择了确定（`true`）或取消（`false`）。如果浏览器忽略了页面内的对话框，那么返回值总是 `false`。

示例
--


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


会产生：

![Firefox 确认对话框](/zh-CN/docs/Web/API/Window/confirm/firefox_confirm_dialog.png)

注意事项
----

对话框是模态窗口——它们阻止用户访问程序界面的其他部分，直到对话框被关闭。出于这个原因，你不应该过度使用任何创建对话框（或模态窗口）的函数。无论如何，有很好的应避免使用对话框进行确认的理由。

另外，`<dialog>` 元素也可用于确认。

规范
--

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

当存储区域（localStorage 或 sessionStorage）被修改时，将触发 storage 事件。查看 Web Storage API 来获取更多信息。

常规信息
----

说明：*Web Storage*

|  |  |
| --- | --- |
| 接口 | `StorageEvent` |
| 是否冒泡 | No |
| 目标 | DefaultView (`<window>`) |
| 默认行为 | 无 |

属性
--

| Property | Type | Description |
| --- | --- | --- |
| `target` 只读  | `EventTarget` | 事件目标 (DOM 树中的最大目标) |
| `type` 只读  | `DOMString` | 事件的类型 |
| `bubbles` 只读  | `Boolean` | 事件通常是否会出现冒泡 |
| `cancelable` 只读  | `Boolean` | 事件是否可取消 |
| `key` 只读  | `DOMString` (string) | 键更改时 |
| `oldValue` 只读  | `DOMString` (string) | 正在更改键的旧值 |
| `newValue` 只读  | `DOMString` (string) | 正在更改键的新值 |
| `url` 只读  | `DOMString` (string) | 键更改的文档的地址 |
| `storageArea` 只读  | `Storage` | 受影响的存储对象 |

规范
--

| Specification |
| --- |
| HTML Standard # event-storage |
| HTML Standard # handler-window-onstorage |
window.setImmediate
===================

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

该方法用来把一些需要长时间运行的操作放在一个回调函数里，在浏览器完成后面的其他语句后，就立刻执行这个回调函数。

**备注：** 该方法可能不会被批准成为标准，目前只有最新版本的 Internet Explorer 和 Node.js 0.10+ 实现了该方法。它遇到了 Gecko(Firefox) 和Webkit (Google/Apple) 的阻力。

语法
--


```js
var immediateID = setImmediate(func, [param1, param2, ...]);
var immediateID = setImmediate(func);
```


* `immediateID` 是这次 setImmediate 方法设置的唯一 ID，可以作为 `window.clearImmediate` 的参数。
* `func` 是将要执行的回调函数

所有参数都会直接传给你的函数。

备注
--

`window.clearImmediate` 方法可以用来取消通过 setImmediate 设置的将要执行的语句，就像 `window.clearTimeout` (en-US) 对应于 `window.setTimeout`一样。

该方法可以用来替代 `setTimeout(fn, 0)` 去执行繁重的操作(heavy operations)

可以通过以下几种方式来模仿该功能：

* `window.postMessage` 可以被用来触发一个 immediate 但会产生回调。请注意，Internet Explorer 8 包含 postMessage 的同步版本，这意味着它不能被用来作为代替品。
* MessageChannel 可以在 Web Workers 内部很好的被使用，而 postMessage 的语义意味着它不能在那使用。
* `setTimeout(fn, 0)`*可以使用*, 然而按照HTML 规范, 嵌套深度超过 5 级的定时器，会被限制在 4ms , 他没有为 setImmediate 的天然及时性提供合适的 polyfill.

所有这些技术都被纳入 robust setImmediate polyfill 中。

浏览器兼容性
------

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

相关链接
----

`window.clearImmediate`
Specification: Efficient Script Yielding

Microsoft setImmediate API Demo
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()`
* `DedicatedWorkerGlobalScope.cancelAnimationFrame()` (en-US)
WindowEventHandlers.onmessageerror
==================================

`WindowEventHandlers`接口的 onmessageerror 事件处理器是一个 `EventListener`，每当一个类型为 `messageerror` 的 `EventListener` 事件在一个窗口被触发 --也就是说，当它收到的消息不能是deserialized (en-US) 。

**备注：** 此特性在 Web Worker 中可用

语法
--
```

window.onmessageerror = function() { ... };
```

规范
--

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

See also
--------

* Using channel messaging
Window: error event
===================

当资源加载失败或无法使用时，会在`Window`对象触发`error`事件。例如：script 执行时报错。

|  |  |
| --- | --- |
| Bubbles（支持冒泡） | No |
| Cancelable（可撤销） | No |
| Interface（接口） | `Event` or `UIEvent` |
| Event handler property（事件处理程序属性） | `onerror` |

如果它是由用户界面元素生成的，或者是由事件实例生成的，那么此事件是`UIEvent`实例。

示例
--

### 在线示例

#### 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>Event log:</label>
  <textarea readonly class="event-log-contents" rows="8" cols="30"></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.

相关事件
----

* This event on `Element` targets: `error` event