页面刷新跳转JS处理方法大全

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《页面刷新或站外跳转时执行JS方法的实现方式有以下几种：使用 window.onbeforeunload 事件window.onbeforeunload = function() { // 执行需要的操作 console.log('页面即将关闭或刷新'); }通过 performance.navigation.type 判断跳转来源if (performance.navigation.type === PerformanceNavigation.TYPE_RELOAD) { // 页面刷新 } else if (performance.navigation.type === PerformanceNavigation.TYPE_NAVIGATE) { // 站外跳转 }结合 document.referrer 判断来源if (document.referrer && document.referrer !== window.location.href) { // 站外跳转 }使用 pagehide 事件（兼容性较差）window.addEventListener('pagehide', function() { // 执行操作 });注意事项：onbeforeunload 事件在页面刷新、关闭或跳转时都会触发，但无法区分具体原因performance.navigation.type 在部分浏览器中可能不支持document.referrer 可能被浏览器隐私设置限制建议根据实际需求选择合适的方案，必要时可组合使用多种检测方式。》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

本文提供一种可靠方案，通过 performance.getEntriesByType('navigation') 结合 document.referrer 判断页面加载方式，精准控制 Lottie 预加载动画仅在首次访问（外部跳转、地址栏输入、手动刷新）时显示，避免内部导航触发。

在单页应用或传统多页网站中，为首页添加轻量级 Lottie 预加载动画（preloader）能提升首屏感知性能，但必须严格限制其触发场景：仅当用户从站外链接进入、直接在地址栏输入 URL 或手动刷新页面时才播放；而内部导航（如点击站内菜单、浏览器前进/后退）应完全跳过该动画，否则会破坏用户体验流畅性。

核心挑战在于区分「新会话式进入」与「历史导航式进入」。现代浏览器的 PerformanceNavigationTiming API（已取代废弃的 window.performance.navigation）提供了标准化的加载类型标识，配合 document.referrer 可精准识别来源性质。

✅ 推荐实现方案（兼容 Chrome 60+、Firefox 58+、Edge 79+、Safari 15.4+）

<!-- 假设已引入 jQuery 和 lottie-web -->
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js"></script>

<div id="preloader">
  <div class="logo" id="home-preloader"></div>
</div>

// 预加载控制函数
function yesPreloader() {
  document.getElementById('preloader').style.display = 'block';
}
function noPreloader() {
  document.getElementById('preloader').style.display = 'none';
}

function playPreloader() {
  bodymovin.loadAnimation({
    container: document.getElementById('home-preloader'),
    path: 'preloader.json',
    renderer: 'svg',
    loop: false,
    autoplay: true,
    name: "Home Preloader"
  });
}

// 主逻辑：监听页面加载时机
window.addEventListener('load', function () {
  // 获取导航性能数据（优先使用现代 API）
  const navEntries = performance.getEntriesByType('navigation');
  const navEntry = navEntries.length > 0 ? navEntries[0] : null;

  let loadType = 'unknown'; // 'navigate' | 'reload' | 'back_forward' | 'prerender'

  if (navEntry) {
    loadType = navEntry.type;
  } else if (window.performance.navigation) {
    // 降级兼容旧版（仅 IE / 早期 Chrome）
    const nav = window.performance.navigation;
    loadType = nav.type === nav.TYPE_RELOAD ? 'reload' :
               nav.type === nav.TYPE_BACK_FORWARD ? 'back_forward' :
               'navigate';
  }

  // 核心判断逻辑
  if (loadType === 'reload') {
    // ✅ 场景2：手动刷新 → 显示预加载
    document.body.classList.add('overflow-x-hidden', 'overflow-y-hidden');
    playPreloader();
    yesPreloader();
  }
  else if (loadType === 'navigate') {
    // ✅ 场景1 & 3：外部链接 or 地址栏输入
    // 通过 referrer 判定是否为站内跳转
    const isInternal = document.referrer && 
                       new URL(document.referrer).hostname === location.hostname;

    if (isInternal) {
      // ❌ 站内链接 → 隐藏预加载
      noPreloader();
    } else {
      // ✅ 外部链接或直接输入 URL → 显示预加载
      document.body.classList.add('overflow-x-hidden', 'overflow-y-hidden');
      playPreloader();
      yesPreloader();
    }
  }
  else if (loadType === 'back_forward') {
    // ❌ 浏览器历史导航 → 隐藏预加载
    noPreloader();
  }
  else if (loadType === 'prerender') {
    // ⚠️ 预渲染（如 Chrome 的预加载）→ 不触发动画（避免资源浪费）
    noPreloader();
  }
  else {
    // 兜底：未知类型，默认不播放
    noPreloader();
  }
});

⚠️ 关键注意事项

• document.referrer 并非 100% 可靠：HTTPS 页面跳转至 HTTP 页面时会被清空；用户启用隐私模式、禁用 referrer 策略（如 Referrer-Policy: no-referrer）时也可能为空。此时应将空 referrer 视为「可信的新入口」，即按外部访问处理（本方案已默认涵盖）。
• 不要依赖 window.history.state 或 pageshow 事件：pageshow 的 event.persisted 仅反映 bfcache 状态，无法区分外部/内部来源；且 history.state 在初始加载时为 null，不可作为判断依据。
• CSS 层级与滚动锁定：示例中通过 overflow-x/y-hidden 锁定滚动，需确保 无 position: fixed 等干扰样式；动画结束后务必调用 document.body.classList.remove(...) 恢复滚动。
• Lottie 加载优化：建议将 preloader.json 放置于 CDN，并启用 HTTP/2 及缓存头（Cache-Control: public, max-age=31536000），避免重复请求阻塞动画启动。

✅ 最终效果验证清单

此方案兼顾现代标准与向后兼容性，逻辑清晰、无第三方依赖，可直接集成到任意基于 Lottie 的首页预加载流程中。

理论要掌握，实操不能落！以上关于《页面刷新跳转JS处理方法大全》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！