iPhone Safari Web App在新窗口中打开链接

Question

将图标添加到主屏幕后,我遇到了网络问题.如果从主屏幕启动Web,则所有链接将在Safari的新窗口中打开(并失去全屏功能).我该怎样预防呢？我找不到任何帮助,只有同样没有答案的问题.

Answer 1

我在iWebKit框架中找到了JavaScript解决方案:

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

Answer 2

此处的其他解决方案要么不考虑外部链接(您可能希望在Safari中外部打开),要么不考虑相对链接(不包含域中的域).

html5 mobile-boilerplate项目链接到这个主题,该主题有一个很好的讨论:https://gist.github.com/1042026

这是他们提出的最终代码:

<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>

Answer 3

如果您使用的是jQuery,则可以:

$("a").click(function (event) {
    event.preventDefault();
    window.location = $(this).attr("href");
});

Answer 4

这适用于iOS 6.1和Bootstrap JS链接(即下拉菜单等)

$(document).ready(function(){
    if (("standalone" in window.navigator) && window.navigator.standalone) {
      // For iOS Apps
      $('a').on('click', function(e){
        e.preventDefault();
        var new_location = $(this).attr('href');
        if (new_location != undefined && new_location.substr(0, 1) != '#' && $(this).attr('data-method') == undefined){
          window.location = new_location;
        }
      });
    }
  });

Answer 5

这是一个老问题,这里的许多解决方案都使用javascript.从那时起,iOS 11.3已经发布,您现在可以使用范围成员了.范围成员是一个URL "/",其中该范围下的所有路径都不会打开新页面.

范围成员是一个字符串,表示此Web应用程序的应用程序上下文的导航范围.

这是我的例子:

{
  "name": "Test",
  "short_name": "Test",
  "lang": "en-US",
  "start_url": "/",
  "scope": "/",
  ...
}

您还可以在此处阅读更多相关信息.我还建议使用将提供此功能的生成器.

如果您指定范围,一切都按预期工作,类似于Android,范围之外的目标将在Safari中打开 - 使用后退按钮(状态栏中的小按钮)到您的PWA.

Answer 6

根据戴维斯的回答和理查兹的评论,你应该进行域名检查.否则,您的网络应用程序中也会打开指向其他网站的链接.

$('a').live('click', function (event)
{      
    var href = $(this).attr("href");

    if (href.indexOf(location.hostname) > -1)
    {
        event.preventDefault();
        window.location = href;
    }
});

Answer 7

如果使用jQuery Mobile,您将在使用data-ajax ='false'属性时体验新窗口.事实上,每当ajaxEnabled被关断,即由与外部链路,由$ .mobile.ajaxEnabled设置或由具有目标=""属性会出现这种情况.

您可以使用以下方法修复它:

$("a[data-ajax='false']").live("click", function(event){
  if (this.href) {
    event.preventDefault();
    location.href=this.href;
    return false;
  }
});

(感谢Richard Poole的live()方法 - 没有使用bind())

如果您已全局关闭ajaxEnabled,则需要删除[data-ajax ='false'].

这花了我很长时间才弄清楚,因为我期待它是一个jQuery Mobile特定的问题,实际上它是实际上禁止新窗口的Ajax链接.