在新选项卡中打开一个链接[复制]

This question already has an answer here:

这个问题已经有了答案:

How to open link in new tab on html? 12 answers
如何在html的新标签页打开链接?12个答案

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.

我为我正在做的一个项目创建了一个网站。在网站的内容中有一些可以访问的外部网页的链接。同时，当用户点击其中一个链接时，他将被带到指定的链接，他将不再出现在当前页面上。我想要做的是，当用户点击链接时，让链接中指定的网站出现在一个新的选项卡中。这样，用户就会停留在当前页面上——他就是其中之一，也可以在new选项卡上查看另一个页面。

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

谁都可以帮我。

4 个解决方案

#1

You can just use 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.asp Also: 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>

#2

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>

例如:谷歌

That would probably be an easier way for you to do it if javascript is not required.

如果不需要javascript，这可能是一种更简单的方法。

#3

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条件(以检查锚点链接是否指向外部位置)。

So, instead of if(anchor.getAttribute("href")), use if(anchor.getAttribute("href") && anchor.hostname!==location.hostname).

因此，与其使用if(主播. getattribute(“href”)，不如使用if(主播. getattribute(“href”)&主播.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();

#4

-1

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"即可。

#1