防止iPad网页应用程序显示Safari地址栏

Question

我有一个运行在iPad Safari上的Web应用程序。我是从iPad主页启动该应用程序的。我希望该应用程序以全屏模式启动，并继续在全屏模式下运行（即不显示Safari地址栏）。因此，我已经将以下meta标签添加到站点主页面：

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width">

我从iPad主页启动应用程序，它以全屏模式开始（不显示Safari地址栏），但当我点击站点中的另一页（具有相同的元标记，从同一站点母版页继承）时，地址栏突然出现在视图中（并保持在视图中）。链接如下所示（我正在使用jQueryMobile）：

<a href="/Home" data-ajax="false">Home</a>

如何在内部页面之间导航时保持地址栏隐藏，从而使Web应用程序保持类似于“本机应用程序”的外观？

- Journeyman

Answer 1

似乎移动版Safari不支持外部链接的全屏显示。只要使用html锚点，它就会退出全屏模式。window.scrollTo可能是某些人可行的解决方法，但我也想避免UI在切换到非全屏模式时自动翻转。

答案是使用window.location.assign()。这将保持全屏应用程序处于“本地”全屏模式。您只需要将您的标签重构为javascript window.location.assign(url)调用-然后它将保持全屏状态。

- Journeyman

---

是的，但那很糟糕。设置设备高度和其他一些媒体查询也可以使应用程序全屏，而不会破坏其他浏览器的功能。 - naugtur

@naugtur - 感谢您的评论。您是在说我可以使用标准的<a href="bla">链接，而不会跳出全屏模式吗？如果是这样，我需要什么设备高度和其他设置，并且它是否会避免不吸引人的页面交换视觉效果？ - Journeyman

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> 尽管这似乎会在iPod上破坏方向更改。我没有探索这个主题。 - naugtur

@naugtur - 我已经将该标签放在头部中了，但是在iOS 4.3.3版本中，如果你使用<a href="sample.htm">链接，则会跳出全屏模式。我相信，如果你使用这样的外部链接，jQueryMobile也会展现出这种行为。我找到的唯一解决方法是使用window.location.assign()。我对于你认为这是不好的原因感兴趣 - 这在所有浏览器上都不支持吗？- 感谢您的意见。 - Journeyman

@Journeyman使用window.location.assign()对于创建普通HTML请求的链接运行良好，但对于那些正在进行ajax调用（get/post请求）的链接会出现问题。有没有什么方法可以解决这个问题？ - Bongs

Answer 2

添加jQuery，您就不必修改任何链接。

$(document).ready(function(){
    $('a').click(function(event){
        event.preventDefault();
        window.location.assign($(this).attr('href'));
    });
});

示例链接：

<a href="nextpage.html">Next page without safari</a>

- Christoffer

---

在这种情况下，浏览器的历史记录怎么样？它会存储所有先前访问过的位置，并且返回按钮是否正常工作？ - nKognito

Answer 3

也许这个链接有帮助： 源代码。

// When ready...
window.addEventListener("load",function() {
    // Set a timeout...
    setTimeout(function(){
        // Hide the address bar!
        window.scrollTo(0, 1);
    }, 0);
});

- Phill Pafford

---

这可能适用于iOS手机和Android浏览器，但它不能在iPad上运行。 - Oskar Austegard