recursal/MDN huggingface dataset:
FileReader: load event
======================

当文件成功读取时，执行`load` 事件

|  |  |
| --- | --- |
| 是否冒泡 | No |
| 是否能中断退出 | No |
| 调用接口 | `ProgressEvent` |
| 事件处理属性 | `FileReader.onload` |

例子
--

### Live example

#### HTML


```html
<div class="example">
  <div class="file-select">
    <label for="avatar">Choose a profile picture:</label>
    <input
 type="file"
 id="avatar"
 name="avatar"
 accept="image/png, image/jpeg" />
  </div>

  <img src="" class="preview" height="200" alt="Image preview..." />

  <div class="event-log">
    <label>Event log:</label>
    <textarea readonly class="event-log-contents"></textarea>
  </div>
</div>
```


```
img.preview {
  margin: 1rem 0;
}

.event-log-contents {
  width: 18rem;
  height: 5rem;
  border: 1px solid black;
  margin: 0.2rem;
  padding: 0.2rem;
}

.example {
  display: grid;
  grid-template-areas:
    "select log"
    "preview log";
}

.file-select {
  grid-area: select;
}

.preview {
  grid-area: preview;
}

.event-log {
  grid-area: log;
}

.event-log > label {
  display: block;
}

.event-log-contents {
  resize: none;
}
```


#### JS


```js
const fileInput = document.querySelector('input[type="file"]');
const preview = document.querySelector("img.preview");
const eventLog = document.querySelector(".event-log-contents");
const reader = new FileReader();

function handleEvent(event) {
  eventLog.textContent =
    eventLog.textContent + `${event.type}: ${event.loaded} bytes transferred\n`;

  if (event.type === "load") {
    preview.src = reader.result;
  }
}

function addListeners(reader) {
  reader.addEventListener("loadstart", handleEvent);
  reader.addEventListener("load", handleEvent);
  reader.addEventListener("loadend", handleEvent);
  reader.addEventListener("progress", handleEvent);
  reader.addEventListener("error", handleEvent);
  reader.addEventListener("abort", handleEvent);
}

function handleSelected(e) {
  eventLog.textContent = "";
  const selectedFile = fileInput.files[0];
  if (selectedFile) {
    addListeners(reader);
    reader.readAsDataURL(selectedFile);
  }
}

fileInput.addEventListener("change", handleSelected);
```


#### 结果

规范
--

| Specification |
| --- |
| File API # dfn-load-event |
| File API # dfn-onload |

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

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

请参阅
---

* Related events: `FileReader.loadstart_event` (en-US), `FileReader.loadend_event` (en-US), `FileReader.progress_event` (en-US), `FileReader.error_event` (en-US), `FileReader.abort_event`
FileReader: 中止事件 (abort)
========================

在中止读取时会触发 `abort` 事件：例如程序调用`FileReader.abort()`.

|  |  |
| --- | --- |
| Bubbles | No |
| 可取消 | No |
| 接口 | `ProgressEvent` |
| 事件处理属性 | `FileReader.onabort` |

示例
--

### 实例

#### HTML


```html
<div class="example">
  <div class="file-select">
    <label for="avatar">选择你的头像：</label>
    <input
 type="file"
 id="avatar"
 name="avatar"
 accept="image/png, image/jpeg" />
  </div>

  <img src="" class="preview" height="200" alt="图像预览..." />

  <div class="event-log">
    <label>事件日志：</label>
    <textarea readonly class="event-log-contents"></textarea>
  </div>
</div>
```


```
img.preview {
  margin: 1rem 0;
}

.event-log-contents {
  width: 18rem;
  height: 5rem;
  border: 1px solid black;
  margin: 0.2rem;
  padding: 0.2rem;
}

.example {
  display: grid;
  grid-template-areas:
    "select log"
    "preview log";
}

.file-select {
  grid-area: select;
}

.preview {
  grid-area: preview;
}

.event-log {
  grid-area: log;
}

.event-log > label {
  display: block;
}

.event-log-contents {
  resize: none;
}
```


#### JS


