IPhone Safari Web 应用程序在新窗口中打开链接

我在 IWebKit框架中发现了 JavaScript 解决方案:

var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++)
{
a[i].onclick=function()
{
window.location=this.getAttribute("href");
return false
}
}

如果你使用 jQuery，你可以:

$("a").click(function (event) {
event.preventDefault();
window.location = $(this).attr("href");
});

根据 Davids 的回答和 Richards 的评论，您应该执行一个域检查。否则，其他网站的链接也会在你的网络应用程序中打开。

$('a').live('click', function (event)
{
var href = $(this).attr("href");


if (href.indexOf(location.hostname) > -1)
{
event.preventDefault();
window.location = href;
}
});

这里的其他解决方案要么不考虑外部链接(您可能希望在 Safari 中从外部打开) ，要么不考虑相对链接(其中没有域)。

Html5移动样板项目链接到这个要点，其中有一个很好的主题讨论: https://gist.github.com/1042026

这是他们想出来的最终代码:

<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>

这段代码适用于 iOS5(它适用于我) :

标签上写着:

<script type="text/javascript">
function OpenLink(theLink){
window.location.href = theLink.href;
}
</script>

在希望在同一窗口中打开的链接中:

<a href="(your website here)" onclick="OpenLink(this); return false"> Link </a>

我从这个注释得到了这个代码: Iphone 网络应用程序元标签

也许您应该允许在新窗口中打开链接，当 target 显式设置为“ _ space”时:

$('a').live('click', function (event)
{
var href = $(this).attr("href");


// prevent internal links (href.indexOf...) to open in safari if target
// is not explicitly set_blank, doesn't break href="#" links
if (href.indexOf(location.hostname) > -1 && href != "#" && $(this).attr("target") != "_blank")
{
event.preventDefault();
window.location = href;
}


});

以下是我对页面上所有链接的使用..。

document.body.addEventListener(function(event) {
if (event.target.href && event.target.target != "_blank") {
event.preventDefault();
window.location = this.href;
}
});

如果您正在使用 jQuery 或 Zepto..。

$("body").on("click", "a", function(event) {
event.target.target != "_blank" && (window.location = event.target.href);
});

如果使用 jQueryMobile，在使用 data-ajax = ‘ false’属性时，您将体验到新窗口。事实上，只要 jaxEnable 被 $关闭，by 和外部链接就会发生这种情况。AjaxEnable 设置或通过具有 target =”属性。

你可以用以下方法修复它:

$("a[data-ajax='false']").live("click", function(event){
if (this.href) {
event.preventDefault();
location.href=this.href;
return false;
}
});

(感谢 Richard Poole 的 live ()方法-没有使用 bind ())

如果已经在全局关闭了 ajaxEnable，则需要删除[ data-ajax = ‘ false’]。

我花了很长时间才弄清楚这个问题，因为我原以为它是 jQuery Mobile 特有的问题，但实际上是 Ajax 链接禁止了这个新窗口。

你也可以正常链接:

<a href="#" onclick="window.location='URL_TO_GO';">TEXT OF THE LINK</a>

你可以删除散列标签和 href，它所做的一切都会影响外观. 。

对于那些有 Bootstrap 和 Rails3的人来说

$('a').live('click', function (event) {
if(!($(this).attr('data-method')=='delete')){
var href = $(this).attr("href");
event.preventDefault();
window.location = href;
}
});

删除链接仍然以这种方式工作。

这对我在 iOS 6.1和 Bootstrap JS 链接(例如下拉菜单等)上很有用

$(document).ready(function(){
if (("standalone" in window.navigator) && window.navigator.standalone) {
    // For iOS Apps
    $('a').on('click', function(e){
      e.preventDefault();
      var new_location = $(this).attr('href');
      if (new_location != undefined && new_location.substr(0, 1) != '#' && $(this).attr('data-method') == undefined){
        window.location = new_location;
      }
    });
    }
});

以下是我在 iOS6上得到的结果(对 rmarscher 的回答稍作修改) :

<script>
(function(document,navigator,standalone) {
if (standalone in navigator && navigator[standalone]) {
var curnode,location=document.location,stop=/^(a|html)$/i;
document.addEventListener("click", function(e) {
curnode=e.target;
while (!stop.test(curnode.nodeName)) {
curnode=curnode.parentNode;
}
if ("href" in curnode && (curnode.href.indexOf("http") || ~curnode.href.indexOf(location.host)) && curnode.target == false) {
e.preventDefault();
location.href=curnode.href
}
},false);
}
})(document,window.navigator,"standalone")
</script>

我更喜欢在独立的 web 应用程序模式下打开所有的链接，除了那些拥有 target = “ _ black”的链接。当然是使用 jQuery。

$(document).on('click', 'a', function(e) {
if ($(this).attr('target') !== '_blank') {
e.preventDefault();
window.location = $(this).attr('href');
}
});

这是稍微改进版本的肖恩的，这是防止后退按钮

// this function makes anchor tags work properly on an iphone


$(document).ready(function(){
if (("standalone" in window.navigator) && window.navigator.standalone) {
// For iOS Apps
$("a").on("click", function(e){


var new_location = $(this).attr("href");
if (new_location != undefined && new_location.substr(0, 1) != "#" && new_location!='' && $(this).attr("data-method") == undefined){
e.preventDefault();
window.location = new_location;
}
});
}

});

我在 iOS 网络应用程序中使用的一个变通方法是我制作了所有的链接(通过 CSS 的按钮)表单提交按钮。所以我打开了一个发布到目标链接的表单，然后输入 type = “ mit” 虽然不是最好的办法，但这是我在找到这页之前就知道的。

我用 @ rmarscher 的回答创建了一个 Bower 可安装软件包，可以在这里找到:

Http://github.com/stylr/iosweblinks

您可以使用 bower install --save iosweblinks轻松地安装带有 bower 的代码片段

我发现了一个非常完整和高效的，因为它检查只能在独立的 WebApp 下运行，不需要 jQuery，而且也很简单，刚刚在 iOS 8.2下测试过:

保持独立: 防止独立网络应用程序打开移动 Safari 的链接

对于那些使用 JQuery Mobile的用户，上面的解决方案会中断弹出对话框，这将使链接保持在 webapp 中并允许弹出。

$(document).on('click','a', function (event) {
if($(this).attr('href').indexOf('#') == 0) {
return true;
}
event.preventDefault();
window.location = $(this).attr('href');
});

也可以这样做:

$(document).on('click','a', function (event){
if($(this).attr('data-rel') == 'popup'){
return true;
}
event.preventDefault();
window.location = $(this).attr('href');
});

这是一个老问题，这里的许多解决方案都使用了 javascript。从那以后，iOS 11.3发布了，你现在可以使用 范围成员了。作用域成员是一个类似于 "/"的 URL，其中该作用域下的所有路径都不会打开一个新页面。

范围成员是一个字符串，表示 这个 web 应用程序的应用上下文。

下面是我的例子:

{
"name": "Test",
"short_name": "Test",
"lang": "en-US",
"start_url": "/",
"scope": "/",
...
}

你也可以阅读更多关于它的 给你。我也推荐使用 发电机，它将提供这个功能。

如果指定范围，则所有工作都与预期的类似 在安卓系统中，将在 Safari 中打开范围外的目的地 返回按钮(状态栏中的小按钮)到您的 PWA。

您可以简单地删除这个 meta 标记。

<meta name="apple-mobile-web-app-capable" content="yes">