JavaScript实现页面全屏展示功能
作者：小明记账簿
最近做一个网页项目，用户要求可以全屏展示，进入系统后隐藏地址栏，于是乎，经过调研就选择了全屏API，即便如此还是遇到了一些问题，总结一下，写下此篇文章，以免以后再遇到相同的问题。
在JavaScript中，实现页面全屏展示主要依赖于HTML5的Fullscreen API，这是一个相对较新的技术，因此在旧版本的浏览器上可能不受支持，现代浏览器支出如下。
检查浏览器是否支持Fullscreen API
在尝试使用Fullscreen API之前，最好先检查浏览器是否支持它。虽然现代浏览器普遍支持，但检查总是好的做法。
if (document.fullscreenEnabled ||
document.mozFullScreenEnabled ||
document.webkitFullscreenEnabled ||
document.msFullscreenEnabled) {
// 支持全屏
} else {
// 不支持全屏
}
全屏模式
获取Element节点，然后使用requestFullscreen方法，可以使得这个节点全屏，全屏模式的具体实现可能因浏览器而异，所以要做不同浏览器处理。
const openFullScreen = () => {
const full = document.getElementById('fullscreen')
if (full.RequestFullScreen) {
full.RequestFullScreen()
} else if (full.mozRequestFullScreen) {
full.mozRequestFullScreen()
} else if (full.webkitRequestFullScreen) {
full.webkitRequestFullScreen()
} else if (full.msRequestFullscreen) {
full.msRequestFullscreen()
}
}
退出全屏模式
退出全屏模式可以通过调用document.exitFullscreen()方法实现。这个方法会尝试让当前处于全屏模式的元素退出全屏。用户手动按下ESC键，也可以退出全屏键。
const exitFullScreen = () => {
if (document.exitFullScreen) {
document.exitFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
获取全屏元素
document.fullscreenElement属性返回正处于全屏状态的Element节点，如果当前没有节点处于全屏状态，则返回null。可以通过此方法判断是否在全屏状态。
const fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
注意事项
想要全屏的元素都应该在这个Element节点下面，否则的话全屏时不会展示。如下图的html结构，点击单开弹框依然无法在全屏模式下看到弹窗，推出全屏时会看到弹窗已经出现。如果想避免这种莫名的问题，可以把document.getElementById('fullscreen') 改成document.documentElement，让整个HTML全屏。
requestFullscreen方法只能是用户主动触发才可以，如果想在页面加载时通过js调用方法或者是触发click事件触发，我劝你还是放弃吧，在控制台出现如下警告：
刷新页面也会自动退出全屏模式；
如果想改变全屏状态时的样式，首先可以在全屏时添加一个calss，此外也可以使用:full-screen伪类，大部分浏览器都支持，检查全屏时元素，也是有使用:full-screen伪类的。
到此这篇关于JavaScript实现页面全屏展示功能的文章就介绍到这了,更多相关JavaScript页面全屏展示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！