recursal/MDN huggingface dataset:
requestIdleCallback
===================

**`window.requestIdleCallback()`** 方法插入一个函数，这个函数将在浏览器空闲时期被调用。这使开发者能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应。函数一般会按先进先调用的顺序执行，然而，如果回调函数指定了执行超时时间`timeout`，则有可能为了在超时前执行函数而打乱执行顺序。

你可以在空闲回调函数中调用 **`requestIdleCallback()`**，以便在下一次通过事件循环之前调度另一个回调。

**备注：** 强烈建议使用`timeout`选项进行必要的工作，否则可能会在触发回调之前经过几秒钟。

语法
--


```js
requestIdleCallback(callback)
requestIdleCallback(callback, options)
```

### 参数

`callback`

一个在事件循环空闲时即将被调用的函数的引用。函数会接收到一个名为 `IdleDeadline` 的参数，这个参数可以获取当前空闲时间以及回调是否在超时时间前已经执行的状态。

`options` 可选

包括可选的配置参数。具有如下属性：

* `timeout`：如果指定了 timeout，并且有一个正值，而回调在 timeout 毫秒过后还没有被调用，那么回调任务将放入事件循环中排队，即使这样做有可能对性能产生负面影响。

### 返回值

一个 ID，可以把它传入 `Window.cancelIdleCallback()` 方法来结束回调。

示例
--

请阅读我们这篇后台任务 API 的协同调度文章中的完整示例。

规范
--

| Specification |
| --- |
| requestIdleCallback() Cooperative Scheduling of Background Tasks # the-requestidlecallback-method |

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

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

查看更多
----

* `window.cancelIdleCallback()`
* `IdleDeadline`
* `window.setTimeout()`
* `window.setInterval()`
* `window.requestAnimationFrame`
Window：cut 事件
=============

当用户通过浏览器的用户界面发起一个“剪切”动作时，将触发 **`cut`** 事件。

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

语法
--

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


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

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

事件类型
----

`ClipboardEvent`。继承自 `Event`。

Event

ClipboardEvent示例
--


```js
window.addEventListener("cut", (event) => {
  console.log("已发起剪切！");
});
```

规范
--

| 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` (en-US)
window.document
===============

**`window.document`** 返回当前窗口内的文档节点（`document`）

**备注：** 从 Firefox 3 和 IE7 开始，访问其他页面内的文档节点会受到同源策略的影响。

语法
--


```js
doc = window.document;
```

参数
--

* `doc`是一个指向`document`对象的引用
例子
--


```html
<!doctype html>
<html>
  <head>
    <title>Hello, World!</title>
  </head>
  <body>
    <script type="text/javascript">
 var doc = window.document;
 alert(doc.title); // 弹出：Hello, World!
 </script>
  </body>
</html>
```

规范
--

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

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

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

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

**`Window.sizeToContent()`** 方法根据窗口内容调整窗口大小。为了使其工作，在调用此函数时应加载 DOM 内容，例如，一旦抛出 {domxref("Document/DOMContentLoaded\_event", "DOMContentLoaded")}} 事件。

可以强行的调整窗口的最小尺寸。

语法
--


```js
sizeToContent()
```

示例
--


```js
window.sizeToContent();
```

规范
--

此特性不属于任何规范。

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

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

参见
--

* `Window`
Window：online 事件
================

当浏览器能够访问网络，且 `Navigator.onLine` (en-US) 的值被设为 `true` 时，`Window` 接口的 **`online`** 事件将被触发。

**备注：** 该事件不能用于确定某个网站可否访问。网站自身问题或防火墙都有可能阻止对特定网站的访问。


|  |  |
| --- | --- |
| 是否冒泡 | 否 |
| 是否可取消 | 否 |
| 接口 | `Event` |
| Event handler property | `ononline` |

示例
--


```js
// addEventListener version
window.addEventListener("online", (event) => {
  console.log("You are now connected to the network.");
});

