如何退出全屏 Web 应用程序答案

【问题标题】：How to quit a full screen web app如何退出全屏 Web 应用程序
【发布时间】：2015-03-24 20:03:21
【问题描述】：

我们正在尝试让我们的网络应用程序作为全屏网络应用程序运行。我使用这些元标记让它工作：

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="Full Screen">

因此，现在当您从 iPhone 或 Android 设备的主屏幕启动网络应用程序时，它将以全屏模式启动（没有浏览器控件）。

现在我们需要一种允许用户退出的方法，我希望创建一个具有退出按钮的菜单，但使用 window.close() 在 chrome 中出现以下错误：

Scripts may close only the windows that were opened by it.

处理这个问题的正确方法是什么？

【问题讨论】：

标签： javascript android iphone

【解决方案1】：

关闭全屏模式的一种方法是使用以下脚本：

 function exitFullScreen(element) { 
        var requestMethod = element.exitFullscreen ||
                                                  element.mozCancelFullScreen || 
                                                  element.webkitExitFullscreen || 
                                                  element.msExitFullscreen; 
         if (requestMethod) { 
               requestMethod.call(element); 
         } else { 
               console.log("Oops. Request method false."); 
          } 
     }

然后这样称呼它：

       var $smallscreenButton = $("#smallscreen-button"); 
       $smallscreenButton.on("click", function() { 
                    var elem = document;
                    exitFullScreen(elem); 
        });

您使用 window.close() 分阶段的错误是您应该使用 window.open() 在相同的 javascript 中打开窗口，然后它应该正确关闭。你只是不能用 javascript 关闭随机窗口，这就是为什么你不能在不先打开的情况下调用 close。

所以，比如：

 var myWindow = window.open();
 myWindow.close(); // this works.

来源：

[1]How can we programmatically enter and exit the fullscreen mode in javascript?

[2]window.close() doesn't work - Scripts may close only the windows that were opened by it

【讨论】：

webkit one 在 safari (iphone) 和 chrome (android) 中大显身手

【解决方案2】：

这是How to user HTML5 fullscreen api的一个很好的教程

从此，退出全屏：

if (document.exitFullscreen) {
    document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
    document.msExitFullscreen();
}

您可以在任何 DOM 元素的点击方法中编写上述代码，例如使用 jquery：

$("#exitFullScreen").click(function(){
    // the above code
        if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
});

其他参考资料：

【讨论】：