2015-04-04 230 views
12

this website上,手风琴顶部导航包含名为“基础”的元素:(screenshot)链接与目标=“_ blank”未在Chrome的新标签中打开

此元素HTML代码生成:

<a href="http://www.foracure.org.au" target="_blank" style="width: 105px;"></a> 

然而,在Chrome中,当你点击这个元素,新的网站没有在新标签中打开。

你能告诉我为什么吗?谢谢。

+0

工作对我来说,目标在新标签打开。 – arkascha 2015-04-04 08:03:57

+0

谢谢@arkascha。我编辑了问题,指出Chrome中出现问题。 – Steve 2015-04-04 08:14:22

+0

我正在使用铬浏览器。适用于我。所以显然这是谷歌Chrome版Chrome浏览器增加的效果。 – arkascha 2015-04-04 08:17:19

回答

0

您的目标属性语法是正确的,但浏览器不需要遵守它。他们可能会将其解释为在新标签中打开目的地而不是新窗口,或者他们可能会完全忽略该属性。浏览器有这些问题的设置。此外,可以通过浏览器插件阻止打开新窗口(通常旨在防止恼人的广告)。

对于作为作者,您几乎无法做到这一点。您可以考虑使用JavaScript来打开一个新窗口,参见参考资料。到目标=“_ blank”的接受答案在Firefox中不起作用,但浏览器可能更不愿意让页面通过目标打开新窗口。

target="_blank" is not working in firefox?

8

因为JavaScript正在处理click事件。当您单击,下面的代码被称为:

el.addEvent('click', function(e){ 
    if(obj.options.onOpen){ 
     new Event(e).stop(); 
     if(obj.options.open == i){ 
      obj.options.open = null; 
      obj.options.onClose(this.href, i); 
     }else{ 
      obj.options.open = i; 
      obj.options.onOpen(this.href, i); 
     } 
    }  
}) 

onOpen手动更改location

编辑:关于你的评论 如果你可以修改ImageMenu.js,你可以更新它调用onClose传递a元素对象的脚本(this,而不是this.href

obj.options.onClose(this, i); 

然后更新ImageMenu实例,具有以下onOpen变化:

window.addEvent('domready', function(){ 
    var myMenu = new ImageMenu($$('#imageMenu a'), { 
     openWidth: 310, 
     border: 2, 
     onOpen: function(e, i) { 
      if (e.target === '_blank') { 
       window.open(e.href);  
      } else { 
       location = e.href; 
      } 
     } 
    }); 
}); 

这将检查的元素的目标属性看看它是否为_blank,然后打电话window.open,如果找到。

如果您不想修改ImageMenu.js,另一个选择是修改您的链接以在您的onOpen处理程序中标识它们。这样说:

<a href="http://www.foracure.org.au/#_b=1" target="_blank" style="width: 105px;"></a> 

然后更新您的onOpen呼吁:

onOpen: function(e, i) { 
    if (e.indexOf('_b=1') > -1) { 
     window.open(e); 
    } else { 
     location = e; 
    } 
} 

唯一的缺点,这是用户看到悬停的哈希值。

最后,如果您打算在新窗口中打开的链接数量较少,则可以创建一个映射并进行检查。例如:

var linksThatOpenInANewWindow = { 
    'http://www.foracure.org.au': 1 
}; 

onOpen: function(e, i) { 
    if (linksThatOpenInANewWindow[e] === 1) { 
     window.open(e); 
    } else { 
     location = e 
    } 
} 

唯一的缺点是维护,这取决于链接的数量....

也有人建议修改链接(使用#javascript:),并添加一个内联事件处理程序(onclick) - 我不建议在所有因为它打破链接时,JS是禁用/不支持。

祝你好运!

+0

谢谢杰克。是否可以编辑此JavaScript以在新标签中打开链接?如果是这样,怎么样? – Steve 2015-04-04 08:12:49

+1

嘿@Steve - 我编辑了我的答案,包括一些变通方法。希望他们帮助! :) – Jack 2015-04-04 20:12:24

7
Replace 

<a href="http://www.foracure.org.au" target="_blank"></a>  

with 

<a href="#" onclick='window.open("http://www.foracure.org.au");return false;'></a> 

在您的代码中,并将在Chrome和其他浏览器中工作。

感谢 阿努拉格

+1

这将工作。然而正如杰克所说,如果JavaScript不被支持,这将会中断。 MDN建议不要使用这个,并给出几个原因。希望这有助于:https://developer.mozilla.org/en-US/docs/Web/API/Window/open#Never_use_this_form_of_code_for_links_%3Ca_hrefjavascriptwindow.open(...)_...%3E – sdw 2017-07-08 05:49:19

+0

这不是一个好替换,因为这可能会阻止对这些链接的抓取 – maverick 2017-11-11 08:21:39

3

出于某种原因,它不工作,所以我们可以通过另一种方式

这样做只是删除线和补充一点: -

<a onclick="window.open ('http://www.foracure.org.au', ''); return false" href="javascript:void(0);"></a> 

好运。

-2

如果使用阵营这应该工作:如预期

<a href="#" onClick={()=>window.open("https://...")}</a>

+2

OP正在询问链接元素的target =“_ blank”设置的行为。介绍React(或任何Javascript)与问题无关。 – hraynaud 2017-08-23 17:19:43