// ononline version
window.ononline = (event) => {
  console.log("You are now connected to the network.");
};
```

规范
--

| Specification |
| --- |
| HTML Standard # event-online |
| HTML Standard # handler-window-ononline |

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

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

参见
--

* `offline`
Window：alert() 方法
=================

`window.alert()` 令浏览器显示一个带有可选的信息的对话框，并等待用户离开该对话框。

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

语法
--


```js
alert()
alert(message)
```

### 参数

`message` 可选

是要显示在警告对话框中的字符串，如果传入其他类型的值，会转换成字符串。

### 返回值

无（`undefined`）。

示例
--


```js
window.alert("Hello world!");
alert("Hello world!");
```


都会显示如下：

![黑色警报对话框。在左上方的小圆圈图标后面有白色的开括号和闭括号，包含 JavaScript Application 白色文本。在左下方，有一个“Hello world!”白色的文字。右下方有一个蓝色的小按钮。这个按钮的文字是黑色的 OK](/zh-CN/docs/Web/API/Window/alert/alerthelloworld.png)

注意事项
----

警告对话框应该用于不需要用户做出任何反应的信息，除了对信息的确认之外。

对话框是模态窗口——它们阻止用户访问程序界面的其他部分，直到对话框被关闭。出于这个原因，你不应该过度使用任何创建对话框（或模态窗口）的函数。

另外，`<dialog>` 元素也可用于显示警告。

规范
--

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

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

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

参见
--

* `<dialog>` 元素
* `confirm`
* `prompt`
unload
======

当文档或一个子资源正在被卸载时，触发 **`unload`** 事件。

|  |  |
| --- | --- |
| 可冒泡（Bubbles） | No |
| 可取消（Cancelable） | No |
| 接口（Interface） | `Event` |
| 事件处理程序属性（Event handler property） | `onunload` |

它在下面两个事件后被触发：

1. beforeunload (en-US) (可取消默认行为的事件)
2. pagehide (en-US)

文档处于以下状态：

* 所有资源仍存在 (图片，iframe 等.)
* 对于终端用户所有资源均不可见
* 界面交互无效 (`window.open`, `alert`, `confirm` 等.)
* 错误不会停止卸载文档的过程

请注意`unload`事件也遵循文档树：父 iframe 会在子 iframe 卸载前卸载 (参考下面的例子).

示例
--


```html
<!doctype html>
<html>
  <head>
    <title>Parent Frame</title>
    <script>
 window.addEventListener("beforeunload", function (event) {
 console.log("I am the 1st one.");
 });
 window.addEventListener("unload", function (event) {
 console.log("I am the 3rd one.");
 });
 </script>
  </head>
  <body>
    <iframe src="child-frame.html"></iframe>
  </body>
</html>
```


下面是 `child-frame.html 的内容`:


```html
<!doctype html>
<html>
  <head>
    <title>Child Frame</title>
    <script>
 window.addEventListener("beforeunload", function (event) {
 console.log("I am the 2nd one.");
 });
 window.addEventListener("unload", function (event) {
 console.log("I am the 4th and last one…");
 });
 </script>
  </head>
  <body>
    ☻
  </body>
</html>
```


当父 iframe 被卸载，事件将按 `console.log()` 消息描述的顺序触发。

规范
--

| Specification |
| --- |
| HTML Standard # event-unload |
| HTML Standard # handler-window-onunload |

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

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

参见
--

* 相关事件：`DOMContentLoaded`、`readystatechange`、`load`
* Unloading Documents — unload a document
Window.close()
==============

**`Window.close()`** 方法关闭当前窗口或某个指定的窗口。

该方法只能由 `Window.open()` 方法打开的窗口的 `window` 对象来调用。如果一个窗口不是由脚本打开的，那么，在调用该方法时，JavaScript 控制台会出现类似下面的错误：`不能使用脚本关闭一个不是由脚本打开的窗口。` 或 `Scripts may not close windows that were not opened by script.` 。

同时也要注意，对于由 `HTMLIFrameElement.contentWindow` 返回的 `Window` 对象，`close()` 也没有效果。

语法
--
```

window.close();
```

例子
--

### 关闭一个由 `window.open()`方法打开的窗口

这个例子展示了如何使用这个方法关闭使用 `window.open()` 打开的窗口


```js
// 用于存储将要打开的窗口（的引用）的全局变量
var openedWindow;

function openWindow() {
  openedWindow = window.open("moreinfo.htm");
}

function closeOpenedWindow() {
  openedWindow.close();
}
```

### 关闭当前窗口

当直接调用 window 对象的 `close()` 方法而非在一个 window 实例上调用 `close()` 时，浏览器会关闭最前面的窗口，无论是不是你的脚本创建的这个窗口。（Firefox 35.0.1：脚本不能关闭不是他打开的窗口）


```js
function closeCurrentWindow() {
  window.close();
}
```

规范
--

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

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

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

### 概述

返回当前窗口的父窗口对象。

如果一个窗口没有父窗口，则它的 `parent` 属性为自身的引用。

如果当前窗口是一个 `<iframe>`, `<object>`, 或者 `<frame>`,则它的父窗口是嵌入它的那个窗口

### 语法
```

