HTML中的外部链接怎么打开新窗口？ 新窗口打开链接技巧

要让外部链接在新窗口打开，必须使用target="_blank"并添加rel="noopener noreferrer"以确保安全；具体写法为：<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">访问外部网站</a>，其中target="_blank"实现新窗口打开，rel="noopener noreferrer"防止新页面通过window.opener操控原页面并阻止referrer信息泄露，从而防范tabnabbing攻击和保护用户隐私；推荐仅对外部链接、文件下载或需独立操作的第三方页面使用新窗口打开，避免用于内部导航以维持用户体验和可访问性；对于动态内容，可通过javascript在页面加载后遍历外部链接自动添加相应属性，或使用window.open()实现更复杂控制，但需注意弹窗拦截问题；最终策略应以安全为基础，兼顾用户习惯与浏览连贯性。

在HTML中，要让一个外部链接在新窗口或新标签页中打开，最直接的方法是在<a>标签中添加target="_blank"属性。不过，为了确保安全性和用户体验，强烈建议同时加上rel="noopener noreferrer"。

解决方案

要实现链接在新窗口打开，你需要在<a>标签中这样写：

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">访问外部网站</a>

这里：

立即学习“前端免费学习笔记（深入）”；

• href属性指定了链接的目标URL。
• target="_blank"是关键，它告诉浏览器在新窗口或新标签页中打开这个链接。
• rel="noopener noreferrer"则是出于安全和隐私的考虑，它能有效防止一些潜在的恶意行为，我们稍后会详细聊聊。

为什么在新窗口打开链接时，rel="noopener noreferrer"是不可或缺的？

这其实是个挺重要的安全细节，很多开发者一开始可能不会注意到。当你只用target="_blank"打开一个新页面时，新页面可以通过window.opener这个JavaScript属性访问到打开它的原始页面。这听起来可能没什么，但如果新打开的页面是恶意的（比如一个钓鱼网站），它就可以利用这个连接来做一些不好的事情，比如修改原始页面的URL（这就是所谓的“Tabnabbing”攻击），或者执行一些脚本来窃取用户信息。

noopener的作用就是切断这种联系，它阻止新打开的页面通过window.opener访问到原始页面。这样，即使新页面被攻破，它也无法影响到你的原始页面。

而noreferrer则更进一步，它不仅阻止了window.opener的访问，还会阻止浏览器将referrer信息（即用户是从哪个页面跳转过来的）发送给新打开的网站。这对于保护用户隐私非常有帮助，尤其是在你链接到一些你不太确定的第三方服务时。我个人觉得，在处理任何外部链接时，加上这两个属性几乎应该成为一种本能，因为它既提升了安全性，又兼顾了用户隐私，几乎没有负面影响。

何时应该让链接在新窗口打开，何时不应该？

这真是一个值得深思的问题，它直接关系到用户体验。我见过不少网站，把所有外部链接都设置成在新窗口打开，有时甚至内部链接也是如此，这真的会让用户感到困惑和烦躁。在我看来，选择是否在新窗口打开，核心在于预测用户的意图和保持浏览的连贯性。

你可能希望在新窗口打开链接的情况：

SpeakingPass-打造你的专属雅思口语语料

使用chatGPT帮你快速备考雅思口语，提升分数

25

查看详情

• 外部网站链接： 这是最常见的场景。当用户点击一个指向完全不同领域的网站时，通常不希望离开你当前提供的服务或内容。新窗口能让他们在探索外部世界的同时，你的网站依然保持开放，方便他们返回。
• 文件下载链接（如PDF、DOCX）： 点击这类链接通常是为了查看或下载文件，而不是导航到另一个HTML页面。在新窗口打开可以避免浏览器直接跳转到文件内容，打断用户的浏览流程。
• 需要用户独立完成操作的页面： 比如一个支付网关、一个复杂的表单，或者一个需要用户登录的第三方服务。让它们在新窗口打开，可以避免用户在当前页面操作中断。

你不应该在新窗口打开链接的情况：

• 内部导航链接： 用户在你的网站内部跳转时，他们期望的是在同一个浏览器上下文中进行。频繁的新窗口打开会造成大量标签页堆积，让用户感到混乱，难以管理。
• 用户预期在当前页面完成操作的链接： 比如一个“阅读更多”的按钮，一个“提交”表单后的确认页面，这些都应该在当前页面完成，保持流程的顺畅。
• 可访问性考量： 对于一些有特殊需求的用户，频繁的新窗口打开可能会对屏幕阅读器等辅助技术造成干扰。

最终，这没有一个放之四海而皆准的答案，更多的是一种平衡艺术。我的经验是，尽量让用户自己选择。如果用户真的想在新窗口打开一个链接，他们通常会用鼠标中键点击或者右键选择“在新标签页中打开”。我们的任务是提供一个合理的默认行为，而不是强制用户的浏览习惯。

处理动态内容或特定场景下的新窗口打开策略

在实际开发中，我们遇到的链接往往不只是写死的HTML。很多时候，链接是动态生成的，或者我们需要根据某些条件来决定是否在新窗口打开。这时候，JavaScript就派上用场了。

虽然HTML的target="_blank"是最直接的方式，但JavaScript提供了更灵活的控制。你可以使用window.open()方法来打开一个新窗口或新标签页：

// 基本用法
document.getElementById('myDynamicLink').onclick = function(event) {
    event.preventDefault(); // 阻止默认的链接跳转行为
    window.open('https://www.another-example.com', '_blank', 'noopener,noreferrer');
};

这里，window.open()的第二个参数就是target的名称，_blank依然表示新窗口。第三个参数则可以用来设置窗口的特性（比如尺寸、是否可调整大小等），同时也可以在这里添加noopener和noreferrer。

不过，使用window.open()需要注意一点：它很容易被浏览器的弹窗拦截器（Pop-up Blocker）阻止，尤其是在没有用户交互（比如点击事件）的情况下调用时。所以，如果你的目标只是简单地让链接在新窗口打开，并且链接是静态或半静态的，优先使用HTML的target="_blank"和rel="noopener noreferrer"会更可靠。只有在需要更复杂的控制（例如，根据用户权限动态决定链接行为，或者打开一个特定尺寸的弹出窗口）时，才考虑使用JavaScript的window.open()。

另一种JavaScript的用法是，在页面加载后，动态地给某些符合条件的链接添加target="_blank"和rel属性。例如，你可以遍历所有指向外部域名的<a>标签，然后给它们加上这些属性，而不是在HTML中硬编码：

document.addEventListener('DOMContentLoaded', function() {
    const allLinks = document.querySelectorAll('a');
    const currentHost = window.location.hostname;

    allLinks.forEach(link => {
        // 检查链接是否是外部链接，并且不是当前域名下的锚点或相对路径
        try {
            const url = new URL(link.href);
            if (url.hostname !== currentHost) {
                link.setAttribute('target', '_blank');
                link.setAttribute('rel', 'noopener noreferrer');
            }
        } catch (e) {
            // 如果href不是一个有效的URL（例如，只是一个锚点#id），URL构造函数会抛出错误
            // 这种情况下，我们通常不处理，因为它很可能是内部链接
        }
    });
});

这种方式提供了一种更集中的管理链接行为的手段，尤其适用于内容由CMS或动态生成，难以在源HTML中直接控制target属性的场景。但无论如何，核心理念不变：安全优先，用户体验至上。

以上就是HTML中的外部链接怎么打开新窗口？ 新窗口打开链接技巧的详细内容，更多请关注php中文网其它相关文章！