在React中如何让网站所有外部链接都默认在新标签页打开？

架构老林

2026-10-2

实现全站非内部链接默认在新标签页打开的方案

方案1：原生JavaScript实现（无依赖，兼容性最好）

这是最通用的适配方案，页面加载完成后自动遍历所有链接判断属性，无需修改现有页面的链接代码：

document.addEventListener('DOMContentLoaded', function() {
  // 请将示例域名替换为你自己的网站主域名，多域名站点可填多个值
  const internalDomains = [window.location.hostname];
  const allLinks = document.querySelectorAll('a');
  
  allLinks.forEach(link => {
    // 跳过已手动设置target属性的链接，不覆盖自定义逻辑
    if (link.hasAttribute('target')) return;
    // 跳过mailto、tel、file等特殊协议链接，不需要可删除本行
    if (link.protocol !== 'http:' && link.protocol !== 'https:') return;
    
    const linkHost = link.hostname;
    // 判断是否为外部链接，默认匹配二级子域为内部链接
    const isExternal = !internalDomains.some(domain => linkHost === domain || linkHost.endsWith('.' + domain));
    
    if (isExternal) {
      link.setAttribute('target', '_blank');
      // 必加安全属性，避免外部站点恶意劫持原页面
      link.setAttribute('rel', 'noopener noreferrer');
    }
  })
})

方案2：服务端/静态站点渲染阶段处理

如果你的站点用服务端渲染框架或者静态站点生成器搭建，可以在HTML输出阶段就完成外部链接属性注入，不需要前端执行JS，性能更高。
以下是Node.js环境下的处理示例：

// 以markdown渲染HTML的逻辑为例
function renderLink(href, text) {
  const isExternal = href.startsWith('http') && !href.includes('你的站点域名');
  if (isExternal) {
    return `<a href="${href}" target="_blank" rel="noopener noreferrer">${text}</a>`
  }
  return `<a href="${href}">${text}</a>`
}