退出全屏效果与全屏效果我们可能在看视频网站时看到多,这里来为各位介绍利用js全屏和退出全屏代码范例吧，,需要的朋友可以参考下
JS 全屏和退出全屏
js实现浏览器窗口全屏和退出全屏的功能，市面上主流浏览器如：谷歌、火狐、360等都是兼容的，不过IE低版本有点瑕疵（全屏状态下仍有底部的状态栏）。
这个demo基本是够了，直接复制下面的源码另存为html文件看效果吧。
nbsp;html>js全屏和退出全屏代码 function requestFullScreen(element) { // 判断各种浏览器，找到正确的方法 var requestMethod = element.requestFullScreen || //W3C element.webkitRequestFullScreen || //Chrome等 element.mozRequestFullScreen || //FireFox element.msRequestFullScreen; //IE11 if (requestMethod) { requestMethod.call(element); } else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } }}
登录后复制
//退出全屏 判断浏览器种类
function exitFull() { // 判断各种浏览器，找到正确的方法 var exitMethod = document.exitFullscreen || //W3C document.mozCancelFullScreen || //Chrome等 document.webkitExitFullscreen || //FireFox document.webkitExitFullscreen; //IE11 if (exitMethod) { exitMethod.call(document); } else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } }}登录后复制
我们知道，浏览器全屏通常按快捷键F11。JS控制浏览器全屏也不稀奇，它让Web应用看上去更像似原生软件应用效果。比如点餐系统、叫号系统等等。
JS让浏览器全屏及退出全屏的方法网上很多，这不是重点，重点是需注意：浏览器全屏只能通过鼠标手势点击事件去触发。
JS全屏方法
var $fullScreen = document.getElementById("js-fullScreen");//按钮 if ($fullScreen) { $fullScreen.addEventListener("click", function () { var docElm = document.documentElement; if (docElm.requestFullscreen) { docElm.requestFullscreen(); } else if (docElm.msRequestFullscreen) { docElm.msRequestFullscreen(); } else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } }, false); }登录后复制
JS退出全屏方法
var $cancelFullScreen = document.getElementById("js-cancelFullScreen"); if ($cancelFullScreen) { $cancelFullScreen.addEventListener("click", function () { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } }, false); }登录后复制
控制台警告
Failed to execute ‘requestFullscreen’ on ‘Element’: API can only be initiated by a user gesture.
释义：在”Element”上执行”requestFullscreen”方法失败，javascript API仅允许通过手势去创建！（即没有权限）
通常是由于程序员想触发浏览器自动全屏显示而导致。但是很抱歉，此方法行不通，必须通过手势去创建，哪怕onload、trigger()、mouseover也触发不了！
官方解释
该Element.requestFullscreen()方法发出异步请求，使元素全屏显示。但不能保证元素将被放入全屏模式。
如果允许进入全屏模式，文档将收到一个fullscreenchange事件，让它知道它现在处于全屏模式。如果权限被拒绝，则文档会接收到一个fullscreenerror事件。
结论
可能出于用户操作体验的考虑吧，客户端javascript让浏览器全屏只能通过鼠标手势点击事件去触发，即click()。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Nodejs+Electron ubuntu安装步骤详解
原生JS+AJAX做出三级联动效果（附代码）
Vue.js双向绑定实现步骤说明
以上就是JS 全屏和退出全屏详解（含有代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2760829.html
