如何在新窗口中打开链接？

当我们在网页中点击一个链接时，通常会在当前标签页中加载链接的目标页面。但有时候我们希望链接能够在新的浏览器窗口或标签页中打开，以便用户可以保留原来的页面并在不关闭它的情况下访问链接。

本文将介绍如何通过 HTML、JavaScript 和 target 属性来实现在新窗口中打开链接的效果，并提供示例代码和指导意义。

1. 使用 target="_blank" 属性

最基本的方法是在链接的 HTML 标记中添加 target="_blank" 属性。这个属性告诉浏览器在新的浏览器窗口或标签页中打开链接的目标页面。

例如：

<a href="https://example.com" target="_blank">前往示例网站</a>

这样点击链接时，就会在新的浏览器窗口或标签页中打开 https://example.com 网站。

需要注意的是，在使用该属性时应该考虑到用户体验，包括避免弹出式窗口和提供足够的信息提示用户该链接将在新窗口中打开等。

2. 使用 JavaScript 打开链接

除了使用 HTML 属性外，还可以使用 JavaScript 来控制链接的打开方式。这种方法比较灵活，可以根据具体需求自定义链接的打开方式。

例如，下面的代码使用 JavaScript 打开链接：

<a href="https://example.com" onclick="window.open(this.href); return false;">前往示例网站</a>

当链接被点击时，onclick 事件将被触发并调用 window.open() 方法来打开链接。返回 false 是为了阻止默认行为（在当前标签页中打开链接）。

需要注意的是，在使用这种方法时，应该考虑到用户的浏览器设置和允许弹出式窗口的设置情况，并提供足够的信息提示以便用户确认是否要打开新窗口。

3. 使用 rel="noopener noreferrer" 属性

在通过 target="_blank" 属性或 JavaScript 打开链接时，可能会出现安全漏洞，因为目标页面可以通过 window.opener 对象访问打开它的页面。攻击者可以利用这个对象来执行恶意脚本或劫持用户会话等。

为了避免这种风险，可以在链接中添加 rel="noopener noreferrer" 属性。这样会告诉浏览器在打开链接时不复制原先页面的引用，并防止目标页面访问父级页面。

例如：

<a href="https://example.com" target="_blank" rel="noopener noreferrer">前往示例网站</a>

结论

本文介绍了如何在新窗口中打开链接，并提供了三种方法：使用 target="_blank" 属性、使用 JavaScript 和添加 rel="noopener noreferrer" 属性。不同的方法适用于不同的场景和需求，应该根据具体情况选择合适的方法。

需要注意的是，在实现时要考虑用户体验和安全性，以避免出现误导和安全漏洞等问题。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11295