recursal/MDN huggingface dataset:
Window.scrollMaxX
=================

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

**`Window.scrollMaxX`** 只读属性，返回有关文档可水平滚动的最大像素数。

语法
--
```

xMax = window.scrollMaxX
```


* `xMax` 是像素数。
示例
--


```js
// 滚动到页面的右边缘
let maxX = window.scrollMaxX;

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

提示
--

不要用这个属性来获得文档总宽度，文档总宽度不等于window.innerWidth (en-US) + window.scrollMaxX。因为 `window.innerWidth`包含所有可见的垂直滚动条的宽度，所以结果会超出文档总宽度，多出所有可见的垂直滚动条的宽度。作为替代，可使用`document.body.scrollWidth`。查看相关：`window.scrollMaxY`。

规范
--

不属于任何规范。

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

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

**`window.cancelIdleCallback()`** 方法用于取消之前调用`window.requestIdleCallback()` 的回调。

语法
--


```js
cancelIdleCallback(handle)
```

### 参数

`handle`

调用 `window.requestIdleCallback()` 时返回的 ID.

### 返回值

无（`undefined`）。

示例
--

在文章 Cooperative Scheduling of Background Tasks API 中可以查看 完整示例 。

规范
--

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

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

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

**`Window.outerHeight`** 只读属性返回整个浏览器窗口的高度（以像素为单位），包括侧边栏（如果存在）、窗口镶边（window chrome）和窗口调正边框（window resizing border/handle）。

备注
--

要改变窗口的大小，请查看 `window.resizeBy()` 和 `window.resizeTo()`。

要获取窗口的内层高度，即页面被显示区域的高度，可查看 `window.innerHeight`。

### 图像示例

下面的示意图展示了 `outerHeight` 和 `innerHeight` 两者的不同。

![innerHeight 和 outerHeight](/zh-CN/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.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`）。

示例
--

向下滚动一页：


```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：showDirectoryPicker() 方法
===============================

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

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

`Window` 接口的 **`showDirectoryPicker()`** 方法用于显示一个目录选择器，以允许用户选择一个目录。

语法
--


```js
showDirectoryPicker()
```

### 参数

`options` 可选

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

`id`

通过指定 ID，浏览器能够记住不同 ID 所对应的目录。当使用相同的 ID 打开另一个目录选择器时，选择器会打开相同的目录。

`mode`

字符串，默认为 `"read"`，可对目录进行只读访问。设为 `"readwrite"` 可对目录进行读写访问。

`startIn`

一个 `FileSystemHandle` 对象或者代表某个众所周知的目录的字符串（如：`"desktop"`、`"documents"`、`"downloads"`、`"music"`、`"pictures"`、`"videos"`）。用于指定选择器的起始目录。


### 返回值

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

### 异常

`AbortError`

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

安全性
---

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

示例
--

以下异步函数可以显示一个目录选择器并在用户选择后返回一个 `FileSystemDirectoryHandle` 对象。


```js
async function getDir() {
  const dirHandle = await window.showDirectoryPicker();

  // 操作 dirHandle 的后续代码
}
```

规范
--

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

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

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

参见
--

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

概要
--

返回一个可以检查 visibility 属性的 `locationbar` 对象。

语法
--
```

objRef = window.locationbar
```

示例
--

以下完整的 HTML 示例显示了使用 locationbar 对象的 visible 属性的方式。


```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Various DOM Tests</title>

    <script>
 var visible = window.locationbar.visible;
 </script>
  </head>
  <body>
    <p>Various DOM Tests</p>
  </body>
</html>
```

规范
--

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

相关链接
----

* `window.locationbar`, `window.menubar`, `window.personalbar` (en-US), `window.scrollbars`, `window.statusbar` (en-US), `window.toolbar` (en-US)
Window.innerHeight
==================

概述
--

浏览器窗口的视口（viewport）高度（以像素为单位）；如果有水平滚动条，也包括滚动条高度。

**备注：** If you use `nsIDOMWindowUtils.setCSSViewport()` to set the virtual window size for page layout purposes, the value returned by this property corresponds to the viewport height set using that method.

语法
--
```

