全屏窗口

创建于 2024-12-03 / 26

字体： [默认] [大] [更大]

了解如何使用 JavaScript 制作全屏窗口。

全屏窗口

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

点击按钮以全屏模式打开视频:

亲自试一试 »

全屏视频

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

实例

<script>
/* 获取您希望以全屏模式显示的元素（本例中为视频）:*/
var elem = document.getElementById("myvideo");

/* 执行 openFullscreen() 函数时，全屏打开视频。
请注意，我们必须包含不同浏览器的前缀，因为它们还不支持 requestFullscreen 方法 */
function openFullscreen() {
if (elem.requestFullscreen) {
    elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari 和 Opera */
    elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
}
}
</script>
亲自试一试 »

全屏文档

要全屏打开整个页面，请使用 document.documentElement 而不是 document.getElementById(" 元素")。在这个例子中，我们还使用了一个 close 函数来关闭全屏:

实例

<script>
/* 获取 documentElement (<html>) 以全屏显示页面 */
var elem = document.documentElement;

/* 全屏查看 */
function openFullscreen() {
if (elem.requestFullscreen) {
    elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari 和 Opera */
    elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
}
}

/* 关闭全屏 */
function closeFullscreen() {
if (document.exitFullscreen) {
    document.exitFullscreen();
} else if (document.mozCancelFullScreen) { /* Firefox */
    document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { /* Chrome, Safari 和 Opera */
    document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE/Edge */
    document.msExitFullscreen();
}
}
</script>

您还可以在页面处于全屏模式时使用 CSS 设置样式:

实例

/* Chrome、Safari 和 Opera 语法 */
:-webkit-full-screen {
background-color: yellow;
}

/* Firefox 语法 */
:-moz-full-screen {
background-color: yellow;
}

/* IE/Edge 语法 */
:-ms-fullscreen {
background-color: yellow;
}

/* 标准语法 */
:fullscreen {
background-color: yellow;
}
亲自试一试 »

相关页面

HTML DOM 参考手册: requestFullscreen() 方法

HTML DOM 参考手册: exitFullscreen() 方法

HTML DOM 参考手册: documentElement 属性

0 人点赞过