如何退出全屏web应用程序?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (55)

我们正试图让我们的网络应用程序运行为全屏Web应用程序。我得到这个工作使用这些meta标签:

    <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应用程序时,它将启动到全屏(无浏览器控件)。

现在我们需要一种方法来允许用户退出,我希望创建一个菜单,它有一个退出按钮,但使用window.close()在chrome中给我提供了以下错误:

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

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

提问于
用户回答回答于

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

 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关闭随机窗口,这就是为什么你不能首先打开而不能打开关闭的原因。

所以,就像:

 var myWindow = window.open();
 myWindow.close(); // this works.
用户回答回答于

参考:如何使用HTML5全屏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元素的click方法来编写上面的代码,比如说使用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();
    }
});

其他参考:

  1. https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
  2. http://davidwalsh.name/fullscreen
  3. http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
  4. http://updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API

所属标签

可能回答问题的人

  • Hanzo

    6 粉丝0 提问7 回答
  • Richel

    9 粉丝0 提问3 回答
  • 上云小秘书

    15 粉丝0 提问2 回答
  • 风华一代

    3 粉丝469 提问2 回答

扫码关注云+社区

领取腾讯云代金券