全屏文档
要以全屏打开整个页面,请使用 document.documentElement 代替 document.getElementById("element")。
在这个例子中,我们还使用一个关闭函数来退出全屏:
实例
/* 获取 documentElement () 以全屏显示页面 */
var elem = document.documentElement;
/* 全屏查看 */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
/* 退出全屏 */
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 */
:-ms-fullscreen {
background-color: yellow;
}
/* Standard syntax */
:fullscreen {
background-color: yellow;
}
亲自试一试