33

在以前的 iOS 版本中，<a>标签会打开 Mobile Safari，而您必须拦截这些标签才能留在 web 应用程序（用户保存到主屏幕的 HTML 页面）中。

从 iOS 7 开始，所有链接都保留在 WebApp 中。当我真的想要它时，我无法弄清楚如何让它打开 Safari。

我试过使用window.open，a target="_blank"但都不起作用。

这是一个示例。https://s3.amazonaws.com/kaontest/testopen/index.html

如果您将其保存到 iOS 6 的主屏幕，该链接将打开 Safari。但在 iOS 7 中，它没有。

请注意，这是每个人通常都会问的相反问题（“如何不打开 Safari”）。这种行为似乎是新的默认行为，我不知道如何恢复旧行为！

4

11 回答 11

25

2013 年 10 月 23 日更新：已在 iOS 7.0.3 中修复。将 target="xxx" 属性添加到您的链接以执行此操作。也适用于 mailto: 和朋友。

这是 iOS 7.0、7.0.1 和 7.0.2 中的一个错误，并且没有已知的方法可以做到这一点。

这是从早期版本的 iOS 的回归，在 Safari 中打开的链接可以正常工作。它似乎是围绕打开 URL 的一系列问题的一部分，没有外部 URL 方案起作用（例如“mailto：”也不起作用）。

不幸的是，解决此类问题的常见嫌疑人不起作用（例如，使用表单并以“_new”为目标提交）。

还有其他严重的问题，例如警报和确认模式对话框根本不起作用。

将这些作为错误提交给 Apple可能会有所帮助， http://bugreport.apple.com

于 2013-09-20T13:02:00.590 回答
7

在 iOS 7.0.3 中使用带有 target 的锚标记_blank将起作用，但使用 window.open 将不起作用，并且将在 7.0.3 的 webview 中保持打开状态：

window.open('http://www.google.com/', '_blank');
于 2013-10-28T14:51:51.757 回答
6

这是过去几个月的测试版的一个已知问题。没有变通办法，据我所知，Apple 一直对修复的任何 ETA 保持沉默，甚至承认这是一个错误。错误报告已提交，但未更新/响应。

更多：http ://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

于 2013-09-19T14:20:04.597 回答
1

我暂时找到了两个解决这个问题的方法，这两个显然都preventDefault在外部链接上使用。

如果您要链接到另一个网站或要下载的内容，我看到的唯一选择是讽刺地提醒用户将手指放在链接上以获取触摸标注提示。再说一次，根据它是网站还是 PDF，指示他们复制链接，或者如果是 PDF，将其添加到他们的阅读列表中。由于警报和确认模式也被破坏，您需要实现自己的模式通知。如果你已经有了，那应该不会那么麻烦。

更新[2013-10-25] 显然它已在 iOS 7.0.3 中修复，并且链接在 Safari 中打开...

编辑[2013-10-05] 这几乎是我在 jQuery UI 模式中使用的内容

// iOS 7 external link polyfill
$('a[rel=external], a[rel=blank], a[target=_blank], a[href$=".pdf"]').on('click', function(e) {

  if (navigator.standalone && /iP(hone|od|ad) OS 7/.test(navigator.userAgent)) {
    e.preventDefault(); e.stopPropagation();

    var href = $(this).attr('href');

    var $dialog = $('<div id="ios-copy"></div>')
      .html('<p>iOS 7 prevents us from opening external links in Safari, you can continue to the address and risk losing all navigation or you can copy the address to your clipboard by <strong>holding your finger on the link</strong> for a few seconds.</p><p><a style="background-color: rgba(0,0,0,.75); color: #fff; font-size: 1.25em; padding: 1em;" href="' + href + '">' + href + '</a></p>')
      .appendTo('body')
      .dialog({
        title: 'External link',
        modal: true,
        buttons: {
          Ok: function() {
            $( this ).dialog( "close" );
          }
        }
      });
  }
});

另一种解决方法是使用 ajax 或 iframe 加载外部内容，但除非您的应用程序中有一个好的子浏览器或其他东西，否则它看起来很粗略。这里有一些类似的东西。

