在现代网站开发中，为提升用户体验与安全性，外部链接应在新标签页中打开，并附带 rel="noreferrer nofollow noopener" 以防止安全风险（如 window.opener 滥用）和 SEO 干扰。但直接使用 <base target="_blank"> 会无差别作用于所有链接，破坏内部导航逻辑；而基于字符串匹配（如 href.indexOf()）的方案又易受子域名、协议差异或路径干扰，可靠性低。推荐采用基于 URL 构造函数的标准化解析方式——它能准确提取 hostname，自动处理 http:https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https:https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712 协议、端口、路径等边界情况，且天然兼容相对 URL 和锚点（如 https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712about 或 #section）。以下是完整、生产就绪的实现：<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>智能外链新窗口方案<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712title>
<style>
.content { height: 100vh; padding: 2rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { display: block; margin: 0.5rem 0; padding: 0.4rem 0.8rem; background: #f5f5f5; border-radius: 4px; text-decoration: none; color: #2c3e50; }
a[target="_blank"] { background: #e8f4fc; color: #1a6d9c; }
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712style>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712head>
<body>
<div class="content">
<a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712">首页（同域，当前页）<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712a>
<a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712products">产品页（同域，当前页）<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712a>
<a href="#contact">联系锚点（当前页）<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712a>
<a href="https:https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712example.com">外部 HTTPS 链接（新标签页）<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712a>
<a href="http:https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712google.comhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712search?q=test">外部 HTTP 链接（新标签页）<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712a>
<a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712cdn.jsdelivr.nethttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712npmhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712jquery@3.7.1">协议相对链接（新标签页）<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712a>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712div>
<script>
window.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll('a[href]').forEach(link => {
try {
https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712 尝试解析 href —— 相对路径、锚点会自动补全为当前页面 origin
const url = new URL(link.href, location.href);
https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712 仅当 hostname 不匹配当前站点时才设为新窗口
if (url.hostname !== location.hostname) {
link.target = "_blank";
link.rel = "noreferrer nofollow noopener";
https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712 可选：添加视觉提示或 title
link.title = link.title ? `${link.title}（在新窗口打开）` : "在新窗口打开";
}
} catch (e) {
https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712 忽略非法 URL（如纯锚点 `#top` 或 `javascript:void(0)`），它们不会触发跨域
console.warn("跳过无效链接:", link.href, e);
}
});
});
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712script>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712body>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712html><https:><p>✅ <strong>关键优势说明<https:>： <https:><ul><li>✅ <strong>精准判断<https:>：new URL(link.href, location.href) 确保相对路径（https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712about）、锚点（#top）、协议相对链接（https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712cdn.example.com）均被正确解析，避免误判； <https:><li>✅ <strong>健壮容错<https:>：try...catch 捕获非法 href（如 mailto:、tel:、空值），不中断执行； <https:><li>✅ <strong>零依赖<https:>：纯原生 JavaScript，无需 jQuery 或其他库； <https:><li>✅ <strong>语义清晰<https:>：不触发模拟点击（click()），避免意外跳转或事件冲突； <https:><li>✅ <strong>安全合规<https:>：强制添加 rel="noreferrer noopener"，防范反向访问与性能泄露。<https:><https:><p>⚠️ <strong>注意事项<https:>： <https:><ul><li>若站点部署在子路径（如 https:https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712example.comhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712bloghttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712），该方案仍正确工作，因 location.href 提供完整基准； <https:><li>如需排除特定子域名（如允许 admin.example.com 视为内部），可扩展逻辑：if (!url.hostname.endsWith('.example.com'))； <https:><li>PHP 端渲染方案虽可行（如服务端正则匹配），但无法覆盖动态生成的链接（如 CMS 富文本、AJAX 加载内容），故客户端 JS 是更通用的选择。<https:><https:><p>此方案已在主流浏览器（Chrome、Firefox、Safari、Edge）中验证稳定运行，兼顾性能、可维护性与安全性，推荐作为标准实践集成至项目脚手架或 CMS 主题中。<https:></https:></p></https:></https:>
</li></https:>
</li></https:>
</li></ul></https:></https:></strong></p></https:></https:></https:></strong>
</li></https:></https:></strong>
</li></https:></https:></strong>
</li></https:></https:></strong>
</li></https:></https:></strong>
</li></ul></https:></https:></strong></p></https:>
