Question

在以前的iOS版本中，<a>标签会打开Mobile Safari，您必须拦截这些标记，而不是留在webapp（用户已保存到主屏幕的HTML页面）中。 / p>

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

我尝试过使用window.open和a target="_blank"，但都无效。

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

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

请注意，这是每个人通常都会问的“对话”问题（“如何不打开Safari”）。这种行为似乎是新的默认行为，我无法弄清楚如何恢复旧行为！

Answer 1

更新10/23/13：已在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

Answer 2

拥有目标_blank的锚标记将在iOS 7.0.3中有效，但使用window.open将无效，并将继续在7.0.3的webview中打开：

window.open('http://www.google.com/', '_blank');

Answer 3

这是过去几个月beta的已知问题。没有解决方法，从我可以看出，Apple已经对任何修复的ETA保持沉默，甚至认识到它是一个错误。错误报告已提交，但未更新/回复。

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

Answer 4

我暂时找到了两个解决这个问题的方法，显然在外部链接上使用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);
  });
}

Answer 5

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

我只想添加评论，但显然这太长了。

当Apple允许无格式的webapps保存到设备的主屏幕时，Apple为WebApp世界奠定了基础。这个“虫子”感觉就像向后退了一步。在最终版本中留下这样的间隙错误似乎并非如此。至少没有一个，一旦他们意识到这一点，他们就不会公开声明他们正在努力修复它，就像他们使用锁屏旁路一样。虽然似乎没有明确的理由，但我觉得这种感觉是无法帮助的。

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

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

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

我将链接封装在边缘到边缘的标签上，上面有换行符，并且下面有助于使URL的复制和粘贴过程更容易。

Answer 6

2013年10月22日发布的iOS v7.0.3解决了这个问题。

Answer 7

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，但无论出于何种原因使用这样的锚标签the JavaScript solution to this question will open in Safari as well。

Answer 8

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

Answer 9

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

以下是我在iOS7中保存到桌面的webapp的工作方式。

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

...

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

问题是，它似乎忽略了目标选项，并在同一个全屏桌面webapp中打开它，并且无法导航回我可以看到的内容。

Answer 10

window.open('http://www.google.com/', '_system');

这将在最新版本的iOS上打开本机Safari应用程序......

快乐的编码!!

Answer 11

也许你应该在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

如何从iOS 7中的WebApp打开Safari

11 个答案: