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页面全屏展示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文给大家分享的是使用原生javascript实现的俄罗斯方块的代码，还没有很完善，这里放出来，算是抛砖引玉吧，希望小伙伴们能够喜欢。2015-03-03
这篇文章主要为大家详细介绍了使用JavaScript将图像转换为黑白二值图的两种方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-01-01![javascript函数的节流[throttle]与防抖[debounce]](//img.jbzj.com/images/xgimg/bcimg2.png)
javascript函数的节流[throttle]与防抖[debounce]
这篇文章主要介绍了javascript函数的节流[throttle]与防抖[debounce ]，详细的介绍了节流与防抖的原理和示例，具有一定的参考价值，有兴趣的可以了解一下2017-11-11
今天翻开旧项目发现挺多图片相关的插件都是用 base64 来显示图片的。谈到 base64，脑海遐想翩翩，思绪回荡之下 base64 瑕瑜互见。这篇文章主要是记录了工作中遇见的问题并加以总结，如有不妥请指正2023-02-02
click方法可以用来模拟用户点击。有的浏览器中所有元素都具有click方法，有的浏览器则没有。2011-07-07
随着Web开发技术的不断发展,JavaScript已经成为前端开发中不可或缺的一部分,下面我们就来看看如何使用JavaScript实现一个简单的天气应用吧2024-01-01
这篇文章主要介绍了js blob类型url的视频下载问题的解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
Javascript模板技术...2007-04-04
今天小编就为大家分享一篇关于js中实例与对象的区别讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章为大家分析一下js中的数组对象排序的一些知识，方便大家在以后使用中知道这些排序的原理2018-12-12
![javascript函数的节流[throttle]与防抖[debounce]](http://img.jbzj.com/images/xgimg/bcimg2.png)
最新评论