Chrome退出全屏问题

2024-04-27 14:15:48

字体：大中小

来源：转载

供稿：网友

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>

View Code

上一篇：桌面浏览器实现滑动翻页效果(Swiper)

下一篇：javascript实现playfair和hill密码算法