This article demonstrates how to use the 全屏 API to place a given element into full-screen mode, as well as how to detect when the browser enters or exits full-screen mode.
Given an element that you'd like to present in full-screen mode (such as a
<video>
, for example), you can present it in full-screen mode by simply calling its
requestFullscreen()
方法。
Let's consider this
<video>
元素：
<video controls id="myvideo"> <source src="somevideo.webm"></source> <source src="somevideo.mp4"></source> </video>
We can put that video into full-screen mode as follows:
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
elem.requestFullscreen();
}
This code checks for the existence of the
requestFullscreen()
method before calling it.
It's worth noting a key difference here between the Gecko and WebKit implementations at this time: Gecko automatically adds CSS rules to the element to stretch it to fill the screen: "
width: 100%; height: 100%
". WebKit doesn't do this; instead, it centers the fullscreen element at the same size in a screen that's otherwise black. To get the same fullscreen behavior in WebKit, you need to add your own "
width: 100%; height: 100%;
" CSS rules to the element yourself:
#myvideo:-webkit-full-screen {
width: 100%;
height: 100%;
}
On the other hand, if you're trying to emulate WebKit's behavior on Gecko, you need to place the element you want to present inside another element, which you'll make fullscreen instead, and use CSS rules to adjust the inner element to match the appearance you want.
When fullscreen mode is successfully engaged, the document which contains the element receives a
fullscreenchange
event. When fullscreen mode is exited, the document again receives a
fullscreenchange
event. Note that the
fullscreenchange
event doesn't provide any information itself as to whether the document is entering or exiting fullscreen mode, but if the document has a non null
fullscreenElement
, you know you're in fullscreen mode.
It's not guaranteed that you'll be able to switch into fullscreen mode. For example,
<iframe>
elements have the
allowfullscreen
attribute in order to opt-in to allowing their content to be displayed in fullscreen mode. In addition, certain kinds of content, such as windowed plug-ins, cannot be presented in fullscreen mode. Attempting to put an element which can't be displayed in fullscreen mode (or the parent or descendant of such an element) won't work. Instead, the element which requested fullscreen will receive a
mozfullscreenerror
event. When a fullscreen request fails, Firefox will log an error message to the Web Console explaining why the request failed. In Chrome and newer versions of Opera however, no such warning is generated.
注意： Fullscreen requests need to be called from within an event handler or otherwise they will be denied.
The user always has the ability to exit fullscreen mode of their own accord; see
Things your users want to know
. You can also do so programmatically by calling the
Document.exitFullscreen()
方法。
Document
provides some additional information that can be useful when developing fullscreen web applications:
DocumentOrShadowRoot.fullscreenElement
fullscreenElement
property tells you the
元素
that's currently being displayed fullscreen. If this is non-null, the document is in fullscreen mode. If this is null, the document is not in fullscreen mode.
Document.fullscreenEnabled
fullscreenEnabled
property tells you whether or not the document is currently in a state that would allow fullscreen mode to be requested.
You'll want to be sure to let your users know that they can press the Esc key (or F11 ) to exit fullscreen mode.
In addition, navigating to another page, changing tabs, or switching to another application (using, for example, Alt - Tab ) while in fullscreen mode exits fullscreen mode as well.
In this example, a video is presented in a web page. Pressing the 返回 or Enter key lets the user toggle between windowed and fullscreen presentation of the video.
When the page is loaded, this code is run to set up an event listener to watch for the Enter key.
document.addEventListener("keydown", function(e) {
if (e.keyCode == 13) {
toggleFullScreen();
}
}, false);
This code is called when the user hits the Enter key, as seen above.
function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
This starts by looking at the value of the
fullscreenElement
属性在
document
(checking it prefixed with both
moz
,
ms
，或
webkit
). If it's
null
, the document is currently in windowed mode, so we need to switch to fullscreen mode. Switching to fullscreen mode is done by calling
element.requestFullscreen()
.
If fullscreen mode is already active (
fullscreenElement
为非
null
), we call
document.exitFullscreen()
.
注意： Currently, only Firefox 64 and Chrome 71 supports this unprefixed.
For the moment not all browsers are implementing the unprefixed version of the API (for vendor agnostic access to the Fullscreen API you can use Fscreen ). Here is the table summarizing the prefixes and name differences between them:
| 标准 | WebKit (Safari) / Blink (Chrome & Opera) / Edge | Gecko (Firefox) | Internet Explorer |
|---|---|---|---|
Document.fullscreen
|
webkitIsFullScreen
|
mozFullScreen
|
- |
Document.fullscreenEnabled
|
webkitFullscreenEnabled
|
mozFullScreenEnabled
|
msFullscreenEnabled
|
DocumentOrShadowRoot.fullscreenElement
|
webkitFullscreenElement
|
mozFullScreenElement
|
msFullscreenElement
|
Document.onfullscreenchange
|
onwebkitfullscreenchange
|
onmozfullscreenchange
|
onmsfullscreenchange
|
Document.onfullscreenerror
|
onwebkitfullscreenerror
|
onmozfullscreenerror
|
onmsfullscreenerror
|
Document.exitFullscreen()
|
webkitExitFullscreen()
|
mozCancelFullScreen()
|
msExitFullscreen()
|
Element.requestFullscreen()
|
webkitRequestFullscreen()
|
mozRequestFullScreen()
|
msRequestFullscreen()
|
| 规范 | 状态 | 注释 |
|---|---|---|
| 全屏 API | 实时标准 | Initial version. |
Document.fullscreen
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
fullscreen
弃用
|
Chrome
71
|
Edge
≤79
|
Firefox
64
|
IE 不支持 No |
Opera
58
|
Safari
6
Alternate Name
|
WebView Android
71
|
Chrome Android
71
|
Firefox Android
64
|
Opera Android
50
|
Safari iOS
6
Alternate Name
|
Samsung Internet Android
10.0
|
完整支持
不支持
弃用。不要用于新网站。
用户必须明确启用此特征。
使用非标名称。
Document.fullscreenEnabled
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
fullscreenEnabled
|
Chrome
45
|
Edge 12 |
Firefox
64
|
IE
11
Alternate Name
|
Opera Yes | Safari ? |
WebView Android
45
|
Chrome Android
45
|
Firefox Android
64
|
Opera Android Yes | Safari iOS ? |
Samsung Internet Android
5.0
|
完整支持
兼容性未知
用户必须明确启用此特征。
使用非标名称。
要求使用供应商前缀或不同名称。
Element.requestFullscreen()
Document.exitFullscreen()
Document.fullscreen
Document.fullscreenElement
:fullscreen
,
::backdrop
allowfullscreen