Chrome退出全屏问题

时间：2014-12-06 01:23:10 阅读：271 评论：0 收藏：0 [点我收藏+]

最近做了一个号称很炫的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退出全屏问题

标签：style blog http io ar color os 使用 sp

原文地址：http://www.cnblogs.com/walden1024/p/4147714.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行