我为我正在做的项目创建了一个网站。 在网站的内容中,有一些可以访问的外部网页链接。 在用户点击其中一个链接的同时,他将被带到指定的链接,并且他将不再在当前页面上。 我想要做的是当用户点击链接时,点击链接中的指定网站会显示在新标签中。这样,用户就可以在当前页面上保持原状,也可以在新选项卡上查看其他页面。
我在网上看了一下,发现这似乎很有用:
function externalLinks()
{
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++)
{
var anchor = anchors[i];
if(anchor.getAttribute("href"))
anchor.target = "_blank";
}
}
window.onload = externalLinks;
我面临的问题是我网站的导航栏包含锚标签。所以,现在如果用户点击导航栏上的链接,它将打开一个新选项卡。我希望只有当用户点击我网站内容中的链接时才会发生这种情况。因此,如果用户单击导航栏中的链接,则不应打开新选项卡,只需将他带到指定目的地即可。
我尝试在内容中的所有链接中添加一个类,并使用getElementByClassName,但它仍然无法正常工作
任何人都可以帮助我这个
答案 0 :(得分:28)
<a target="_blank" href="YourAmazingURL">Click here for Amazing URL</a>
另一个例子:
<a target="_blank" href="http://www.google.com/">Google</a>
这利用了目标属性。
有关目标属性的更多信息:http://www.w3schools.com/tags/att_a_target.asp 另外:http://www.w3schools.com/html/html_links.asp
编辑:
对于XHTML,只需执行以下操作:
<a href="YourAmazingURL" onclick="window.open(this.href,'_blank');return false;">Click here for Amazing URL</a>
或者,再次:
<a href="http://www.google.com/" onclick="window.open(this.href,'_blank');return false;">Google</a>
答案 1 :(得分:2)
你需要使用javascript吗?
如果不是,您只需将该属性直接添加到HTML中的标记即可。
例如:<a href="http://www.google.co.uk" target="_blank">Google</a>
如果不需要javascript,这可能是一种更简单的方法。
答案 2 :(得分:0)
如果您需要依赖JavaScript:
基本上您只需要更改if
- 条件(检查锚链接是否指向外部位置)。
因此,请使用if(anchor.getAttribute("href"))
。
if(anchor.getAttribute("href") && anchor.hostname!==location.hostname)
通过清理一些代码,您的功能应如下所示:
function externalLinks() {
for(var c = document.getElementsByTagName("a"), a = 0;a < c.length;a++) {
var b = c[a];
b.getAttribute("href") && b.hostname !== location.hostname && (b.target = "_blank")
}
}
;
externalLinks();
答案 3 :(得分:-1)
您想使用document.getElementById("theidgoeshere");
为此,请在链接中设置id属性,如下所示:
<a href="www.google.com" id="theidgoeshere">Google</a>
然后在你的javascript中
var anchor = document.getElementById("theidgoeshere");
if(anchor.getAttribute("href"))
anchor.target = "_blank";
另请注意,您可能希望不使用javascript。只需将target="_blank"
放入锚标记即可。