如何创建 - 全屏
了解如何使用 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 属性
