JS 全屏和退出全屏详解及实例代码
JS全屏和退出全屏
js实现浏览器窗口全屏和退出全屏的功能，市面上主流浏览器如：谷歌、火狐、360等都是兼容的，不过IE低版本有点瑕疵（全屏状态下仍有底部的状态栏）。
这个demo基本是够了，直接复制下面的源码另存为html文件看效果吧。
<!DOCTYPEhtml>
<html>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>js全屏和退出全屏代码</title>
<body>
<!--requestFullScreen(document.documentElement):整个网页进入全屏
requestFullScreen(document.getElementById("video-box")):指定某块区域全屏
-->
<buttononclick="requestFullScreen(document.documentElement)">全屏显示</button>
<buttononclick="exitFull()">退出全屏</button>
</body>
<scripttype="text/javascript">
functionrequestFullScreen(element){
//判断各种浏览器，找到正确的方法
varrequestMethod=element.requestFullScreen||//W3C
element.webkitRequestFullScreen||//Chrome等
element.mozRequestFullScreen||//FireFox
element.msRequestFullScreen;//IE11
if(requestMethod){
requestMethod.call(element);
}
elseif(typeofwindow.ActiveXObject!=="undefined"){//forInternetExplorer
varwscript=newActiveXObject("WScript.Shell");
if(wscript!==null){
wscript.SendKeys("{F11}");
}
}
}
//退出全屏判断浏览器种类
functionexitFull(){
//判断各种浏览器，找到正确的方法
varexitMethod=document.exitFullscreen||//W3C
document.mozCancelFullScreen||//Chrome等
document.webkitExitFullscreen||//FireFox
document.webkitExitFullscreen;//IE11
if(exitMethod){
exitMethod.call(document);
}
elseif(typeofwindow.ActiveXObject!=="undefined"){//forInternetExplorer
varwscript=newActiveXObject("WScript.Shell");
if(wscript!==null){
wscript.SendKeys("{F11}");
}
}
}
</script>
</html>
感谢阅读，希望嫩帮助到大家，谢谢大家对本站的支持！
以下是其它网友的补充
我们知道，浏览器全屏通常按快捷键F11。JS控制浏览器全屏也不稀奇，它让Web应用看上去更像似原生软件应用效果。比如点餐系统、叫号系统等等。
JS让浏览器全屏及退出全屏的方法网上很多，这不是重点，重点是需注意：浏览器全屏只能通过鼠标手势点击事件去触发。
JS全屏方法
var$fullScreen=document.getElementById("js-fullScreen");//按钮
if($fullScreen){
$fullScreen.addEventListener("click",function(){
vardocElm=document.documentElement;
if(docElm.requestFullscreen){
docElm.requestFullscreen();
}
elseif(docElm.msRequestFullscreen){
docElm.msRequestFullscreen();
}
elseif(docElm.mozRequestFullScreen){
docElm.mozRequestFullScreen();
}
elseif(docElm.webkitRequestFullScreen){
docElm.webkitRequestFullScreen();
}
},false);
}
JS退出全屏方法
var$cancelFullScreen=document.getElementById("js-cancelFullScreen");
if($cancelFullScreen){
$cancelFullScreen.addEventListener("click",function(){
if(document.exitFullscreen){
document.exitFullscreen();
}
elseif(document.msExitFullscreen){
document.msExitFullscreen();
}
elseif(document.mozCancelFullScreen){
document.mozCancelFullScreen();
}
elseif(document.webkitCancelFullScreen){
document.webkitCancelFullScreen();
}
},false);
}
控制台警告
Failedtoexecute'requestFullscreen'on'Element':APIcanonlybeinitiatedbyausergesture.
释义：在"Element"上执行"requestFullscreen"方法失败，javascriptAPI仅允许通过手势去创建！（即没有权限）
通常是由于程序员想触发浏览器自动全屏显示而导致。但是很抱歉，此方法行不通，必须通过手势去创建，哪怕onload、trigger()、mouseover也触发不了！
官方解释
该Element.requestFullscreen()方法发出异步请求，使元素全屏显示。但不能保证元素将被放入全屏模式。
如果允许进入全屏模式，文档将收到一个fullscreenchange事件，让它知道它现在处于全屏模式。如果权限被拒绝，则文档会接收到一个fullscreenerror事件。
结论
可能出于用户操作体验的考虑吧，客户端javascript让浏览器全屏只能通过鼠标手势点击事件去触发，即click()。