17370845950

本文介绍如何在实现自定义页面过渡动画时，精准排除外部链接（如含 `target="_blank"` 或指向不同域名的链接），避免强制拦截跳转导致用户体验异常。核心方案是结合 css 选择器过滤与 javascript 域名比对逻辑。

在为网站添加平滑的页面过渡效果时，一个常见误区是无差别监听所有 标签的点击事件。你提供的代码中，document.querySelectorAll('a') 会捕获全部链接（包括外部链接、下载链接、邮件链接等），而 e.preventDefault() + window.location.href 的组合会强制在当前页跳转——这不仅破坏了 target="_blank" 的语义，更可能将用户导向不可预知的第三方站点，造成安全与体验双重风险。

✅ 正确做法是：在事件绑定前主动过滤，而非在事件内“补救”。推荐采用双重校验策略：

1. 初筛：用 CSS 选择器排除显式外链标记

利用 :not() 伪类快速剔除带 target="_blank" 的链接（适用于你主动标注的外链）：

const anchors = document.querySelectorAll('a:not([target="_blank"]):not([href^="mailto:"]):not([href^="tel:"])');

2. 精筛：用 JavaScript 判断是否为真正外部链接

仅靠 target 属性不够可靠（例如内部链接也可能误设 target="_blank"）。应通过 URL 构造函数比对协议+主机名：

function isExternalLink(href) {
  try {
    const url = new URL(href);
    return url.origin !== window.location.origin;
  } catch (e) {
    return false; // 非法 URL（如 #section）视为内部链接
  }
}

3. 完整优化后的过渡逻辑

整合上述逻辑，重构你的初始化脚本：

window.addEventListener('load', () => {
  const transitionEl = document.querySelector('.transition');
  const anchors = document.querySelectorAll('a');

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

  anchors.forEach(anchor => {
    // 跳过明确的外链、邮件、电话、锚点链接
    const href = anchor.getAttribute('href');
    if (
      !href || 
      href.startsWith('#') || 
      href.startsWith('mailto:') || 
      href.startsWith('tel:') || 
      isExternalLink(href) ||
      anchor.hasAttribute('target') && anchor.getAttribute('target') === '_blank'
    ) return;

    anchor.addEventListener('click', e => {
      e.preventDefault();
      const targetUrl = getLink(e);
      if (!targetUrl) return;

      transitionEl.classList.add('is-active');
      setTimeout(() => {
        window.location.href = targetUrl;
      }, 350);
    });
  });
});

function getLink(e) {
  if (e.target.hasAttribute('href')) return e.target.href;
  let parent = e.target.parentNode;
  while (parent && parent.nodeType === Node.ELEMENT_NODE) {
    if (parent.hasAttribute('href')) return parent.href;
    parent = parent.parentNode;
  }
  return null;
}

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

⚠️ 关键注意事项：

• 不要使用 setInterval() 触发跳转（原代码存在重复执行风险），改用单次 setTimeout()；
• getLink() 中需增加 nodeType 判断，避免遍历到文本节点报错；
• 外部链接判断必须基于 origin（协议+域名+端口），而非仅靠 hostname，否则 https://example.com 和 http://example.com 会被错误视为同源；
• 若需支持 PWA 或单页应用（SPA），建议后续升级为 history.pu

  

  shState() + fetch() 方案，实现真正的无刷新过渡。

通过以上改造，你的页面过渡效果将智能适配：内部链接享受动画，外部链接保持原生行为——既保障功能正确性，又尊重用户预期与 Web 标准。