如何将iPhone/iPad网络应用程序保持在全屏模式？

Question

我有一个离线工作的HTML5 iPad应用程序.该应用程序基本上由4个html文件和3个aspx文件组成.我的缓存清单已设置为只有html文件可脱机使用,并且aspx文件需要网络连接.这一切都很棒!

现在,我已经到了我正在对应用程序进行最后润色并试图完成主屏幕图标,以全屏模式运行等等.我已经添加了我认为必要的元标记到一旦将应用程序添加到主屏幕,该应用程序最初将以全屏模式启动.我认为标签正确的原因是,如果我在html页面之间来回导航,应用程序将(正确)启动并保持全屏模式.我遇到的问题是当点击其中一个服务器(aspx)链接时,让应用程序保持全屏模式.

单击服务器链接(aspx)时,Mobile Safari将进入完整浏览器模式并打开一个新窗口.这种行为是不可接受的,我希望我在这里遗漏一些简单的东西.

以下是我在所有页面上使用的元标记(html + aspx):

  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />

希望这提供了解问题所需的所有必要信息.我在这里看到了其他链接,声明除了主页上标记的页面之外的任何页面都会导致某些人退出全屏模式.这不是我遇到的问题,所以我想开始一个新的讨论.再次,我觉得如果我在应用程序中有5个以上的html页面,它将继续保持全屏模式.在我的情况下,aspx页面是问题所在.

Answer 1

让计算机完成繁琐的工作,这就是他们的目标.

这是我用来避免重写所有链接的一段javascript代码.这样,只有那些具有显式target = "_blank"属性的链接才会在Safari中打开.所有其他链接将保留在Web应用程序中.

var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++) {
    if(!a[i].onclick && a[i].getAttribute("target") != "_blank") {
        a[i].onclick=function() {
                window.location=this.getAttribute("href");
                return false; 
        }
    }
}

Answer 2

这是一个可以提供帮助的jQuery插件:https://github.com/mrmoses/jQuery.stayInWebApp

它是一个类似的JavaScript解决方案,但有一些更多的功能.默认情况下,它将附加到所有链接,但您可以使用它附加到具有某个类或某些内容的链接.它还可以检测iOS全屏模式,这样它就不会妨碍其他浏览器和设备.

Answer 3

根据我的经验,任何外部链接似乎都会导致应用程序跳出全屏模式.一种解决方案是使用javascript和location对象管理导航.如下:

HTML:

<a href="javascript:navigator_Go('abc.aspx');">Go</a> 

使用Javascript:

function navigator_Go(url) {
    window.location.assign(url); // This technique is almost exactly the same as a full <a> page refresh, but it prevents Mobile Safari from jumping out of full-screen mode
}

我知道以这种方式重新修改链接是一件痛苦的事情,但这是我找到解决您所面临问题的唯一方法.