var intViewportHeight = window.innerHeight;
```

### 值

`intViewportHeight` 为浏览器窗口的视口的高度。

`window.innerHeight` 属性为只读，且没有默认值。

备注
--

任何窗口对象，如 `window`、frame、frameset 或 secondary window 都支持 `innerHeight` 属性。

有一个算法用来获取不包括水平滚动条的视口高度。

例子
--

### 假设有一个 frameset


```js
var intFrameHeight = window.innerHeight; // or

var intFrameHeight = self.innerHeight;
// 返回 frameset 里面的 frame 视口的高度

var intFramesetHeight = parent.innerHeight;
// 返回上一级 frameset 的视口的高度

var intOuterFramesetHeight = top.innerHeight;
// 返回最外部 frameset 的视口的高度
```

{{todo("link to an interactive demo here")}}
改变一个窗口的大小，可以查看 `window.resizeBy()` 和 `window.resizeTo()`。

想获取窗口的外层高度（outer height），即整个浏览器窗口的高度，请查看 `window.outerHeight`。

### 图像示例

下面的示意图展示了 `outerHeight` 和 `innerHeight` 两者的区别。

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

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

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

标准相关信息
------

DOM Level 0。不属于任何 W3C 技术规范或推荐。

相关链接
----

* `window.innerWidth`
* `window.outerHeight`
* `window.outerWidth`
Window：beforeunload 事件
======================

当浏览器窗口关闭或者刷新时，会触发 **`beforeunload`** 事件。当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消关闭或刷新。

|  |  |
| --- | --- |
| Bubbles | No |
| Cancelable | Yes |
| Interface | `Event` |
| Event handler property | `onbeforeunload` |

事件使网页能够触发一个确认对话框，询问用户是否真的要离开该页面。如果用户确认，浏览器将导航到新页面，否则导航将会取消。

根据规范，要显示确认对话框，事件处理程序需要在事件上调用`preventDefault()`。

但是请注意，并非所有浏览器都支持此方法，而有些浏览器需要事件处理程序实现两个遗留方法中的一个作为代替：

* 将字符串分配给事件的`returnValue`属性
* 从事件处理程序返回一个字符串。

某些浏览器过去在确认对话框中显示返回的字符串，从而使事件处理程序能够向用户显示自定义消息。但是，此方法已被弃用，并且在大多数浏览器中不再支持。

为避免意外弹出窗口，除非页面已与之交互，否则浏览器可能不会显示在`beforeunload`事件中创建的提示，甚至根本不会显示它们。

将事件处理程序/监听器加到`window`或 `document`的`beforeunload`事件后，将阻止浏览器使用内存中的页面导航缓存，例如Firefox 的 Back-Forward 缓存或WebKit 的 Page Cache。

HTML 规范指出在此事件中调用`window.alert()`，`window.confirm()`以及`window.prompt()`方法，可能会失效。更多详细信息，请参见HTML 规范。

示例
--

HTML 规范指出作者应该使用 `Event.preventDefault()` 而非 `Event.returnValue`，然而，不是所有浏览器都支持这么做。


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

概述
--

返回文档/页面水平方向滚动的像素值。

语法
--
```

var x = window.scrollX;
```

### 参数

* x 为该文档从左侧开始滚动的像素值。
示例
--


```js
// 如果 scrollX 大于 400，则把文档重新滚动到左上角。
if (window.scrollX > 400) {
  window.scroll(0, 0);
}
```

备注
--

`pageXOffset` 属性是 `scrollX` 属性的别名：
```

window.pageXOffset == window.scrollX; // 总是 true
```


为了跨浏览器兼容性，请使用 `window.pageXOffset` 代替 `window.scrollX`。另外，旧版本的 IE（<9）两个属性都不支持，必须通过其他的非标准属性来解决此问题。完整的兼容性代码如下：


```js
var x =
  window.pageXOffset !== undefined
    ? window.pageXOffset
    : (document.documentElement || document.body.parentNode || document.body)
        .scrollLeft;
var y =
  window.pageYOffset !== undefined
    ? window.pageYOffset
    : (document.documentElement || document.body.parentNode || document.body)
        .scrollTop;
```

规范
--

* CSSOM View Module: window.scrollX (Editor's Draft)
相关链接
----

* `window.scrollY`
Window.resizeTo
===============

概述
--

动态调整窗口的大小。

语法
--
```

