如何退出全屏网页应用程序

Question

如何退出全屏网页应用程序

20

我们正在尝试将我们的Web应用程序运行为全屏Web应用程序。我使用以下元标记使其正常工作：

    <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设备的主屏幕启动Web应用程序时，它将全屏启动（没有浏览器控件）。

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

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

应该如何正确处理这个问题？

- Mike2012

2个回答

3

这里有一个关于如何使用HTML5全屏API的好教程：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();
    }
});

其他参考资料:

注：该文档提供了关于全屏模式的相关参考资料。

- Chintan Soni

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mico · Accepted Answer

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

 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()遇到的错误是因为你应该在同一个javascript中使用window.open()打开窗口，然后才能正确地关闭它。你不能随意用javascript关闭任意窗口，这就是为什么必须先打开再调用close的原因。

所以，类似于以下代码：

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

参考资料:

[1] 如何使用Javascript编写程序进入和退出全屏模式？

[2] window.close()无法关闭窗口——脚本只能关闭它打开的窗口