Element.requestFullscreen()

在此页

句法
用法注意事项
范例
规范
浏览器兼容性
另请参阅
相关话题

Element.requestFullscreen() method issues an asynchronous request to make the element be displayed in full-screen mode.

It's not guaranteed that the element will be put into full screen mode. If permission to enter full screen mode is granted, the returned Promise will resolve and the element will receive a fullscreenchange event to let it know that it's now in full screen mode. If permission is denied, the promise is rejected and the element receives a fullscreenerror event instead. If the element has been detached from the original document, then the document receives these events instead.

Earlier implementations of the Fullscreen API would always send these events to the document rather than the element, and you may need to be able to handle that situation. Check 浏览器兼容性 in fullscreen for specifics on when each browser made this change.

注意： This method must be called while responding to a user interaction or a device orientation change; otherwise it will fail.

句法

var promise = Element.requestFullscreen(options);

参数

选项 可选: FullscreenOptions object providing options that control the behavior of the transition to full-screen mode. Currently, the only option is navigationUI , which controls whether or not to show navigation UI while the element is in full-screen mode. The default value is "auto" , which indicates that the browser should decide what to do.

返回值

A Promise which is resolved with a value of undefined when the transition to full screen is complete.

异常

Rather than throw a traditional exception, the requestFullscreen() procedure announces error conditions by rejecting the Promise it has returned. The rejection handler receives one of the following exception values:

TypeError


								TypeError

exception may be delivered in any of the following situations:

The document containing the element isn't fully active; that is, it's not the current active document.
The element is not contained by a document.
The element is not permitted to use the "fullscreen" feature, either because of Feature Policy configuration or other access control features.
The element and its document are the same node.

用法注意事项

Compatible elements

An element that you wish to place into full-screen mode has to meet a small number of simple requirements:

It must be one of the standard HTML elements or <svg> or <math> .
It is not a <dialog> 元素。
It must either be located within the top-level document or in an <iframe> which has the allowfullscreen attribute applied to it.

Additionally, of course, the Feature Policy "fullscreen" permission must be granted.

Detecting full-screen activation

You can determine whether or not your attempt to switch to full-screen mode is successful by using the Promise 返回通过 requestFullscreen() , as seen in the 范例下文。

To learn when other code has toggled full-screen mode on and off, you should establish listeners for the fullscreenchange event on the Document . It's also important to listen for fullscreenchange to be aware when, for example, the user manually toggles full-screen mode, or when the user switches applications, causing your application to temporarily exit full-screen mode.

范例

This function toggles the first <video> element found in the document into and out of full-screen mode.

function toggleFullscreen() {
  let elem = document.querySelector("video");
  if (!document.fullscreenElement) {
    elem.requestFullscreen().catch(err => {
      alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
    });
  } else {
    document.exitFullscreen();
  }
}

If the document isn't already in full-screen mode—detected by looking to see if document.fullscreenElement has a value—we call the video's requestFullscreen() method. We don't need to do anything special if successful, but if the request fails, our promise's catch() handler presents an alert with an appropriate error message.

If, on the other hand, full-screen mode is already in effect, we call document.exitFullscreen() to disable full-screen mode.

You can see this example in action or view or remix the code on Glitch .

规范

规范	状态	注释
全屏 API The definition of 'Element.requestFullscreen()' in that specification.	实时标准	初始定义

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`requestFullscreen`	Chrome 69 69 15 Prefixed Prefixed Implemented with the vendor prefix: webkit	Edge 79 79 79 Prefixed Prefixed Implemented with the vendor prefix: webkit 12 — 14 Prefixed Prefixed Implemented with the vendor prefix: webkit	Firefox 64 64 47 — 65 Disabled Disabled From version 47 until version 65 (exclusive): this feature is behind the `full-screen-api.unprefix.enabled` preference (needs to be set to `true` ). To change preferences in Firefox, visit about:config. 9 — 65 注意事项 Alternate Name Before Firefox 44, Firefox incorrectly allowed elements inside a `<frame>` or `<object>` element to request, and to be granted, fullscreen. In Firefox 44 and onwards this has been fixed: only elements in the top-level document or in an `<iframe>` element with the `allowfullscreen` attribute can be displayed fullscreen. Alternate Name Uses the non-standard name: `mozRequestFullScreen`	IE 11 Prefixed 11 Prefixed Prefixed Implemented with the vendor prefix: ms	Opera 58 58 15 Prefixed Prefixed Implemented with the vendor prefix: webkit 12 — 15 Prefixed Prefixed Implemented with the vendor prefix: o	Safari 6 Prefixed 6 Prefixed Prefixed Implemented with the vendor prefix: webkit	WebView Android 69 69 ≤37 Prefixed Prefixed Implemented with the vendor prefix: webkit	Chrome Android 69 69 18 Prefixed Prefixed Implemented with the vendor prefix: webkit	Firefox Android 64 64 47 — 65 Disabled Disabled From version 47 until version 65 (exclusive): this feature is behind the `full-screen-api.unprefix.enabled` preference (needs to be set to `true` ). To change preferences in Firefox, visit about:config. 9 — 65 注意事项 Alternate Name Before Firefox 44, Firefox incorrectly allowed elements inside a `<frame>` 或 `<object>` to request, and to be granted, fullscreen. In Firefox 44 and onwards this has been fixed: only elements in the top-level document or in an `<iframe>` 采用 `allowfullscreen` attribute can be displayed fullscreen. Alternate Name Uses the non-standard name: `mozRequestFullScreen`	Opera Android 50 50 14 Prefixed Prefixed Implemented with the vendor prefix: webkit 12 — 14 Prefixed Prefixed Implemented with the vendor prefix: o	Safari iOS 6 Prefixed 注意事项 6 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: webkit Only available on iPad, not on iPhone. Shows an overlay button which can not be disabled.	Samsung Internet Android 10.0 10.0 1.0 Prefixed Prefixed Implemented with the vendor prefix: webkit
`选项` 参数	Chrome 71	Edge 79	Firefox 64	IE 不支持 No	Opera ?	Safari ?	WebView Android 71	Chrome Android 71	Firefox Android 64	Opera Android ?	Safari iOS ?	Samsung Internet Android 10.0
返回 `Promise`	Chrome 71	Edge 79	Firefox 64	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 71	Chrome Android 71	Firefox Android 64	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 10.0

图例

完整支持
不支持
兼容性未知 ?

用户必须明确启用此特征。
使用非标名称。
要求使用供应商前缀或不同名称。

另请参阅

元数据

最后修改： Aug 17, 2020

在此页

句法

参数

返回值

异常

用法注意事项

Compatible elements

Detecting full-screen activation

范例

规范

浏览器兼容性

图例

另请参阅

相关话题