阻止iPad Web应用程序显示Safari地址栏

Question

我在iPad上的Safari上运行了一个Web应用程序.我从iPad主页启动应用程序.我希望应用程序以全屏模式启动,并继续以全屏模式运行(即不显示Safari地址栏).因此,我已将以下元标记添加到网站母版页:

<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应用程序保持看起来像"本机应用程序"？

Answer 1

如果您使用外部链接,似乎Mobile Safari不会"本机"支持全屏.一旦你使用html锚点,它就会翻转出全屏模式.window.scrollTo可能是一个适用于某些人的解决方法,但我也想避免在转换到非全屏模式时UI翻转的方式.

答案是使用window.location.assign().这使全屏应用程序保持"原生"全屏模式.您只需要将您的标记重构为javascript window.location.assign(url)调用 - 然后将该内容保存在全屏幕中.

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>