var parentWindow = window.parent;
```

### 例子
```

if (window.parent != window.top) {
  // 至少有三层窗口
}
```

规范
--

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

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

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

参见
--

* `window.frameElement` 返回嵌入当前窗口的 frame 对象。
* `window.top` 返回当前窗口最顶层的父窗口。
Window.outerWidth
=================

概述
--

`Window.outerWidth` 获取浏览器窗口外部的宽度。表示整个浏览器窗口的宽度，包括侧边栏（如果存在）、窗口镶边（window chrome）和调正窗口大小的边框（window resizing borders/handles）。

该属性为只读，没有默认值。

语法
--
```

outWindowWidth = window.outerWidth;
```


`outWindowWidth` 是窗口的外层的宽度。

备注
--

要改变一个窗口的大小，可参考 `window.resizeBy()` 和 `window.resizeTo()`。

要获取一个窗口的内层宽度（inner width），即页面被展示的区域，请参考 `window.innerWidth`。

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

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

规范
--

DOM Level 0。不属于任何 W3C 技术规范或推荐。the To do in Notes

相关链接
----

* `window.outerHeight`, `window.innerHeight`, `window.innerWidth`
* `window.resizeBy()`, `window.resizeTo()`
Window.scroll()
===============

概述
--

滚动窗口至文档中的特定位置。

语法
--
```

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

### 参数

* `x-coord` 值表示你想要置于左上角的像素点的横坐标。
* `y-coord` 值表示你想要置于左上角的像素点的纵坐标。

- 或者 -

* `options` 值是一个 `ScrollToOptions` 字典
示例
--


```html
<!-- 把纵轴上第 100 个像素置于窗口顶部 -->

<button onClick="scroll(0, 100);">点击以向下滚动 100 像素</button>
```


使用 `options`:


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

备注
--

window.scrollTo 实际上和该方法是相同的。想要重复地滚动某个距离，请使用 window.scrollBy. 参见 window.scrollByLines, window.scrollByPages.

规范
--

| Specification |
| --- |
| CSSOM View Module # dom-window-scroll |
Window.screenX
==============

概述
--

返回浏览器左边界到操作系统桌面左边界的水平距离。

语法
--
```

lLoc = window.screenX
```


* `lLoc` 为浏览器左边到系统桌面左边的像素值
规范
--

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

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

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

参见
--

* `Window.screenY`
Window.mozInnerScreenX
======================

概要
--

在屏幕坐标中获取窗口视口左上角的 X 坐标

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

语法
--
```

screenX = window.mozInnerScreenX;
```

值
-

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

不属于任何 W3C 规范或标准。

相关链接
----

* `window.mozInnerScreenY`
* `nsIDOMWindowUtils.screenPixelsPerCSSPixel`
Window.closed
=============

概述
--

此只读属性表示所引用的窗口是否关闭。

语法
--
```

isClosed = windowRef.closed;
```


`isClosed`

一个布尔值。可能的值：

* `true`: 窗口已被关闭。
* `false`: 窗口是打开的。

示例
--

### 更改一个弹出窗口的 URL

下面的示例演示怎样更改一个已打开的弹出窗口的 URL。尝试更改 URL 之前，它使用 window.opener 属性来检查有窗口被打开，并且该窗口没有关闭：


```js
// Check that an opener exists and is not closed
if (window.opener && !window.opener.closed) {
  window.opener.location.href = "http://www.mozilla.org";
}
```


请注意，弹出窗口只能访问打开他们的窗口。

### 刷新先前打开的弹出窗口

在这个例子中，函数 refreshPopupWindow() 调用重载方法的弹出的位置要刷新其数据的对象。如果弹出窗口尚未打开，或者用户已关闭它打开一个新窗口。


```js
var popupWindow = null;

function refreshPopupWindow() {
  if (popupWindow && !popupWindow.closed) {
    // popupWindow is open, refresh it
    popupWindow.location.reload(true);
  } else {
    // Open a new popup window
    popupWindow = window.open("popup.html", "dataWindow");
  }
}
```

技术说明
----

HTML5
Window.resizeBy()
=================

概述
--

调整窗口大小。

语法
--
```

window.resizeBy(xDelta, yDelta)
```

### 参数