window.resizeTo(aWidth, aHeight)
```

### 参数

* `aWidth` 是一个整数，表示新的 `outerWidth`（单位：像素）（包括滚动条、窗口边框等）。
* `aHeight` 是一个整数，表示新的 `outerHeight`（单位：像素）（包括滚动条、标题栏、窗口边框等）。
示例
--


```js
// 将窗口设置为整个屏幕的 1/4 大小（面积）
function quarter() {
  window.resizeTo(window.screen.availWidth / 2, window.screen.availHeight / 2);
}
```

备注
--

从 Firefox 7 开始，不能改变浏览器窗口的大小了，要依据下面的规则：

1. 不能设置那些不是通过 window.open 创建的窗口或 Tab 的大小。
2. 当一个窗口里面含有一个以上的 Tab 时，无法设置窗口的大小。
规范
--

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

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

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

参见
--

* `window.resizeBy()`
Window.screen
=============

返回当前 window 的 screen 对象。screen 对象实现了`Screen`接口，它是个特殊的对象，返回当前渲染窗口中和屏幕有关的属性。

语法
--
```

screenObj = window.screen;
```

示例
--


```js
if (screen.pixelDepth < 8) {
  // use low-color version of page
} else {
  // use regular, colorful page
}
```

Specification
-------------

TBD
Window.blur()
=============

总结
--

将焦点移出顶层窗口。

语法
--
```

window.blur()
```

示例
--


```js
window.blur();
```

注意
--

使用 window.blur() 方法与用户主动将焦点移出顶层窗口本质上是一样的。

规范
--

| Specification |
| --- |
| HTML Standard # dom-window-blur |
Window.showModalDialog()
========================

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

**`Window.showModalDialog()`** 用于创建和展示一个指向特定网页的模态对话框。

语法
--
```

returnVal = window.showModalDialog(uri[, arguments][, options]);
```


其中

* `returnVal` 集合类型 (Set) 返回值。由`uri`指定的页面返回。
* `uri` 要在模态对话框中打开的页面 URI。
* `arguments` 可选变量。可以通过该参数将需要的值传入对话框。
* `options` 可选字符串参数。用于设置对话框打开的样式，使用一个或多个逗号分隔。

| Syntax | Description |
| --- | --- |
| `center: {on | off | yes | no | 1 | 0 }` | If this argument's value is `on`, `yes`, or 1, the dialog window is centered on the desktop; otherwise it's hidden. The default value is `yes`. |
| `dialogheight: height` | Specifies the height of the dialog box; by default, the size is specified in pixels. |
| `dialogleft: left` | Specifies the horizontal position of the dialog box in relation to the upper-left corner of the desktop. |
| `dialogwidth: width` | Specifies the width of the dialog box; by default, the size is specified in pixels. |
| `dialogtop: top` | Specifies the vertical position of the dialog box in relation to the upper-left corner of the desktop. |
| `resizable: {on | off | yes | no | 1 | 0 }` | If this argument's value is `on`, `yes`, or 1, the dialog window can be resized by the user; otherwise its size is fixed. The default value is `no`. |
| `scroll: {on | off | yes | no | 1 | 0 }` | If this argument's value is `on`, `yes`, or 1, the dialog window has scroll bars; otherwise its size is fixed. The default value is `no`. |

**备注：** Firefox does not implement the `dialogHide`, `edge`, `status`, or `unadorned` arguments.

Compatibility
-------------

Introduced by Microsoft Internet Explorer 4. Support added to Firefox in Firefox 3 (deprectated in Fx 28), and to Safari in Safari 5.1.

Examples
--------

Try out `showModalDialog()`.

Notes
-----

`showModalDialog()` is currently being standardized as part of HTML5. The third argument (for additional options) is not present in the HTML5 version, and is (safely) ignored by both Safari and Chrome.

Specification
-------------

* `showModalDialog()`
* HTML5 Dialogs implemented using separate documents
Window.scrollY
==============

概述
--

返回文档在垂直方向已滚动的像素值。

语法
--
```

var y = window.scrollY;
```


* `y` 是文档从顶部开始滚动过的像素值。
示例
--


```js
// 保证刚好滚动到第二页
if (window.scrollY) {
  window.scroll(0, 0); // 重置滚动位置为文档的左上角
}

