js实现浏览器全屏与工具栏隐藏

2022-05-27 网页编程网 网页编程网

1.allowfullscreen属性

只有包含在顶层文档内部的标准HTML元素、svg元素和math元素，以及拥有allowfullscreen属性的iframe的内部元素可以。

所以只能由用户手势或鼠标点击事件触发。window.onload、定时器、鼠标移动事件都不能实现全屏，iframe内部的元素，object的内部元素也不行。

全屏api文档地址：https://developer.mozilla.org/zh-CN/docs/Web/API/Fullscreen_API

1.1兼容性

谷歌、火狐、Edg、360极速模式都可以实现全屏，360兼容模式不生效。

示例代码：

<body>
<button id="fullScreen">全屏模式</button>
<button id="noFullScreen">取消全屏</button>
</body>
<script>
document.getElementById("fullScreen").onclick=function(){
if(document.documentElement.RequestFullScreen){
document.documentElement.RequestFullScreen();
}
//兼容火狐
console.log(document.documentElement.mozRequestFullScreen)
if(document.documentElement.mozRequestFullScreen){
document.documentElement.mozRequestFullScreen();
}
//兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
if(document.documentElement.webkitRequestFullScreen){
document.documentElement.webkitRequestFullScreen();
}
//兼容IE,只能写msRequestFullscreen
if(document.documentElement.msRequestFullscreen){
document.documentElement.msRequestFullscreen();
}
}
document.getElementById("noFullScreen").onclick=function(){
if(document.exitFullScreen){
document.exitFullscreen()
}
//兼容火狐
console.log(document.mozExitFullScreen)
if(document.mozCancelFullScreen){
document.mozCancelFullScreen()
}
//兼容谷歌等
if(document.webkitExitFullscreen){
document.webkitExitFullscreen()
}
//兼容IE
if(document.msExitFullscreen){
document.msExitFullscreen()
}
}
</script>

1.2全屏事件

如果元素被允许进入全屏模式，document对象会收到一个fullscreenchange事件，通知调用者当前元素已经进入全屏模式。如果全屏请求不被许可，则会收到一个fullscreenerror事件。

document.addEventListener('fullscreenchange', function(){ /*code*/ });
document.addEventListener('webkitfullscreenchange', function(){ /*code*/});
document.addEventListener('mozfullscreenchange', function(){ /*code*/});
document.addEventListener('MSFullscreenChange', function(){ /*code*/});

document.addEventListener('fullscreenerror', function(){ /*code*/ });
document.addEventListener('webkitfullscreenerror', function(){ /*code*/});
document.addEventListener('mozfullscreenerror', function(){ /*code*/);
document.addEventListener('MSFullscreenError', function(){ /*code*/ });

1.3全屏样式

全屏之后还可以选择性的调整样式，就和hover一样，如下所示：

:-webkit-full-screen { }
:-moz-full-screen { }
:-ms-fullscreen { }
:fullscreen { }

2.window.open实现浏览器工具栏等的隐藏

window.open('index.html', 'newwindow', 'fullscreen=yes, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');

fullscreen=yes设置为全屏时，IE11下测试正常，但是chrome下非全屏。

阅读原文

阅读 4148

123 显示电脑版