在所有链接中使用Target _blank

Question

在所有链接中使用Target _blank

javascripthyperlinktarget

17

我刚刚创建了一个使用目标_self的HTML页面。

但现在我有太多链接，我想将所有链接目标更改为_blank，而且很难做到。有没有一种JavaScript可以一次性应用于所有链接，只需编写1次？

因为我的代码太长了，并且需要很长时间才能在所有链接中进行更改。有没有什么诀窍呢？

像这样：

<a href="http://www.google.com"></a>
<a href="http://www.facebook.com"></a>
<a href="http://www.gmail.com"></a>
<a href="http://www.twitter.com"></a>
<a href="http://www.stackoverflow.com"></a>
<a href="http://plus.google.com"></a>

- Hammad

1

你用什么程序写HTML？显而易见的方法是查找和替换... - Liath

没有愚蠢的问题。我会使用更好的编辑器，比如Sublime Text来处理这种情况。在Sublime Text中，您可以执行以下操作：

搜索“href”
点击“查找全部”，选择所有“href”结果。
在“href”之前编写您的“target”。

- Olav Kokovkin

不，我不想替换。有没有任何JavaScript可以在新标签页中打开所有链接？ - Hammad

顺便提一下，你示例中的链接URL不正确...它们应该以http://开头。 - Matt Browne

1

你不应该尝试将 JavaScript 用作查找和替换的替代品。 - Thom Wiggers

显示剩余4条评论

5个回答

8

为了回答你的问题，jQuery使得这个变得很容易：

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
    $(function() {
        $('a[href]').attr('target', '_blank');
    });
</script>

这不会修改任何没有 href 属性的 <a> 标签。

- Oliver Spryn

@Hammad 这应该可以工作...尝试一下这个例子：http://jsfiddle.net/spryno724/Hh4S6/ 你可能没有加载jQuery，或者在更改“target”属性之前没有等待文档加载。 - Oliver Spryn

2

在纯JS中也很简单：

var links = document.getElementsByTagName('a');
for (var i=0, len=links.length; i < len; i++) {
  links[i].target = '_blank';
}

（将此脚本放在您的关闭</body>标记之前，或在页面上的所有<a>标记之后。）

- Matt Browne

1

如果您无法使用HTML编辑器进行简单的查找和替换，可以使用jQuery执行以下操作：

$('a').click(function() {
  $(this).attr('target', '_blank');
});

这将自动为每个被点击的 a 元素添加 target="_blank"，在新窗口或新标签页中打开（您无法控制此行为，它取决于用户的浏览器设置）。

FIDDLE

希望这能帮到你！

- Fr0zenFyr

重要的是添加jQuery 2.1.0吗？ - Hammad

可能是因为您没有将脚本放置在页面底部（在闭合的</body>标签之前），或者放在$(document).ready()回调函数中。 - Matt Browne

请注意，jQuery 2.x分支不支持IE 8及以下版本。 - Matt Browne

还要注意，与其他答案不同的是，此答案直到有人实际点击链接之前才更改目标，因此它应该出现在任何可能设置click事件的其他JS代码之前（除非您没有这些其他JS链接[如果您有任何]需要在新窗口/选项卡中打开）。 - Matt Browne

@Hammad 不必要，任何最近的 jQuery 版本都应该可以使用。但需要有一个 jQuery 包含文件。虽然 2.X 可能在 IE8 以下的浏览器中无法使用，但对于其他浏览器来说是不错的选择。这段代码是 jQuery 代码，你需要将其放入 $(document).ready(function(){ //...code here..}); 中，并在 script 标签中使用。 - Fr0zenFyr

1

我曾经多次处理过这个问题。仅供参考：

我认为没有必要让JavaScript执行此任务，但是有另一种方法，您可以使用编辑器的查找/替换功能，并执行以下操作（前提是您的链接格式如下）：