window.scrollByPages(1);
```

备注
--

如果正在使用相对滚动函数，如 `window.scrollBy`、`window.scrollByLines` 或 `window.scrollByPages`，则需要使用该属性来检测文档是否已被滚动了某段距离。

`pageYOffset` 属性是 `scrollY` 属性的别名：
```

window.pageYOffset == window.scrollY; // 总是返回 true
```


为了跨浏览器兼容，请使用 `window.pageYOffset` 代替 `window.scrollY`。另外，旧版本 IE（<9）两个属性都不支持，必须使用其他的非标准属性。完整的兼容性代码如下：


```js
var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = (document.compatMode || "") === "CSS1Compat";

var x = supportPageOffset
  ? window.pageXOffset
  : isCSS1Compat
    ? document.documentElement.scrollLeft
    : document.body.scrollLeft;
var y = supportPageOffset
  ? window.pageYOffset
  : isCSS1Compat
    ? document.documentElement.scrollTop
    : document.body.scrollTop;
```

规范
--

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

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

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

相关链接
----

* `window.scrollX`
Window.scrollbars
=================

### 概要

返回可以检查其可见性的滚动条对象。

### 语法
```

objRef = window.scrollbars
```

### 示例

下面的 HTML 示例展示了如何使用 window.scrollbars 对象的 visible 属性。
```

<!doctype html>
<html>
<head>
  <title>Various DOM Tests</title>
  <script>
    var visibleScrollbars = window.scrollbars.visible;
  </script>
</head>
<body>
  <p>Various DOM Tests</p>
</body>
</html>
```

### 规范

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

### 参见

* window.locationbar
* window.menubar
* window.personalbar
* window.statusbar
* window.toolbar
window.moveTo
=============

概述
--

将当前窗口移动到指定的坐标位置。

语法
--
```

window.moveTo(x, y)
```

### 参数

* `x` 是要移动到的位置横坐标
* `y` 是要移动到的位置纵坐标
示例
--


```js
function origin() {
  // 把窗口移动到左上角
  window.moveTo(0, 0);
}
```

附注
--

本函数按照指定的绝对位置移动当前窗口，而`window.moveBy`函数按照与当前位置相对的距离移动当前窗口。

从 Firefox 7 开始，如果符合下列情况,则普通网页中的 JavaScript 无法通过调用该函数来移动浏览器窗口

1. 当前窗口或标签页不是由`window.open`方法创建的
2. 当前标签页所在的窗口包含有多个标签页
规范
--

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

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

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

从 Firefox 7 开始，网站在以下情况下将不能再移动浏览器窗口。

1. 不能移动不是由 `Window.open()` 创建的窗口或标签页。
2. 当一个窗口里有多于一个标签页时，不能移动该窗口或其中的标签页。
参见
--

* `window.moveBy()`
Window：print() 方法
=================

打开打印对话框，以打印当前文档。

如果调用此函数时文档仍在加载中，那么文档将在打开打印对话框之前完成加载。

当打印对话框打开时，此方法将阻塞。

语法
--


```js
print()
```

### 参数

无

### 返回值

无（`undefined`）。

规范
--

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

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

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

参见
--

1. 打印
2. `beforeprint` 事件
3. `afterprint` 事件
onmessage
=========

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

**`message`** 事件是在窗口接受到消息（例如，从另一个浏览器上下文中调用 `Window.postMessage()`）时，在 `Window` 对象上触发的事件。

语法
--
```

window.addEventListener('message', function(event) { ... })
window.onmessage = function(event) { ... }
```

规范
--

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Window：beforeprint 事件
=====================

当相关联的文档即将打印或关闭打印预览时，将触发 **`beforeprint`** 事件。

`afterprint` 和 `beforeprint` 事件允许页面在打印开始之前更改其内容（例如，也许是移除 banner）然后在打印完成后还原这些更改。一般来说，你应该更倾向于使用 `@media print` CSS at 规则，但在某些情况下可能有必要使用这些事件。

语法
--

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


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

事件类型
----

一个通用的 `Event`。

示例
--

使用 `addEventListener()`：


```js
window.addEventListener("beforeprint", (event) => {
  console.log("打印前");
});
```


使用 `onbeforeprint` 事件处理属性：


```js
window.onbeforeprint = (event) => {
  console.log("打印前");
};
```

规范
--

| Specification |
| --- |
| HTML Standard # event-beforeprint |
| HTML Standard # handler-window-onbeforeprint |

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

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

参见
--

* 相关事件：`afterprint`
window.find
===========

**备注：** `window.find()` 可能会在未来版本的 Gecko 中被废弃。查看 Firefox bug 672395

### 概述

在一个页面中搜索指定的字符串。

### 语法
```

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


