如何在 iOS 7 中从 WebApp 打开 Safari

Posted 2023-02-23

【中文标题】如何在 iOS 7 中从 WebApp 打开 Safari

【英文标题】：How to open Safari from a WebApp in iOS 7

【发布时间】：2013-09-23 15:35:26

【问题描述】：

在以前的 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”）。这种行为似乎是新的默认行为，我不知道如何恢复旧行为！

【问题讨论】：

仅供参考：苹果开发人员名单上的某个人说他们认为这是一个错误。那么在 Apple 修复它之前，也许我正在寻找一个聪明的解决方法？

这确实是一个错误。尽管他们可能决定将其标记为“不会修复”。你可以点击链接吗？删除“_blank”应该可以工作。

我要去的页面是用户想要通过电子邮件发送、添加书签或打印的页面，因此留在我的网络应用程序中是有问题的。他们真的需要所有的浏览器 doohickeys。

我已确认这已在 7.0.3 中修复

【参考方案1】：

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

【讨论】：

这将删除新用户的网络应用模式，但已经安装它的用户仍然会遇到问题。

【参考方案2】：

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

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

【参考方案3】：

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

【讨论】：

是否有我们可以查看进度的有效错误报告？

@scunliffe Apple 的错误报告很遗憾没有公开。我已经提交了一些关于这个问题和其他一些问题的报告，并且在 Apple 的 NDA 允许的情况下，我肯定会报告正在取得的任何进展。

我想补充一下，对于谷歌用户，用于通过网络应用程序安装企业应用程序的 itms-services 网址也已损坏。

只是想让任何关注此问题的人知道 iOS 7.0.3 似乎解决了这个问题。我保留了独立的网络应用程序以供测试，今天发布的更新恢复了外部链接/应用程序功能。

我已确认这已在 7.0.3 中修复

【参考方案4】：

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

【参考方案5】：

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

---

这是我在 iOS7 中使用保存到桌面的 web 应用程序的方法。

function openpage()

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

...

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

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

【讨论】：

这并不能解决我的问题，因为我的问题正是您列为“问题虽然......”

【参考方案6】：

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

【参考方案7】：

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

---

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

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

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

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

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

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

【参考方案8】：

10/22/13 发布的 iOS v7.0.3 修复了该问题。

【参考方案9】：

具有目标 _blank 的锚标记将在 iOS 7.0.3 中工作，但使用 window.open 将不起作用，并将在 7.0.3 的 web 视图中保持打开状态：

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

【讨论】：

很高兴知道。谢谢！

这不适用于 iOS 7.0.6。只有this answer 为我工作。

【参考方案10】：

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。

【讨论】：

我可以确认第二个选项适用于 iOS 7.0.6

【参考方案11】：

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

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

编码愉快！！

【讨论】：

这在当前的 iOS 中不起作用。它在本地打开链接，就像 _blank 一样。除了在 Cordova 中，我找不到目标“_system”的任何文档，所以我猜这是他们添加的扩展。我们在这里讨论的是“保存到主屏幕”网络应用程序，而不是类似 phonegap 的包装器中的应用程序。