在新选项卡中打开页面上的链接 - javascript答案

【问题标题】：Open links on the page in a new tab - javascript在新选项卡中打开页面上的链接 - javascript
【发布时间】：2020-12-11 17:11:28
【问题描述】：

如何让页面上的每个链接都在新标签页中打开？

因此每个链接重定向都会转到新标签。并且网站在它的位置将是安全的

我们可以做到，

<a href="there_links.com" target="_blank">there_links.com</a>

但是由于用户可以在支持降价的 cmets 部分中添加自己的链接。

很难在页面上的每个链接上设置target="_blank"。因为这些链接将通过markdown 填充。

例如单击here 将在此处自行加载页面。更喜欢重定向。

【问题讨论】：

您是如何以及在哪里处理降价的？
@charlietfl 它不限于markdown，而是页面上的每个链接。
当然，但是如果您使用的是 vue，那么只有在 <a> 存在之后才能在没有目标的情况下循环通过它变得很重要
半相关，但如果你使用 _blank，你还应该添加 rel=”noopener noreferrer” 以防止反向tabnabbing。见owasp.org/www-community/attacks/Reverse_Tabnabbing

【解决方案1】：

选择页面中的所有锚点，然后使用setAttribute函数更新目标属性

let anchors = document.querySelectorAll('a');
for (let i = 0; i < anchors.length; i++) {
  anchors[i].setAttribute('target', '_blank')

}

<a href="there_links.com" target="_blank">link 1</a>
<a href="a.com">link 2</a>
<a href="there_links.com">link 3</a>

上面的脚本可以设置在 Vue 组件的挂载钩子中

【讨论】：

【解决方案2】：

您可以查询没有目标的<a> 并将其设置为：

document.querySelectorAll('a:not([target])').forEach(el => el.target = "_blank")

关键部分是在你将markdown处理成元素之后才运行它

【讨论】：