【问题标题】:Opening a link in a new tab [duplicate]在新选项卡中打开链接[重复]
【发布时间】:2012-05-03 16:07:27
【问题描述】:

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

我在网上查了一下,发现这个似乎很有用:

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

任何人都可以帮助我解决这个问题

【问题讨论】:

标签: javascript html xhtml tabs anchor


【解决方案1】:

您需要为此使用 javascript 吗?

如果没有,您可以直接将属性添加到 HTML 中的 a 标记。

例如:&lt;a href="http://www.google.co.uk" target="_blank"&gt;Google&lt;/a&gt;

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

【讨论】:

  • 问题是我只需要使用 XHTML,并且在验证页面时它说目标不是属性
【解决方案2】:

你想使用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" 放在您的锚标记中即可。

【讨论】:

    【解决方案3】:


    您可以只使用 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>
    

    【讨论】:

    • 问题是我只需要使用 XHTML,并且在验证页面时它说目标不是属性
    • 谢谢。我还找到了一种使用 jQuery 的方法,但这种方法也很高兴知道:-)。
    【解决方案4】:

    如果你需要依赖 JavaScript:

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

    所以,不要使用if(anchor.getAttribute("href")),而是使用if(anchor.getAttribute("href") &amp;&amp; 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();
    

    【讨论】:

    • 投反对票的人能否提供任何关于投反对票的 cmets?谢谢!
    猜你喜欢
    • 2016-03-27
    • 2013-03-11
    • 2012-04-25
    • 2014-10-06
    • 2013-02-17
    • 1970-01-01
    • 1970-01-01
    • 2015-11-28
    相关资源
    最近更新 更多