```js
const fileInput = document.querySelector('input[type="file"]');
const preview = document.querySelector("img.preview");
const eventLog = document.querySelector(".event-log-contents");
const reader = new FileReader();

function handleEvent(event) {
  eventLog.textContent =
    eventLog.textContent + `${event.type}: ${event.loaded} bytes transferred\n`;

  if (event.type === "load") {
    preview.src = reader.result;
  }
}

function addListeners(reader) {
  reader.addEventListener("loadstart", handleEvent);
  reader.addEventListener("load", handleEvent);
  reader.addEventListener("loadend", handleEvent);
  reader.addEventListener("progress", handleEvent);
  reader.addEventListener("error", handleEvent);
  reader.addEventListener("abort", handleEvent);
}

function handleSelected(e) {
  eventLog.textContent = "";
  const selectedFile = fileInput.files[0];
  if (selectedFile) {
    addListeners(reader);
    reader.readAsDataURL(selectedFile);
  }
  reader.abort();
}

fileInput.addEventListener("change", handleSelected);
返回返回发的;
```


#### 结果

规范
--

| Specification |
| --- |
| File API # dfn-abort-event |
| File API # dfn-onabort |

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

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

参见
--

* 相关事件：`loadstart` (en-US), `loadend` (en-US), `progress` (en-US), `error` (en-US), `load`.
FileReader()
============

使用 **`FileReader()`** 构造器去创建一个新的 FileReader.

更多关于 `FileReader`, 查看在 Web 应用中使用 files。

语法
--


```js
var reader = new FileReader();
```

### 参数

None.

例子
--

以下代码展示了如何使用 `FileReader()` 构造器创建 `FileReader` 对象，和`FileReader`对象的用法。


```js
function printFile(file) {
  var reader = new FileReader();
  reader.onload = function (evt) {
    console.log(evt.target.result);
  };
  reader.readAsText(file);
}
```

规范
--

| Specification |
| --- |
| File API # filereaderConstrctr |

参见
--

* 在 web 应用程序中使用文件
FileReader.abort()
==================

该方法可以取消 FileReader 的读取操作，触发之后 `readyState` 为已完成（DONE）。

语法
--
```

instanceOfFileReader.abort();
```

### 例外情况

`DOM_FILE_ABORT_ERR`

对一个没有正在进行读取操作（`readyState` 不是 `LOADING`）的 `FileReader` 进行 `abort` 操作，会抛出 `DOM_FILE_ABORT_ERR` 错误。

规范
--

| Specification |
| --- |
| File API # abort |

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

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

参见
--

* `FileReader`
FileReader.error
================

返回读取文件时的错误信息

语法
--
```

var error = instanceOfFileReader.error
```

返回值
---

返回一个 `DOMError`

规范
--

| Specification |
| --- |
| File API # dom-filereader-error |

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

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

参见
--

* `FileReader`
FileReader.readAsArrayBuffer()
==============================

`FileReader` 接口提供的 **`readAsArrayBuffer()`** 方法用于启动读取指定的 `Blob` 或 `File` 内容。当读取操作完成时，`readyState` 变成 `DONE`（已完成），并触发 `loadend` 事件，同时 `result` 属性中将包含一个 `ArrayBuffer` 对象以表示所读取文件的数据。

语法
--
```

instanceOfFileReader.readAsArrayBuffer(blob);
```

### 参数

`blob`

即将被读取的 `Blob` 或 `File` 对象。

规范
--

| Specification |
| --- |
| File API # readAsArrayBuffer |

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

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

参见
--

* `FileReader`
FileReader.readAsText()
=======================

`readAsText` 方法可以将 Blob 或者 File 对象转根据特殊的编码格式转化为内容 (字符串形式)

这个方法是异步的，也就是说，只有当执行完成后才能够查看到结果，如果直接查看是无结果的，并返回 undefined

也就是说必须要挂载 实例下的 onload 或 onloadend 的方法处理转化后的结果

当转化完成后， readyState 这个参数就会转换 为 done 即完成态， event("loadend") 挂载的事件会被触发，并可以通过事件返回的形参得到中的 FileReader.result 属性得到转化后的结果

语法
--
```

 instance of FileReader.readAsText(blob[, encoding]);
```

### 参数

`二进制对象`

Blob类型 或 File类型

编码类型 (可选)

传入一个字符串类型的编码类型，如缺省，则默认为“utf-8”类型

规范
--

| Specification |
| --- |
| File API # readAsDataText |

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

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

参见
--

* FileReader
FileReader.readAsBinaryString()
===============================

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

`readAsBinaryString` 方法会读取指定的 `Blob` 或 `File` 对象，当读取完成的时候，`readyState` 会变成`DONE`（已完成），并触发 `loadend` 事件，同时 `result` 属性将包含所读取文件原始二进制格式。

