前端页面通过javascript设置全屏-兼容多浏览器
<body>
<button id="fullscreen-toggler">全屏按钮</button>
<script src="./js/jquery.js"></script>
<script>
// 设置全屏
let flag = false
document
.getElementById('fullscreen-toggler')
.addEventListener('click', function (e) {
var element = document.documentElement // 返回 html dom 中的root 节点 <html>
if (!flag) {
flag = true
// 判断浏览器设备类型
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.mozRequestFullScreen) {
// 兼容火狐
element.mozRequestFullScreen()
} else if (element.webkitRequestFullscreen) {
// 兼容谷歌
element.webkitRequestFullscreen()
} else if (element.msRequestFullscreen) {
// 兼容IE
element.msRequestFullscreen()
}
} else {
// 退出全屏
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
}
})
</script>
</body>
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 jiujue!
评论