10

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

我在互联网上查看并发现这似乎很有用：

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 但它仍然不起作用

任何人都可以帮助我

4

4 回答 4

28

您可以只使用 HTML：

<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>
于 2012-04-23T01:57:46.197 回答
2

你需要为此使用javascript吗？

如果不是，您可以直接将属性添加到 HTML 中的 a 标记。

例如：<a href="http://www.google.co.uk" target="_blank">Google</a>

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

于 2012-04-23T01:54:57.433 回答
1

如果你需要依赖 JavaScript：

基本上你只需要改变你的if-condition （检查锚链接是否指向外部位置）。

所以，代替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();
于 2012-10-30T09:00:16.960 回答
-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"您的锚标签。

于 2012-04-23T01:55:27.310 回答