`aString`

将要搜索的字符串

`aCaseSensitive`

布尔值，如果为`true`,表示搜索是区分大小写的。

`aBackwards`

布尔值。如果为`true`, 表示搜索方向为向上搜索。

`aWrapAround`

布尔值。如果为`true`, 表示为循环搜索。

`aWholeWord` 未实现

布尔值。如果为`true`,表示采用全字匹配搜索。该参数无效; 查看 Firefox bug 481513.

`aSearchInFrames`

布尔值。如果为`true`, 表示会搜索框架内的文本。

`aShowDialog`

布尔值。如果为`true`, 则会弹出一个搜索对话框。

### 返回值

`如果搜索到指定的字符串，则返回 true，否则`返回 false.

规范
--

不属于任何规范。

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

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

只读属性 **`Window.console`** 返回一个对`Console`对象的引用，Window.console 提供了向浏览器控制台输出日志信息的方法。这些方法仅应该用于调试，并不应该用来给最终用户呈现信息。

语法
--
```

var consoleObj = window.console;
```

示例
--

### 输出信息

第一个例子向控制台输出文字。


```js
console.log("An error occurred while loading the content");
```


下边这个例子向控制台打印一个对象，可以通过点击展开组件查看对象的各项属性。


```js
console.dir(someObject);
```


更多示例参考 `console` 文章中的示例部分。

规范
--

| Specification |
| --- |
| Console Standard  |

**备注：** 当前各种浏览器之间的实现还有很多差异，推动一致的工作也在进行当中。
Window：prompt() 方法
==================

`window.prompt()` 指示浏览器显示一个对话框，其中有一个可选的信息，提示用户输入一些文本，并等待用户提交文本或取消对话框。

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

语法
--


```js
prompt()
prompt(message)
prompt(message, defaultValue)
```

### 参数

`message` 可选

向用户显示的一串文本。如果在提示窗口中没有什么可显示的，可以省略。

`defaultValue` 可选

一个字符串，包含文本输入字段中显示的默认值。

### 返回值

一个包含用户输入文本的字符串，或 `null`。

示例
--


```js
let sign = prompt("你是什么星座的？");

if (sign == "天蝎座") {
  alert("哇！我也是天蝎座的耶！");
}

// 有多种使用 prompt 方法的方式
sign = window.prompt(); // 打开空的提示窗口
sign = prompt(); // 打开空的提示窗口
sign = window.prompt("你觉得很幸运吗？"); // 打开显示提示文本为"你觉得很幸运吗？"的提示窗口
sign = window.prompt("你觉得很幸运吗？", "是的"); // 打开显示提示文本为"你觉得很幸运吗？"并且输入框默认值为"是的"的提示窗口
```


当用户点击“确定”按钮时，在输入框中输入的文本被返回。如果用户在没有输入任何文本的情况下点击确定，则返回一个空字符串。如果用户点击“取消”按钮，该函数返回 `null`。

以上提示框显示如下（在 macOS 的 Chrome 浏览器上）：

![macOS 上 Chrome 中的 prompt() 对话框](/zh-CN/docs/Web/API/Window/prompt/prompt.png)

注意事项
----

一个提示对话框包含一个单行文本框、一个取消按钮和一个确定按钮，并返回用户在该文本框中输入的（可能是空的）文本。

请注意，结果是一个字符串。这意味着你有时应该对用户给出的值进行转换。例如，如果他们的答案应该是一个数字，你应该把这个值转换为数字。


```js
const aNumber = Number(window.prompt("输入一个数字", ""));
```


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

另外，`<dialog>` 元素也可用于获取用户输入。

规范
--

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

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

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

参见
--

* `<dialog>` 元素
* `alert`
* `confirm`
Window.event
============

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

**`window.event`** 是一个由微软 IE 引入的属性，只有当 DOM 事件处理程序被调用的时候会被用到。它的值是当前正在处理的事件对象。

规范
--