注意：从 2012 年 7 月 12 日起，该方法已从 W3C 工作草案废除。

语法
--
```

instanceOfFileReader.readAsBinaryString(blob);
```

### 参数

`blob`

即将被读取的 `Blob` 或者 `File` 对象。

示例
--


```js
var canvas = document.createElement("canvas");
var height = 200;
var width = 200;

canvas.width = width;
canvas.height = height;

var ctx = canvas.getContext("2d");

ctx.strokeStyle = "#090";
ctx.beginPath();
ctx.arc(width / 2, height / 2, width / 2 - width / 10, 0, Math.PI \* 2);
ctx.stroke();

canvas.toBlob(function (blob) {
  var reader = new FileReader();

  reader.onloadend = function () {
    console.log(reader.result);
  };

  reader.readAsBinaryString(blob);
});
```

规范
--

该方法已从 FileAPI 标准移除，请使用 `FileReader.readAsArrayBuffer()` 代替。

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

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

参见
--

* `FileReader`
FileReader.result
=================

返回文件的内容。只有在读取操作完成后，此属性才有效，返回的数据的格式取决于是使用哪种读取方法来执行读取操作的。

语法
--
```

var file = instanceOfFileReader.result
```

值
-

一个字符串或者一个`ArrayBuffer` ，这取决于读取操作是使用哪种方法来进行的。

规范
--

| Specification |
| --- |
| File API # dom-filereader-result |

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

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

参见
--

* `FileReader`
FileReader.readAsDataURL()
==========================

`readAsDataURL` 方法会读取指定的 `Blob` 或 `File` 对象。读取操作完成的时候，`readyState` 会变成已完成`DONE`，并触发 `loadend` 事件，同时 `result` 属性将包含一个`data:`URL 格式的字符串（base64 编码）以表示所读取文件的内容。

语法
--


```js
readAsDataURL(blob)
```

### 参数

`blob`

即将被读取的 `Blob` 或 `File` 对象。

示例
--

### HTML


```html
<input type="file" onchange="previewFile()" /><br />
<img src="" height="200" alt="Image preview..." />
```

### JavaScript


```js
function previewFile() {
  var preview = document.querySelector("img");
  var file = document.querySelector("input[type=file]").files[0];
  var reader = new FileReader();

  reader.addEventListener(
    "load",
    function () {
      preview.src = reader.result;
    },
    false,
  );

  if (file) {
    reader.readAsDataURL(file);
  }
}
```

### 演示

读取多个文件的例子
---------

### HTML


```html
<input id="browse" type="file" onchange="previewFiles()" multiple />
<div id="preview"></div>
```

### JavaScript


```js
function previewFiles() {
  var preview = document.querySelector("#preview");
  var files = document.querySelector("input[type=file]").files;

  function readAndPreview(file) {
    // 确保 `file.name` 符合我们要求的扩展名
    if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
      var reader = new FileReader();

      reader.addEventListener(
        "load",
        function () {
          var image = new Image();
          image.height = 100;
          image.title = file.name;
          image.src = this.result;
          preview.appendChild(image);
        },
        false,
      );

      reader.readAsDataURL(file);
    }
  }

  if (files) {
    [].forEach.call(files, readAndPreview);
  }
}
```


**备注：** Internet Explorer 10 之前的版本并不支持 `FileReader()`。关于图片文件预览的兼容性解决方案，可以查看一种可能的跨浏览器图像预览解决方案或者这个更加完善的示例。

规范
--

| Specification |
| --- |
| File API # readAsDataURL |

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

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

参见
--

* `FileReader`
* `URL.createObjectURL()`
FileReader.readyState
=====================

`FileReader` **`readyState`** 属性提供了 `FileReader` 在读取操作时的当前状态。`FileReader` 存在以下状态之一：

| 值 | 状态 | 描述 |
| --- | --- | --- |
| `0` | `EMPTY` | reader 已经创建。还没有调用任何方法。 |
| `1` | `LOADING` | 读取的方法已经被调用 |
| `2` | `DONE` | 完成操作 |

`EMPTY`

`FileReader` 已经创建，但是仍没有 readAs 方法被调用。

`LOADING`

readAs 方法已经被调用。正在读取 `File` 或 `Blob`，并且尚未发生错误。

`DONE`

读取操作完成。这意味着：全部的 `File` 或 `Blob` 已经读到内存中，或者文件读取错误发生，或者调用了 `abort()`，或者取消了读取。