* `xDelta` 为窗口水平方向变化的像素值。
* `yDelta` 为窗口垂直方向变化的像素值。
例子
--


```js
// 缩小窗口
window.resizeBy(-200, -200);
```

备注
--

该方法相对于窗口当前大小来调整该窗口的大小。要以绝对大小方式调整窗口的大小，可使用 `window.resizeTo`。

从 Firefox 7，依据下面的规则，不能再调整浏览器内一个窗口的默认大小了：

1. 不能调整非 window.open 方法打开的窗口或 Tab 的大小。
2. 当一个窗口内包含有一个以上的 Tab 时，不能调整窗口的大小。
规范
--

DOM Level 0。不属于规范。
Window: 页面隐藏事件 (pagehide event)
===============================

当浏览器在显示与会话历史记录不同的页面的过程中隐藏当前页面时，**`pagehide`**(页面隐藏) 事件会被发送到一个`Window` 。例如，当用户单击浏览器的“后退”按钮时，当前页面在显示上一页之前会收到一个`pagehide`(页面隐藏) 事件。

|  |  |
| --- | --- |
| Bubbles(冒泡) | No |
| Cancelable(可取消) | No |
| Interface(接口) | `PageTransitionEvent` |
| Event handler property(事件处理程序属性) | `onpagehide` |

例子
--

在此示例中，建立了一个事件处理程序以监视 `pagehide` (页面隐藏) 事件，并在持久保存页面以进行可能的重用时执行特殊处理。


```js
window.addEventListener(
  "pagehide",
  (event) => {
    if (event.persisted) {
      /\* the page isn't being discarded, so it can be reused later \*/
    }
  },
  false,
);
```


这也可以使用 `Window` 上的 `onpagehide` 事件处理程序属性来编写：


```js
window.onpagehide = (event) => {
  if (event.persisted) {
    /\* the page isn't being discarded, so it can be reused later \*/
  }
};
```

规范
--

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

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

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

了解更多
----

* The `pageshow` event
window.length
=============

概述
--

返回当前窗口中包含的框架数量 (框架包括`frame`和`iframe`两种元素).

语法
--
```

framesCount = window.length;
```


* `framesCount`就是该窗口中框架的数量。
示例
--


```js
if (window.length) {
  // 该窗口包含至少一个子框架
}
```

规范
--

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

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

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

**`Window.onbeforeinstallprompt`** 属性是一个事件处理程序，用于处理一个 `beforeinstallprompt`，当一个 Web 清单存在时，它将在移动设备上发送，但是在提示用户将网站保存到主屏幕之前。

句法
--
```

window.addEventListener("beforeinstallprompt", function(event) { ... });

window.onbeforeinstallprompt = function(event) { ...};
```

范例
--

The following example uses the beforeinstallprompt function to verify that it is an appropriate time to display an installation prompt to the user. If it is not, the event is redispatched.


```js
let isTooSoon = true;
window.addEventListener("beforeinstallprompt", function (e) {
  if (isTooSoon) {
    e.preventDefault(); // Prevents prompt display
    // Prompt later instead:
    setTimeout(function () {
      isTooSoon = false;
      e.prompt(); // Shows prompt
    }, 10000);
  }

  // The event was re-dispatched in response to our request
  // ...
});
```

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

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

参见
--

* `BeforeInstallPromptEvent.prompt`
* `BeforeInstallPromptEvent`
Window：offline 事件
=================

`offline` 事件在浏览器失去网络连接时，在 `Window` 接口上触发。并且 `Navigator.onLine` (en-US) 的值变为 `false`。

语法
--

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


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

事件类型
----

一个 `Event`。

事件处理方法别名
--------

除了 `Window` 接口以外，事情处理方法属性 `onoffline` 同样可以用于以下目标：

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


```js
// addEventListener 版本
window.addEventListener("offline", (event) => {
  console.log("网络连接已断开。");
});

// onoffline 版本
window.onoffline = (event) => {
  console.log("网络连接已断开。");
};
```

规范
--

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

只读的`localStorage` 属性允许你访问一个`Document` 源（origin）的对象 `Storage`；存储的数据将保存在浏览器会话中。`localStorage` 类似 `sessionStorage`，但其区别在于：存储在 `localStorage` 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 `sessionStorage` 的数据会被清除。

应注意，无论数据存储在 `localStorage` 还是 `sessionStorage` ，**它们都特定于页面的协议。**

