首页 > 代码库 > Chrome退出全屏问题
Chrome退出全屏问题
最近做了一个号称很炫的B/S展示软件，展示所用浏览器为Google Chrome。
要求展示时全屏，但是页面要有退出全屏按钮(液晶屏没有键盘)。
搜索实现方式几乎前篇一律，即两个JS函数一个实现全屏一个退出全屏：
function requestFullScreen(element){ if (element.requestFullscreen) element.requestFullscreen(); else if (element.msRequestFullscreen) element.msRequestFullscreen(); else if (element.mozRequestFullScreen) element.mozRequestFullScreen(); else if (element.webkitRequestFullscreen) element.webkitRequestFullscreen();}function cancelFullScreen(){ if (document.exitFullscreen) document.exitFullscreen(); else if (document.msExitFullscreen) document.msExitFullscreen(); else if (document.mozCancelFullScreen) document.mozCancelFullScreen(); else if (document.webkitExitFullscreen) document.webkitExitFullscreen();}
但是在实际调用中发现cancelFullScreen只对requestFullScreen实现的全屏有效而对F11实现的全屏没有效果。
所以就想到使用requestFullScreen实现全屏，但是问题又来了requestFullScreen实现的全屏仅对当页有效，
在页面跳转时全屏效果就会消失，所以还是只能通过F11实现全屏。
又搜索其中一种退出方式为除了上面两个函数外又添加两个函数：
function isFullScreen(){ return (document.fullScreenElement && document.fullScreenElement !== null) || document.mozFullScreen || document.webkitIsFullScreen;}function toggleFullScreen(element){ if (isFullScreen()) cancelFullScreen();else requestFullScreen(element || document.documentElement);}
通过调用toggleFullScreen函数实现退出全屏。
实现原理为：虽然之前已经F11全屏，但是isFullScreen检测结果依然为false，所以会调用requestFullScreen再次全屏。
而在刚开始实现全屏时会弹出退出全屏话框间接实现退出功能。
但是该方法也有个问题即会弹出两次退出全屏对话框，一次是JS调用全屏退出对话框一次是F11调用全屏对话框，如下：
修改toggleFullScreen如下便只弹出一次对话框：
function toggleFullScreen(element){ requestFullScreen(element || document.documentElement); cancelFullScreen();}
完整代码参考：
<html> <head> <meta charset="utf-8"> <title></title> <script src="../js/jquery-1.10.1.min.js"></script> <script>function isFullScreen(){ return (document.fullScreenElement && document.fullScreenElement !== null) || document.mozFullScreen || document.webkitIsFullScreen;}function requestFullScreen(element){ if (element.requestFullscreen) element.requestFullscreen(); else if (element.msRequestFullscreen) element.msRequestFullscreen(); else if (element.mozRequestFullScreen) element.mozRequestFullScreen(); else if (element.webkitRequestFullscreen) element.webkitRequestFullscreen();}function cancelFullScreen(){ if (document.exitFullscreen) document.exitFullscreen(); else if (document.msExitFullscreen) document.msExitFullscreen(); else if (document.mozCancelFullScreen) document.mozCancelFullScreen(); else if (document.webkitExitFullscreen) document.webkitExitFullscreen();}function toggleFullScreen(element){ requestFullScreen(element || document.documentElement); cancelFullScreen();} $(document).ready(function(){ $("#exit").click(function(){ toggleFullScreen(document.body); }); }); </script> </head> <body> <div style="padding-top:300px;"></div> <button id="exit">退出</button> </body></html>
Chrome退出全屏问题
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。