示例
--


```js
const reader = new FileReader();
console.log("EMPTY", reader.readyState); // readyState will be 0

reader.readAsText(blob);
console.log("LOADING", reader.readyState); // readyState will be 1

reader.onloadend = () => {
  console.log("DONE", reader.readyState); // readyState will be 2
};
```

值
-

一个数值，是 `FileReader` API 定义的三个可能状态的常量之一。

规范
--

| Specification |
| --- |
| File API # dom-filereader-readystate |

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

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

参见
--

* `Blob`
MessagePort.onmessage
=====================

`MessagePort` 接口的 **`onmessage`** 事件处理程序是一个 `EventListener`, 当在端口上触发一个类型为 **message** 的`MessageEvent` 时被调用 - 即，当端口接收到消息时。

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

Syntax
------
```

channel.onmessage = function() { ... };
```

Example
-------

In the following code block, you can see a new channel being created using the `MessageChannel.MessageChannel` constructor. When the IFrame has loaded, we pass `MessageChannel.port2` to the IFrame using `MessagePort.postMessage` (en-US) along with a message. The `handleMessage` handler then responds to a message being sent back from the IFrame using `onmessage`, putting it into a paragraph — `MessageChannel.port1` is listened to, to check when the message arrives.


```js
var channel = new MessageChannel();
var para = document.querySelector("p");

var ifr = document.querySelector("iframe");
var otherWindow = ifr.contentWindow;

ifr.addEventListener("load", iframeLoaded, false);

function iframeLoaded() {
  otherWindow.postMessage("Hello from the main page!", "\*", [channel.port2]);
}

channel.port1.onmessage = handleMessage;
function handleMessage(e) {
  para.innerHTML = e.data;
}
```


For a full working example, see our channel messaging basic demo on Github (run it live too).

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

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

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

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

See also
--------

* Using channel messaging
CanvasPattern.setTransform()
============================

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

**`CanvasPattern.setTransform()`** 方法使用 `DOMMatrix` 对象作为图案的变换矩阵，并在此图案上调用它。

语法
--


```js
setTransform(matrix)
```

### 参数

`matrix`

`DOMMatrix`，被用作图案的变换矩阵。

示例
--

### 使用 `setTransform` 方法

这是一段简单的代码片段，使用 `setTransform` 方法创建一个来自 `DOMMatrix` 具有指定图案变化的`CanvasPattern`。如例子所示，如果你把图案赋值给当前的 `fillStyle`，当你使用 `fillRect()` 方法时，图案会被应用到 canvas 上绘制出效果。

#### HTML


```html
<canvas id="canvas"></canvas> <svg id="svg1"></svg>
```


#### JavaScript


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var svg1 = document.getElementById("svg1");
var matrix = svg1.createSVGMatrix();

var img = new Image();
img.src = "canvas\_createpattern.png";

img.onload = function () {
  var pattern = ctx.createPattern(img, "repeat");
  pattern.setTransform(matrix.rotate(-45).scale(1.5));
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 400, 400);
};
```


修改下面的代码并在线查看 canvas 的变化：
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<svg id="svg1" style="display:none"></svg>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code" style="height:120px">
var img = new Image();
img.src = 'canvas_createpattern.png';
img.onload = function() {
  var pattern = ctx.createPattern(img, 'repeat');
  pattern.setTransform(matrix.rotate(-45).scale(1.5));
  ctx.fillStyle = pattern;
  ctx.fillRect(0,0,400,400);
};</textarea
>
```


```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

var svg1 = document.getElementById("svg1");
var matrix = svg1.createSVGMatrix();

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-canvaspattern-settransform-dev |

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

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

参见
--

* 接口定义，`CanvasPattern`
* `DOMMatrix`
WakeLock.request()
==================

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

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

**`WakeLock.request()`** 方法用来获取屏幕唤醒锁定权限，防止屏幕变暗、关闭或展示屏幕保护程序。

语法
--
```

WakeLock.request(wakeLockType)
```

### 参数

`wakeLockType`

唤醒锁定类型，目前必须传 `"screen"` 。

### 返回值

决议为 `WakeLockSentinel` (en-US) 的 `Promise`。

### 异常

`NotAllowedError`

当唤醒锁定不可用的时候抛出，例如在：

* 由于屏幕唤醒锁定策略，Document 不允许使用屏幕唤醒锁定。
* Document 不完全激活。
* Document 被隐藏。
* User Agent 无法获取平台的唤醒锁定。

示例
--

以下示例获取屏幕唤醒锁定并在 10 分钟后释放它：
```

