如何为外部链接和新标签页链接禁用页面过渡效果

如何为外部链接和新标签页链接禁用页面过渡效果第1张

本文介绍如何在实现原生 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 语义与用户预期。