另外，`localStorage` 中的键值对总是以字符串的形式存储。 (需要注意，和 js 对象相比，键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型).

语法
--


```js
myStorage = localStorage;
```

### 值

一个可被用于访问当前源（origin）的本地存储空间的 `Storage` 对象。

### 异常

`SecurityError`

请求违反了一个策略声明，或者源（origin）不是 一个有效的 scheme/host/port tuple （例如如果 origin 使用 `file:` 或者 `data:` 形式将可能发生）。比如，用户可以有禁用允许对指定的 origin 存留数据的浏览器配置。

示例
--

下面的代码片段访问了当前域名下的本地 `Storage` 对象，并通过 `Storage.setItem()` 增加了一个数据项目。


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


该语法用于读取 `localStorage` 项，如下：


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


该语法用于移除 `localStorage` 项，如下：


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


该语法用于移除所有的 `localStorage` 项，如下：


```js
// 移除所有
localStorage.clear();
```


**备注：** 请参考 Using the Web Storage API 的完整示例文章。

规范
--

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

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

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

参见
--

* 使用 Web Storage API
* Local storage（Window.localStorage） (en-US)
* `LocalStorage` (en-US)
* `SessionStorage` (en-US)
* `Window.sessionStorage`
Window.scrollByLines()
======================

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

概要
--

按给定的行数滚动文档。

语法
--
```

window.scrollByLines(lines)
```

参数
--

* `lines` 要滚动的行数。
* `lines` 可以是正整数，也可以是负整数。
例子
--


```html
<!-- 向下滚动 5 行。 -->
<button onclick="scrollByLines(5);">down 5 lines</button>
```



```html
<!-- 向上滚动 5 行。 -->
<button onclick="scrollByLines(-5);">up 5 lines</button>
```

规范
--

这不是任何规范的一部分。

参考
--

* `window.scrollBy`, `window.scrollByPages`
WindowEventHandlers.onpopstate
==============================

`WindowEventHandlers` 混入（mixin）中的 `onpopstate` 属性是用于处理 window 对象上的 `popstate` 事件的事件处理程序。

每当激活同一文档中不同的历史记录条目时，`popstate` 事件就会在对应的 `window` 对象上触发。如果当前处于激活状态的历史记录条目是由 `history.pushState()` 方法创建的或者是由 `history.replaceState()` 方法修改的，则 `popstate` 事件的 `state` 属性包含了这个历史记录条目的 `state` 对象的一个拷贝。

**备注：** 调用 `history.pushState()` 或者 `history.replaceState()` 不会触发 `popstate` 事件。`popstate` 事件只会在浏览器某些行为下触发，比如点击后退按钮（或者在 JavaScript 中调用 `history.back()` 方法）。即，在同一文档的两个历史记录条目之间导航会触发该事件。

语法
--


```js
window.onpopstate = funcRef;
```


* `funcRef` 是一个处理函数。
示例
--

假如当前网页地址为 `http://example.com/example.html`，则运行下述代码将触发警告对话框：


```js
window.onpopstate = function (event) {
  alert(
    "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}
```


注意，即便是没有关联 `state` 对象的原始的历史条目（比如 `http://example.com/example.html`），`popstate` 事件也仍会在我们第二次调用 `history.back()`，激活这一历史条目后触发。

规范
--

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

参见
--

* `window.history`
* Manipulating the browser history
Window.sessionStorage
=====================

`sessionStorage` 属性允许你访问一个，对应当前源的 session `Storage` 对象。它与 `localStorage` 相似，不同之处在于 `localStorage` 里面存储的数据没有过期时间设置，而存储在 `sessionStorage` 里面的数据在页面会话结束时会被清除。

* 页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
* **在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，这点和 session cookie 的运行方式不同。**
* 打开多个相同的 URL 的 Tabs 页面，会创建各自的 `sessionStorage`。
* 关闭对应浏览器标签或窗口，会清除对应的 `sessionStorage`。

**备注：** 应该注意，存储在 sessionStorage 或 localStorage 中的数据**特定于页面的协议**。也就
 是说 `http://example.com` 与 `https://example.com` 的 sessionStorage 相互隔离。


被存储的键值对总是以 UTF-16 DOMString 的格式所存储，其使用两个字节来表示一个字符。对于对象、整数 key 值会自动转换成字符串形式。

语法
--


```js
// 保存数据到 sessionStorage
sessionStorage.setItem("key", "value");

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem("key");

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem("key");

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();
```

### 返回值

