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

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

本文介绍如何在实现原生 javascript 页面过渡动画时，精准排除 `target="_blank"` 外部链接或自定义类名链接，避免错误拦截跳转，确保用户体验与语义正确性。

在为网站添加平滑页面过渡（如淡入/滑动+遮罩层）时，一个常见问题是：所有标签默认被统一监听点击事件，导致本该在新标签页打开的外部链接（target="_blank"）或跨域链接也被强制拦截并重定向到当前窗口——这不仅破坏了用户预期，还可能引发安全与可访问性问题（例如 rel="noopener" 缺失风险）。

要解决该问题，核心思路是 在绑定事件前主动过滤掉不应触发过渡的链接，而非在事件处理中临时判断。推荐使用现代 DOM API 的 CSS 选择器能力进行精准筛选：

✅ 推荐方案：用 :not() 选择器预过滤锚点

将原始代码中的：

const anchors = document.querySelectorAll('a');

替换为更精确的选择器，例如：

// 排除 target="_blank"、以 http(s):// 开头的外部链接、以及带 .external 类的链接
const anchors = document.querySelectorAll(
  'a:not([target="_blank"]):not([href^="http://"]):not([href^="https://"]):not([href^="//"]):not(.external)'
);

? 说明： [href^="http://"] 和 [href^="https://"] 匹配绝对协议外部链接； [href^="//"] 覆盖协议相对链接（如 //google.com）； .external 是你可自由定义的语义化类（便于 CMS 或手动标记），增强可维护性。

⚠️ 注意事项与优化建议

避免 setInterval 做延迟跳转
原代码中使用 setInterval + window.location.href 存在严重隐患：若用户快速多次点击，会触发多个定时器，造成不可预测跳转。应改用 setTimeout 并确保仅执行一次：

anchor.addEventListener('click', e => {
  const href = getLink(e);
  if (!href || isExternalLink(href)) return; // 提前退出

  e.preventDefault();
  transition_el.classList.add('is-active');

  setTimeout(() => {
    window.location.href = href;
  }, 350); // 与 CSS 过渡时长严格一致
});

补充 isExternalLink() 工具函数（更健壮）
相比纯属性匹配，建议结合 URL 解析判断是否为外部链接（尤其支持相对路径、同站不同子域等场景）：

function isExternalLink(url) {
  try {
    const link = new URL(url, window.location.origin);
    return link.origin !== window.location.origin;
  } catch {
    return false; // 非法 URL 视为内部（或由后端兜底）
  }
}

保留 target="_blank" 的语义与安全
若需对某些外部链接启用过渡（极少见），应放弃 target="_blank"，改用 window.open() 手动控制，并显式添加 rel="noopener noreferrer"：

// 示例：仅对特定 external-link 启用新窗口 + 过渡（不推荐常规使用）
if (anchor.classList.contains('external-soft')) {
  e.preventDefault();
  transition_el.classList.add('is-active');
  setTimeout(() => {
    window.open(href, '_blank', 'noopener,noreferrer');
  }, 350);
}

✅ 最终精简版完整逻辑（含防御性检查）

window.addEventListener('DOMContentLoaded', () => {
  const transitionEl = document.querySelector('.transition');
  const anchors = document.querySelectorAll(
    'a:not([target="_blank"]):not(.no-transition):not([href=""]):not([href="#"])'
  );

  // 初始隐藏过渡层
  setTimeout(() => transitionEl?.classList.remove('is-active'), 350);

  anchors.forEach(anchor => {
    anchor.addEventListener('click', e => {
      const href = getLink(e);
      if (!href || isExternalLink(href)) return;

      e.preventDefault();
      transitionEl?.classList.add('is-active');

      setTimeout(() => {
        window.location.href = href;
      }, 350);
    });
  });
});

function getLink(e) {
  if (e.target.matches('a[href]')) return e.target.href;
  const link = e.target.closest('a[href]');
  return link ? link.href : null;
}

function isExternalLink(url) {
  try {
    const u = new URL(url, location.origin);
    return u.origin !== location.origin;
  } catch {
    return false;
  }
}

通过以上改造，你的页面过渡效果将智能避开所有外部链接、新窗口链接及显式标记的免过渡链接，既保持功能完整性，又遵循 Web 最佳实践。