Javascript 在新标签页中打开链接
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/10273890/
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
Opening a link in a new tab
提问by Kakalokia
I've created a website for a project I'm doing. In the content of the website there are some links for external web pages that can be visited. In the mean time when the user clicks on one of the links he'll be taken to the specified link and he will not be on the current page anymore. What I wanted to do is have the specified website in the link clicked appear in a new tab when the user clicks on the link. This way the user stays on the current page he's one and also can view the other page on the new tab.
我为我正在做的项目创建了一个网站。在网站的内容中有一些可以访问的外部网页链接。与此同时,当用户点击其中一个链接时,他将被带到指定的链接,而他将不再位于当前页面上。我想要做的是当用户单击链接时,单击链接中的指定网站出现在新选项卡中。这样用户就可以停留在他所在的当前页面上,也可以在新选项卡上查看其他页面。
I've looked on the internet and found this which seemed to be useful:
我查看了互联网,发现这似乎很有用:
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;
The problem I'm facing is that the navbar of my website contains anchor tags. So now if the user clicks on the links on the navbar it will open a new tab. I want this to happen ONLY if the user clicks on a link in the content of my website. So if the user clicks on a link in the navbar it shouldn't open a new tab and should just take him to the specified destination.
我面临的问题是我网站的导航栏包含锚标记。所以现在如果用户点击导航栏上的链接,它将打开一个新选项卡。我希望只有当用户点击我网站内容中的链接时才会发生这种情况。因此,如果用户单击导航栏中的链接,则不应打开新选项卡,而应将他带到指定的目的地。
I've tried adding a class to all the links in the content and use getElementByClassName but it still didn't work
我已经尝试向内容中的所有链接添加一个类并使用 getElementByClassName 但它仍然不起作用
Anyone can help me with this
任何人都可以帮我解决这个问题
回答by anonymous
你可以只使用 HTML:
<a target="_blank" href="YourAmazingURL">Click here for Amazing URL</a>
Another Example:
另一个例子:
<a target="_blank" href="http://www.google.com/">Google</a>
This takes advantage of the target attribute.
这利用了目标属性。
More information on the target attribute: http://www.w3schools.com/tags/att_a_target.aspAlso: http://www.w3schools.com/html/html_links.asp
有关目标属性的更多信息:http: //www.w3schools.com/tags/att_a_target.asp另外:http: //www.w3schools.com/html/html_links.asp
EDIT:
编辑:
For XHTML, just do this:
对于 XHTML,只需执行以下操作:
<a href="YourAmazingURL" onclick="window.open(this.href,'_blank');return false;">Click here for Amazing URL</a>
Or, again:
或者,再次:
<a href="http://www.google.com/" onclick="window.open(this.href,'_blank');return false;">Google</a>
回答by Jake Lucas
Are you required to use javascript for this?
您是否需要为此使用javascript?
If not you could just add the attribute directly to the a tag in the HTML.
如果没有,您可以将该属性直接添加到 HTML 中的 a 标记。
For example: <a href="http://www.google.co.uk" target="_blank">Google</a>
例如: <a href="http://www.google.co.uk" target="_blank">Google</a>
That would probably be an easier way for you to do it if javascript is not required.
如果不需要 javascript,这可能是一种更简单的方法。
回答by eyecatchUp
If you need to rely on JavaScript:
如果您需要依赖 JavaScript:
Basically you just need to change your if
-condition (to check whether the anchor link points to an external location or not).
基本上你只需要改变你的if
-condition(检查锚链接是否指向外部位置)。
So, instead of if(anchor.getAttribute("href"))
, use if(anchor.getAttribute("href") && anchor.hostname!==location.hostname)
.
因此,不要if(anchor.getAttribute("href"))
使用if(anchor.getAttribute("href") && anchor.hostname!==location.hostname)
。
With a bit of code clean up, your function should look as follows:
通过一些代码清理,您的函数应如下所示:
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();
回答by Joel
you want to use document.getElementById("theidgoeshere");
你想用 document.getElementById("theidgoeshere");
To do this, set the id attribute in your link like so:
为此,请在您的链接中设置 id 属性,如下所示:
<a href="www.google.com" id="theidgoeshere">Google</a>
Then in your javascript
然后在你的javascript中
var anchor = document.getElementById("theidgoeshere");
if(anchor.getAttribute("href"))
anchor.target = "_blank";
Also note you might want to do without the javascript. Just put target="_blank"
in your anchor tag.
另请注意,您可能希望不使用 javascript。只需target="_blank"
输入您的锚标签。