如何在 iOS 7 中从 WebApp 打开 Safari
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18879631/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to open Safari from a WebApp in iOS 7
提问by Joshua Smith
In previous versions of iOS, <a>tags would open Mobile Safari, and you had to intercept those to instead stay inside the webapp (an HTML page that has been saved to the home screen by the user).
在以前的 iOS 版本中，<a>标签会打开 Mobile Safari，您必须拦截它们才能留在 web 应用程序（用户已保存到主屏幕的 HTML 页面）中。
Starting in iOS 7, all links are staying inside the WebApp. I cannot figure out how to get it to open Safari, when I really want it to.
从 iOS 7 开始，所有链接都保留在 WebApp 内。当我真的想要它时，我无法弄清楚如何让它打开 Safari。
I've tried using window.openand a target="_blank"but neither works.
我试过使用window.open，a target="_blank"但都不起作用。
Here is a sample. https://s3.amazonaws.com/kaontest/testopen/index.html
这是一个示例。https://s3.amazonaws.com/kaontest/testopen/index.html
If you save that to your home screen in iOS 6, the link opens Safari. But in iOS 7, it doesn't.
如果您在 iOS 6 中将其保存到主屏幕，则该链接将打开 Safari。但在 iOS 7 中，它没有。
Note that this is the OPPOSITE question that everyone is usually asking ("how to NOT open Safari"). That behavior seems to be the new default, and I can't figure out how to get the old behavior back!
请注意，这是每个人通常都会问的 OPPOSITE 问题（“如何不打开 Safari”）。这种行为似乎是新的默认行为，我不知道如何恢复旧行为！
采纳答案by Mitchell Simoens
Having an anchor tag with target _blankwill work in iOS 7.0.3 but using window.open will not work and will remain to open within the webview in 7.0.3:
具有目标的锚标记_blank将在 iOS 7.0.3 中工作，但使用 window.open 将不起作用，并将保持在 7.0.3 中的 webview 中打开：
window.open('http://www.google.com/', '_blank');
回答by thomasfuchs
Update 10/23/13: Fixed in iOS 7.0.3. Add a target="xxx" attribute to your links to do this. Also works with mailto: and friends.
2013 年 10 月 23 日更新：在 iOS 7.0.3 中修复。将 target="xxx" 属性添加到您的链接以执行此操作。也适用于 mailto: 和朋友。
This is a bug in iOS 7.0, 7.0.1 and 7.0.2 and there's no known way to do this.
这是 iOS 7.0、7.0.1 和 7.0.2 中的一个错误，没有已知的方法可以做到这一点。
It's a regression from earlier versions of iOS, where links that open in Safari work just fine. It appears to be a part of a cluster of problems revolving around opening URLs, with no external URL schemes working (for example "mailto:" doesn't work either).
这是对早期版本 iOS 的回归，在早期版本中，在 Safari 中打开的链接工作正常。它似乎是围绕打开 URL 的一系列问题的一部分，没有外部 URL 方案起作用（例如“mailto：”也不起作用）。
The usual suspects of working around a problem like this unfortunately don't work (for example using a form and submitting it with a target of "_new").
不幸的是，解决此类问题的常见嫌疑人不起作用（例如，使用表单并以“_new”为目标提交它）。
There's other grave issues, like alert and confirm modal dialogs not working at all.
还有其他严重的问题，例如警报和确认模式对话框根本不起作用。
It mayhelp to submit these as bugs to Apple, http://bugreport.apple.com
它可以帮助这些提交漏洞为苹果，http://bugreport.apple.com
回答by Rob Porter
This is a known issue for the last couple months of betas. There are no work arounds, and from what I can tell Apple has been silent on any ETAs on fixes, or even recognizing it's a bug. Bug reports have been submitted, but not updated/responded to.
这是最近几个月测试版的一个已知问题。没有变通办法，据我所知，Apple 一直对修复的任何 ETA 保持沉默，甚至承认这是一个错误。错误报告已提交，但未更新/回复。
More: http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review
更多：http: //www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review
回答by Brett Clapper
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
If you want to open Safari, but using an anchor tag like this isn't possible for whatever reason, the JavaScript solution to this question will open in Safari as well.
如果您想打开 Safari，但由于某种原因无法使用这样的锚标记，则此问题的 JavaScript 解决方案也将在 Safari 中打开。
回答by caktux
I found two solutions for the time being to this problem, both of which obviously using preventDefaulton the external links.
对于这个问题，我暂时找到了两种解决方案，这两种解决方案显然都preventDefault在外部链接上使用。
If you're linking to another website or something to download, the only option I see is to ironically alert the user to hold their finger on the link to get the touch callout prompt. Then again, depending if it's a website or a PDF, instruct them to either copy the link or in the case of a PDF, add it to their reading list. Since the alert and confirm modals are also broken you'll need to implement your own modal notifications. If you already have that it shouldn't be that much trouble.
如果您要链接到另一个网站或要下载的内容，我看到的唯一选择是讽刺地提醒用户将手指放在链接上以获得触摸标注提示。然后，根据它是网站还是 PDF，指示他们复制链接，或者如果是 PDF，则将其添加到他们的阅读列表中。由于警报和确认模式也已损坏，因此您需要实现自己的模式通知。如果你已经有了，那应该不会那么麻烦。
Update[2013-10-25] Apparently it's been fixed in iOS 7.0.3 and links open in Safari...
更新[2013-10-25] 显然它已经在 iOS 7.0.3 中得到修复并且链接在 Safari 中打开......
Edit[2013-10-05] Here's pretty much what I use with a jQuery UI modal
编辑[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" );
}
}
});
}
});
The other workaround is using ajax or an iframe to load the external content, but unless you have a good sub-browser or something in your app it will look sketchy. Here's something along those lines.
另一种解决方法是使用 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);
});
}
回答by JDubDev
UPDATE Just wanted to let any one following this know that iOS 7.0.3 seems to fix the issue. I've keep standalone webapps saved for testing and the update released today restored external link/app functionality. So I've updated my code to let customers know to update their phones instead of deleting and re saving the web app.
更新只是想让任何关注这个的人知道 iOS 7.0.3 似乎解决了这个问题。我保存了独立的 webapps 以供测试，今天发布的更新恢复了外部链接/应用程序的功能。所以我更新了我的代码，让客户知道更新他们的手机，而不是删除并重新保存网络应用程序。
I was going to just add a comment but apparently this is too long.
我只想添加一条评论，但显然这太长了。
Apple set the stage for a WebApp world when they allowed chromeless webapps to be saved to the homescreen of the device. This "bug" feels like a major step backwards. It doesn't seem very apple to leave such a gapping bug in a final release. At least not one that, once they become aware of it, they don't publicly state they are working on a fix for it like they did with the lockscreen bypasses. I can't help that this feels intentional though there doesn't seem to be a clear reason why.
当 Apple 允许将 chromeless webapps 保存到设备的主屏幕时，他们为 WebApp 世界奠定了基础。这个“错误”感觉像是倒退了一大步。在最终版本中留下这样一个巨大的错误似乎不是很明智。至少不是这样，一旦他们意识到这一点，他们就不会公开声明他们正在解决它，就像他们对锁屏绕过所做的那样。我不禁感到这是故意的，尽管似乎没有明确的原因。
For developers dealing with this issue the only solution I could find was to
对于处理这个问题的开发人员，我能找到的唯一解决方案是
1st) Set the meta tag apple-mobile-web-app-capable to "no" - this prevents future users from dealing with the problem
1) 将元标记 apple-mobile-web-app-capable 设置为“no”——这可以防止未来的用户处理这个问题
2nd) Updated the code in our webapp to look for "standalone" and iOS version 7+. When conditions are meet I offered a popup that stated the issue and added a link to that page and asked the users for their forgivness and requested they copy the link and paste in in safari.
2) 更新了我们的 web 应用程序中的代码以查找“独立”和 iOS 版本 7+。当条件满足时，我提供了一个弹出窗口，说明了问题并添加了指向该页面的链接，并要求用户原谅并要求他们复制链接并粘贴到 safari 中。
I wrapped the link in edge to edge tag with line breaks above and bellow to help make the copy and pasting process of the url a bit easier.
我用上下换行符将链接包裹在边到边标签中，以帮助使 url 的复制和粘贴过程更容易一些。
回答by Ed Lee
iOS v7.0.3 released 10/22/13 fixes the problem.
13 年 10 月 22 日发布的 iOS v7.0.3 修复了该问题。
回答by Muhammad Saad Ansari
window.open('http://www.google.com/', '_system');
this will open native Safari Application even on latest version of iOS...
即使在最新版本的 iOS 上，这也将打开本机 Safari 应用程序...
Happy coding!!
快乐编码！！
回答by Oliver Zhang
It looks suspiciously like an intentional bug to limit the ability of web apps to deliver advertisements. Maybe you can try open the new page in an iframe.
它看起来像是一个有意的错误，用于限制网络应用程序提供广告的能力。也许您可以尝试在 iframe 中打开新页面。
回答by dyl604
EDIT: Sorry, I misread your original problem. This solution was for opening an external website at all. Basic A href tags used to work in opening links and stopped working in iOS7. This was the only way I could get it to open an external link at all.
编辑：对不起，我误读了你原来的问题。该解决方案完全用于打开外部网站。用于打开链接的基本 A href 标签在 iOS7 中停止工作。这是我完全可以让它打开外部链接的唯一方法。
Here's how I got it to sort of work with a webapp saved to desktop in iOS7.
这是我如何使用保存在 iOS7 中的桌面的 web 应用程序来处理它。
function openpage()
{
window.open('http://www.yourlinkhere.com', '_blank');
}
...
...
<a ontouchstart="openpage();" onclick="openpage();">LINKED TEXT</a>
The issue though is that it seems to ignore the target option and it opens it in the same full screen desktop webapp and there is no way to navigate back that I can see.
但问题是它似乎忽略了目标选项，它在同一个全屏桌面 web 应用程序中打开它，并且无法返回我可以看到的导航。