// iOS 7 external link polyfill
if (/iP(hone|od|ad) OS 7/.test(navigator.userAgent) && window.navigator.standalone) {
  $('a[rel=external], a[href$=".pdf"]').on('click', function(e) {
    e.preventDefault(); e.stopPropagation();

    var link = this;
    var href = $(link).attr('href');

    var frameContainer = $('<div></div>').css({
      position: 'absolute',
      left: 10,
      top: $(link).position().top,
      opacity: 0,
      overflow: 'scroll',
      '-webkit-overflow-scrolling': 'touch',
      height: 520,
      transition: 'opacity .25s',
      width: 300
    });

    var iosFrame = $('<iframe class="iosFrame" seamless="seamless" width="1024" height="5000"></iframe>')
      .attr('src', href)
      .css({
        height: 5000,
        'max-width': 1024,
        width: 1024,
        overflow: 'scroll !important',
        '-webkit-overflow-scrolling': 'touch !important'
      });

    var iosFrameClose = $('<a href="#"><i class="icon-cancel icon-remove icon-3x"></i></a>').css({
      position: 'absolute',
      left: -10,
      top: $(link).position().top - 20,
      'text-shadow': '1px 1px 1px #000',
      transition: 'opacity .25s',
      opacity: 0,
      '-webkit-transform': 'translate3d(0, 0, 0)',
      width: '3em',
      height: '3em'
    }).on('click', function(e) {
      e.preventDefault();
      setTimeout( function() {
        $(frameContainer).remove();
        $(iosFrameClose).remove();
      }, 250);
    });

    iosFrame.appendTo(frameContainer);
    frameContainer.appendTo('body');
    iosFrameClose.appendTo('body');

    iosFrame.contents().css({
      '-webkit-transform': 'translate3d(0, 0, 0)'
    });

    // Show this thing
    setTimeout( function() {
      $(frameContainer).css({ opacity: 1 });
      $(iosFrameClose).css({ opacity: 1 });
    }, 1);
  });
}
于 2013-09-27T12:37:16.290 回答
1

更新只是想让任何关注此问题的人知道 iOS 7.0.3 似乎解决了这个问题。我保留了独立的 web 应用程序以供测试，今天发布的更新恢复了外部链接/应用程序功能。所以我更新了我的代码，让客户知道更新他们的手机，而不是删除并重新保存网络应用程序。

我打算只添加一条评论，但显然这太长了。

当 Apple 允许将无铬 Web 应用程序保存到设备的主屏幕时，Apple 为 WebApp 世界奠定了基础。这个“错误”感觉像是倒退了一大步。在最终版本中留下如此巨大的错误似乎不是很苹果。至少不是这样，一旦他们意识到这一点，他们就不会公开声明他们正在努力修复它，就像他们对锁屏绕过所做的那样。我不禁觉得这是故意的，尽管似乎没有明确的原因。

对于处理此问题的开发人员，我能找到的唯一解决方案是

1st) 将元标记 apple-mobile-web-app-capable 设置为“no” - 这可以防止未来用户处理该问题

2nd) 更新了我们 web 应用程序中的代码以查找“独立”和 iOS 版本 7+。当条件满足时，我提供了一个说明问题的弹出窗口，并添加了一个指向该页面的链接，并要求用户原谅并要求他们复制链接并粘贴到 safari 中。

我将链接包裹在边到边标签中，上面和下面有换行符，以帮助使 url 的复制和粘贴过程更容易一些。

于 2013-10-04T01:32:35.650 回答
1

2013 年 10 月 22 日发布的 iOS v7.0.3 修复了该问题。

于 2013-10-23T07:57:15.333 回答
1 
window.open('http://www.google.com/'); // stays in web app view

<a href='http://www.google.com/' target='_blank'>Click Here</a> // opens in safari

如果您想打开 Safari，但由于某种原因无法使用这样的锚标记，则该问题的 JavaScript 解决方案也将在 Safari 中打开。

于 2014-01-10T15:42:12.107 回答
-1

它看起来像是一个故意的错误，以限制网络应用程序投放广告的能力。也许您可以尝试在 iframe 中打开新页面。

于 2013-09-23T10:05:58.577 回答
-1

编辑：对不起，我误读了你原来的问题。这个解决方案完全是为了打开一个外部网站。用于打开链接的基本 A href 标签在 iOS7 中停止工作。这是我可以让它打开外部链接的唯一方法。

以下是我如何使用在 iOS7 中保存到桌面的 web 应用程序。

function openpage()
{
window.open('http://www.yourlinkhere.com', '_blank');
}

...

<a ontouchstart="openpage();" onclick="openpage();">LINKED TEXT</a>

但问题是它似乎忽略了目标选项，它在同一个全屏桌面 web 应用程序中打开它，并且没有办法返回我可以看到的导航。

于 2013-09-23T15:05:23.683 回答
-1 
window.open('http://www.google.com/', '_system');

即使在最新版本的 iOS 上，这也会打开原生 Safari 应用程序...

编码快乐！！

于 2016-01-11T10:19:58.080 回答
-2

也许你应该在 page2.html 的头部删除“apple-mobile-web-app-capable”的元设置

https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW1

于 2013-09-19T06:42:07.893 回答