目录

操作方法 - 全屏

❮ 上一节下一节 ❯

了解如何使用 JavaScript 创建全屏窗口。

全屏窗口

如何使用 JavaScript 以全屏模式查看元素。

单击按钮以全屏模式打开视频：

亲自试一试 »

全屏视频

要全屏打开一个元素，我们使用element.requestFullscreen()方法：

示例

<script>
/* 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 method yet */
function openFullscreen() {
if (elem.requestFullscreen) {
    elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
}
}
</script>

亲自试一试 »

全屏文档

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

示例

<script>
/* 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();
}
}
</script>

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

示例

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

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

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

亲自试一试 »

相关页面

HTML DOM 参考：requestFullscreen() 方法。

HTML DOM 参考：exitFullscreen() 方法。

HTML DOM 参考：documentElement 属性。

❮ 上一节下一节 ❯