没有任何规范。

微软在 MSDN 上有相关介绍。

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

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

更多资料
----

* `Event.srcElement`
Window.top
==========

返回窗口层级最顶层窗口的引用。

语法
--
```

var topWindow = window.top;
```

备注
--

`window.parent` 返回当前窗口的直接父对象，而 `window.top` 返回最顶层的窗口对象。

当你在处理父窗口的子框架（subframe），而你想获取顶层框架时，这个属性相当有用。

规范
--

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

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

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

概述
--

请求将窗口显示在前（靠近屏幕），这可能由于用户设置而失败，并且该窗口在方法返回之前不能保证会显示在最前。

语法
--


```js
focus()
```

示例
--


```js
if (clicked) {
  window.focus();
}
```

规范
--

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

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

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

**`Window.screenLeft`** 是一个只读属性，它返回浏览器左边框到左边屏幕边缘的 CSS 像素数。

**备注：** `screenLeft` 只是 `Window.screenX` 属性的别名，最初只被 IE 浏览器所支持。现在主流的浏览器都已支持该属性。

值
-

返回浏览器窗口到屏幕左边缘的 CSS 像素距离数值。

示例
--

在 screenleft-screentop 项目中，展示了一个监听浏览器窗口位置变化，动态更新 canvas 的例子。在这个例子中，当你移动浏览器窗口位置，绘制在 canvas 上的圆也会对应移动。我们通过监听 `screenLeft`/`screenTop` 的变化，并使用 `Window.requestAnimationFrame()` 来对 canvas 实时重绘，保证了浏览器窗口移动时，canvas 内部圆的位置也会发生对应的移动。


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


如果浏览器不支持 `screenLeft` 属性，我们还在代码中使用了一个 polyfill 来保证演示效果。通过设置 `Window.screenX`/`Window.screenY` 为对应别名来实现一样的功能。


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

规范
--

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

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

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

参考
--

* `window.screenTop`
* `Window.screenX`
Window.self
===========

概述
--

返回一个指向当前 window 对象的引用。

语法
--
```

objRef = window.self
```

示例
--
```

 if (window.parent.frames[0] != window.self) {
    // 当前对象不是 frames 列表中的第一个时
 }
```

备注
--

**window.self** 几乎总是用于上面示例那样的比较，用来判断当前 window 是不是父 frameset 中的第一个 frame。

规范
--

HTML5
Window：showOpenFilePicker() 方法
==============================

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

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

`Window` 接口的 **`showOpenFilePicker()`** 方法用于显示一个文件选择器，以允许用户选择一个或多个文件并返回这些文件的句柄。

语法
--


```js
showOpenFilePicker()
```

### 参数

`options` 可选

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

`multiple`

布尔值，默认为 `false`。设为 `true` 时允许用户选择多个文件。

`excludeAcceptAllOption`

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

`types`

表示允许选择的文件类型的 `Array` 数组，其中的元素为包含以下选项的对象：

`description`

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

`accept`

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


### 返回值

一个 `Promise` 对象，会兑现一个包含 `FileSystemFileHandle` 对象的 `Array` 数组。

### 异常

`AbortError`

当用户直接关闭了文件选择器或选择的文件是不宜暴露给网站的敏感文件时将会抛出 AbortError。

安全性
---

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

示例
--

在此处我们设置一个用于传递给方法的选项对象。我们将允许选择图片类型、不允许使用所有类型，也不能选择多个文件。


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


接下来我们创建一个异步函数来显示文件选择器并返回选择的文件。


```js
// 创建用于存放文件句柄的变量。
let fileHandle;

async function getFile() {
  // 打开文件选择器，解构返回的数组中的第一个元素
  [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.

参见
--

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

概要
--

返回一个可以检测 visibility 属性的 `menubar` 对象。

语法
--
```

objRef = window.menubar
```

示例
--

以下完整的 HTML 示例显示了使用 locationbar 对象的 visible 属性的方式。


```html
<html>
  <head>
    <title>Various DOM Tests</title>
    <script>
 var visible = window.menubar.visible;
 </script>
  </head>
  <body>
    <p>Various DOM Tests</p>
  </body>
</html>
```

规范
--

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

相关链接：
-----

window.locationbar, window.personalbar, window.scrollbars, window.statusbar, window.toolbar