function tryKeepScreenAlive(minutes) {
  navigator.wakeLock.request("screen").then(lock => {
    setTimeout(() => lock.release(), minutes * 60 * 1000);
  });
}

tryKeepScreenAlive(10);
```

规范
--

| Specification |
| --- |
| Screen Wake Lock API # the-request-method |

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

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

相关链接
----

* `WakeLock`
* `Navigator.wakeLock` (en-US)
CSSStyleSheet.deleteRule()
==========================

### 概述

**deleteRule**方法用来从当前样式表对象中删除指定的样式规则。

### 语法
```

stylesheet.deleteRule(index)
```

### 参数

* `index 是一个数字，用来指定样式规则的位置`.
### 示例
```

 myStyles.deleteRule(0);
```

### 参见

* insertRule
### 规范

deleteRule
DeviceOrientationEvent.absolute
===============================

表示该设备是否提供绝对定位数据 (这个数据是关于地球的坐标系) 或者使用了由设备决定的专门的坐标系。查看更多关于 Orientation and motion data explained 的细节。

语法
--
```

var absolute = instanceOfDeviceOrientationEvent.absolute;
```


如果方向数据跟地球坐标系和设备坐标系有差异，则`absolute`为`true`，如果方向数据由设备本身的坐标系提供，则`absolute`为`false`。

说明
--

| Specification |
| --- |
| DeviceOrientation Event Specification # ref-for-dom-deviceorientationevent-absolute |

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

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

参见
--

* `DeviceOrientationEvent`
* Detecting device orientation
* Orientation and motion data explained
* `window.ondeviceorientation`
* `deviceorientation`
DeviceOrientationEvent.beta
===========================

返回设备旋转时 X 轴的值。即：角度的数值，范围介于 -180 ------ 180 之间 表示设备正在向前或向后倾斜。更多信息见 方向和运动数据详解

语法
--
```

var beta = instanceOfDeviceOrientationEvent.beta;
```

规范
--

| Specification |
| --- |
| DeviceOrientation Event Specification # ref-for-dom-deviceorientationevent-beta② |

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

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

参见
--

* `DeviceOrientationEvent`
* Detecting device orientation
* Orientation and motion data explained
* `window.ondeviceorientation`
* `deviceorientation`
DeviceOrientationEvent.gamma
============================

返回设备旋转时 Y 轴的值;即，多少度，介于之间`-90`和`90`，通过该装置被接通向左或向右。见方向和运动数据解释的细节。

Syntax
------
```

var gamma = orientationEvent.gamma;
```

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

| Specification |
| --- |
| DeviceOrientation Event Specification # ref-for-dom-deviceorientationevent-gamma② |

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

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

See also
--------

* `DeviceOrientationEvent`
* Detecting device orientation
* Orientation and motion data explained
* `window.ondeviceorientation`
* `deviceorientation`
DeviceOrientationEvent.alpha
============================

返回设备旋转时 Z 轴的值；即：设备围绕屏幕中心扭转的角度。详细信息请查看方向和运动数据。

Syntax
------
```

var alpha = instanceOfDeviceOrientationEvent.alpha;
```

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

| Specification |
| --- |
| DeviceOrientation Event Specification # ref-for-dom-deviceorientationevent-alpha③ |

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

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

See also
--------

* `DeviceOrientationEvent`
* Detecting device orientation
* Orientation and motion data explained
* `window.ondeviceorientation`
* `deviceorientation`
Screen.availHeight
==================

概述
--

返回浏览器窗口在屏幕上可占用的垂直空间，即最大高度。

语法
--
```

iAvail = window.screen.availHeight
```

示例
--


```js
if (window.screen.availHeight !== window.screen.height) {
  // something's in the way!
  // use available to size window
}
```

规范
--

| Specification |
| --- |
| CSSOM View Module # dom-screen-availheight |

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

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

返回屏幕的颜色深度（color depth）。根据 CSSOM( CSS 对象模型 ) 视图，为兼容起见，该值总为 24。

示例
--


```js
// 检测屏幕的颜色深度
if (window.screen.colorDepth < 8) {
  // 使用低色彩版本页面
} else {
  // 使用常规的彩色版页面
}
```

规范
--

| Specification |
| --- |
| CSSOM View Module # dom-screen-colordepth |

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

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

参见
--

* `Screen.pixelDepth`
Screen.height
=============

概述
--

返回屏幕的高度（单位：像素）。

语法
--
```

