FullscreenAPI requestFullscreen()

示例

以全屏模式显示 <video> 元素：

/* Get the element you want displayed in fullscreen mode (a video in this example): */
var elem = document.getElementById("myvideo");

/* When the openFullscreen() function is executed, open the video in fullscreen.
Note that we must include prefixes for different browsers, as they don't support the requestFullscreen property yet */
function openFullscreen() {
if (elem.requestFullscreen) {
    elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
}
}

亲自试一试 »

下面有更多 "亲自试一试" 示例。

描述

requestFullscreen() 方法以全屏模式打开一个元素。

提示：使用退出全屏()取消全屏模式的方法。

浏览器支持

表中的数字指定完全支持该方法的第一个浏览器版本。笔记：有些浏览器需要特定的前缀（见括号）：

Method
requestFullscreen()	71.0 15.0 (webkit)	79.0 11.0 (ms)	64.0 9.0 (moz)	6.0 (webkit)	58.0 15.0 (webkit)

语法

HTMLElementObject.requestFullscreen()

参数

没有任何

技术细节

返回值：	无返回值

更多示例

要全屏打开 HTML 页面，请使用document.documentElement代替document.getElementById("element")。在这个例子中，我们还使用 close 函数来关闭全屏：

示例

/* Get the documentElement (<html>) to display the page in fullscreen */
var elem = document.documentElement;

/* View in fullscreen */
function openFullscreen() {
if (elem.requestFullscreen) {
    elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
}
}

/* Close fullscreen */
function closeFullscreen() {
if (document.exitFullscreen) {
    document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
}
}

亲自试一试 »

当页面处于全屏模式时，您还可以使用 CSS 来设置页面样式：

示例

/* Safari */
:-webkit-full-screen {
background-color: yellow;
}

/* IE11 syntax */
:-ms-fullscreen {
background-color: yellow;
}

/* Standard syntax */
:fullscreen {
background-color: yellow;
}

亲自试一试 »