一个 `Storage` 对象。

示例
--

下面的代码访问当前域名的 session `Storage` 对象，并使用 `Storage.setItem()` 访问往里面添加一个数据条目。


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


下面的示例会自动保存一个文本输入框的内容，如果浏览器因偶然因素被刷新了，文本输入框里面的内容会被恢复，因此写入的内容不会丢失。


```js
// 获取文本输入框
let field = document.getElementById("field");

// 检测是否存在 autosave 键值
// (这个会在页面偶然被刷新的情况下存在)
if (sessionStorage.getItem("autosave")) {
  // 恢复文本输入框的内容
  field.value = sessionStorage.getItem("autosave");
}

// 监听文本输入框的 change 事件
field.addEventListener("change", function () {
  // 保存结果到 sessionStorage 对象中
  sessionStorage.setItem("autosave", field.value);
});
```


**备注：** 完整的使用示例可以查看使用 Web Storage API 一文。

规范
--

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

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

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


 各浏览器支持的 localStorage 和 sessionStorage 容量上限不同。测试页面 detailed rundown of all the storage capacities for various browsers。

**备注：** 从 iOS 5.1 之后，移动端的 Safari 将 localStorage 数据存储在 cache 文件中，在操作系统的要求下，会偶尔进行清除，特别是空间不足时。

相关链接
----

* 使用 Web Storage API
* `Window.localStorage`
Window.external
===============

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

`Window` API 的 `external` 属性返回一个 `External` 接口的实例，这个接口本来用于包含一些用来向浏览器添加外部搜索提供者（external search providers）的函数，但是，现在这个属性已被废弃，其中的函数现在都是空函数，无任何功能，仅为了符合规范而存在。

方法
--

`External` 对象有以下方法：

| 方法 | 描述 |
| --- | --- |
| `AddSearchProvider(descriptionURL)` | 空函数，无任何作用。参见 Autodiscovery of search plugins (en-US)。 |
| `IsSearchProviderInstalled()` | 空函数，无任何作用。 |

规范
--

| Specification |
| --- |
| HTML Standard # external |

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

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

当元素失去焦点时，\*\*`blur`\*\*事件将触发。

与 `blur` 相反的是`focus`。

|  |  |
| --- | --- |
| Bubbles（是否支持冒泡） | No |
| Cancelable（可撤销） | No |
| Interface（接口） | `FocusEvent` |
| Event handler property（事件处理程序属性） | `onblur` |
| 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-blur |
| HTML Standard # handler-onblur |

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

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

`document. activeelement` 的值在处理时因浏览器而异（Firefox bug 452307）：IE10 将其设置为焦点将移动到的元素，而 Firefox 和 Chrome 通常将其设置为文档的 body。

参见
--

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

**`window.stop()`** 方法的效果相当于点击了浏览器的停止按钮。由于脚本的加载顺序，该方法不能阻止已经包含在加载中的文档，但是它能够阻止图片、新窗口、和一些会延迟加载的对象的加载。

语法
--
```

window.stop()
```

示例
--


```js
window.stop();
```

规范
--

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

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

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

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**`customElements`** 是 `Window` 对象上的一个只读属性，接口返回一个 `CustomElementRegistry` 对象的引用，可用于注册新的 custom element，或者获取之前定义过的自定义元素的信息。

例子
--

这个属性最常用的例子是用来获取使用`CustomElementRegistry.define()`方法定义和注册的自定义元素，例如：


```js
let customElementRegistry = window.customElements;
customElementRegistry.define("my-custom-element", MyCustomElement);
```


However, it is usually shortened to something like the following:


```js
customElements.define(
  "element-details",
  class extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById(
        "element-details-template",
      ).content;
      const shadowRoot = this.attachShadow({ mode: "open" }).appendChild(
        template.cloneNode(true),
      );
    }
  },
);
```


参阅我们的 web-components-examples 获取更多有用的例子。

规范
--

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

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

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

### 概述

在当前文档页面按照指定的页数翻页。

### 语法
```

window.scrollByPages(pages)
```

### 参数

* `pages` 翻页数，正数向下翻，负数向上翻`.`
### `例子`
```

// 当前文档向下翻一页
window.scrollByPages(1);

// 当前文档向上翻一页
window.scrollByPages(-1);
```

### `备注`

`查看 window.scrollBy, window.scrollByLines, window.scroll, window.scrollTo.`

### `规范`

`DOM Level 0 不属于任何标准`