本文介绍如何在实现原生 javascript 页面过渡动画时，精准排除 `target="_blank"` 或外部域名链接，避免对它们触发过渡逻辑，确保外部链接正常在新标签页打开。
在为网站添加平滑页面过渡（如淡入/滑动/遮罩）时，一个常见痛点是：所有 标签都被统一拦截并强制执行过渡跳转，导致本该在新标签页打开的外部链接（如 target="_blank" 或跨域链接）反而被劫持到当前页，破坏用户体验与语义正确性。
你提供的代码中，document.querySelectorAll('a') 无差别选中全部锚点，并通过 e.preventDefault() 阻止默认行为——这正是问题根源。解决思路很明确：在绑定事件前，主动过滤掉不应参与过渡的链接。以下是专业、健壮的优化方案：
✅ 推荐做法：双重过滤 + 语义化判断
window.onload = () => {
const transitionEl = document.querySelector('.transition');
const internalAnchors = Array.from(document.querySelectorAll('a'))
.filter(anchor => {
// 1. 排除 target="_blank" 的链接
if (anchor.hasAttribute('target') && anchor.target === '_blank') return false;
// 2. 排除外部链接（协议+域名不匹配当前站点）
try {
const url = new URL(anchor.href);
if (url.origin !== location.origin) return false;
} catch (e) {
// 忽略非法 href（如 #、javascript: 等），保留内部相对路径处理
if (!anchor.href || anchor.href.startsWith('#') || anchor.href.startsWith('javascript:')) {
return true; // 允许锚点或 JS 链接（按需调整）
}
return false;
}
return true;
});
// 初始化过渡层隐藏状态
setTimeout(() => transitionEl.classList.remove('is-active'), 350);
internalAnchors.forEach(anchor => {
anchor.addEventListener('click', e => {
e.preventDefault();
const targetUrl = getLink(e);
if (!targetUrl) return;
transitionEl.classList.add('is-active');
// 延迟跳转，确保 CSS 过渡完成（建议用 requestAnimationFrame 或 transitionend 事件更精准）
setTimeout(() => {
window.location.href = targetUrl;
}, 350);
});
});
};
function getLink(e) {
const el = e.target.closest('a'); // 更安全地获取最近的 a 标签（替代递归 parentNode 查找）
return el?.href || null;
}? 关键改进说明：
- Array.from().filter() 替代 for 循环 + 手动条件判断，代码更函数式、可读性更强；
- anchor.closest('a') 在 getLink() 中替代原始递归查找，性能更好、兼容性佳（IE 不支持，但现代项目通常无需兼容）；
- new URL() 安全解析：准确识别跨域链接（如 https://google.com vs https://yoursite.com），比简单字符串匹配（如 href.indexOf('http') !== -1）更可靠；
- 显式排除 target="_blank"：直接检查 anchor.target 属性值，而非仅依赖 hasAttribute（因 target 可能为空字符串或 _self）；
- 异常兜底：对无效 href（如 #top、javascript:void(0)）做分类处理，避免脚本中断。
⚠️ 注意事项：
- 若需支持 IE11，请将 new URL() 替换为正则匹配（如 /^https?:\/\//.test(anchor.href) && !anchor.href.includes(location.hostname)），但存在误判风险；
- setTimeout 延迟跳转是简易方案；生产环境建议监听 .transition 元素的 transitionend 事件，确保动画真正结束再跳转；
- 对于 SPA 场景，应改用 history.pushState() + router 模拟导航，而非 window.location.href 强刷页面。
通过以上改造，你的页面过渡效果将严格作用于同源、非 _blank 的内部链接，既保持交互一致性，又完全尊重 HTML 语义与用户预期。
