如何从iOS 7中的WebApp打开Safari

Question

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

从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

2013年3月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

Answer 2

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

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

Answer 3

对于过去几个月的测试来说，这是一个众所周知的问题。 没有解决方法，从我可以看出，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

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

---

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

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

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

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

2）更新了我们的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，但由于某种原因无法使用这样的锚标签，这个问题的JavaScript解决方案也将在Safari中打开 。

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');

这将打开本地Safari应用程序，即使在最新版本的iOS上...

快乐的编码!!

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