iHeight = window.screen.height
```

示例
--


```js
if (window.screen.availHeight !== window.screen.height) {
  // something is occupying some screen real estate!
}
```

备注
--

注意，该属性返回的高度值并不是全部对浏览器窗口可用。小工具（Widgets），如任务栏或其他特殊的程序窗口，可能会减少浏览器窗口和其他应用程序能够利用的空间。

当返回屏幕高度时，IE 会考虑缩放设置。只有当缩放比例为 100% 时，IE 才会返回真实的屏幕高度。

规范
--

| Specification |
| --- |
| CSSOM View Module # dom-screen-height |

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

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

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

`lockOrientation` 此方法会把屏幕锁定为指定的方向。

**备注：** 此方法仅适用于已安装的 Web apps 或 全屏模式 (en-US) 的 Web 页面。

使用方法
----


```js
lockedAllowed = window.screen.lockOrientation(orientation);
```

### 参数介绍

*orientation*

需要锁定屏幕的方向。这个参数是一个字符串或者是一个由字符串组成的数组。通过多个字符串可以让屏幕只在选定的方向上进行旋转。

以下的字符串即表示你也许会指定的一些可能的方向。

`portrait-primary`

它表示屏幕处于主要的肖像模式时的方向。如果设备处于正常位置且该位置处于纵向位置，或设备的正常位置处于横向并且设备保持顺时针转动 90°，则会在主肖像模式下考虑屏幕。正常的位置是依赖于设备的。

`portrait-secondary`

它表示屏幕处于辅助肖像模式时的方向。如果设备与正常位置保持 180°，并且该位置处于纵向位置，或者设备的正常位置处于横向位置，并且持有的设备逆时针转动 90°，则屏幕将处于辅助人像模式。正常的位置是依赖于设备的。

`landscape-primary`

它代表了屏幕处于主要风景模式时的方向。如果设备保持在正常位置，并且该位置处于横向位置，或者设备的正常位置处于纵向位置，并且所保持的设备顺时针旋转 90°，则会将其视为主要横向模式。正常的位置是依赖于设备的。

`landscape-secondary`

它代表了屏幕处于次要风景模式时的方向。如果设备与其正常位置保持 180° 并且该位置处于横向，或者如果设备的正常位置是纵向的，并且所保持的设备逆时针旋转 90°，则将其视为次要横向模式。正常的位置是依赖于设备的。

`portrait`

它表示同时包含 `portrait-primary` 和 `portrait-secondary`.

`landscape`

它表示同时包含 `landscape-primary` 和 `landscape-secondary`.

`default`

它代表 `portrait-primary` 和 `landscape-primary` 主要取决于设备的自然方向。例如，如果面板分辨率为 1280 \* 800，则 `default` 为横向，如果分辨率为 800 \* 1280，则 `default` 为纵向。


**备注：** 可同时设置多个锁定值。因此，如果锁定设置为只有一个方向，屏幕方向将永远不会改变，直到屏幕方向解锁。否则，只要方向在设备锁定的方向之中，屏幕方向就会从一个方向改变到另一个方向。

返回值
---

如果方向被授权锁定，则返回 `true` ;如果方向锁定被拒绝，则返回 `false`。请注意，返回值并不表示屏幕方向确实被锁定：可能会有延迟。

示例
--

### 使用 `DOMString` 参数


```js
screen.lockOrientationUniversal =
  screen.lockOrientation ||
  screen.mozLockOrientation ||
  screen.msLockOrientation;

if (screen.lockOrientationUniversal("landscape-primary")) {
  // 方向已锁定成功
} else {
  // 方向锁定失败
}
```

### 使用 `Array` 参数


```js
screen.lockOrientationUniversal =
  screen.lockOrientation ||
  screen.mozLockOrientation ||
  screen.msLockOrientation;

if (
  screen.lockOrientationUniversal(["landscape-primary", "landscape-secondary"])
) {
  // 方向已锁定成功
} else {
  // 方向锁定失败
}
```

规范
--

不属于任何规范，也不再有望成为标准。

请使用 `ScreenOrientation.lock()` (en-US) 代替。

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

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

参见
--

* `Screen.orientation`
* `Screen.unlockOrientation()` (en-US)
* `Screen.onorientationchange` (en-US)
* 控制屏幕方向 (en-US)