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

 

你可能感兴趣的:(chrome)