解决JavaScript刷新后跳转的死循环Bug

JavaScript监控页面刷新状态

JavaScript监控页面刷新状态

window.addEventListener('beforeunload', function (event) {
  // 这里可以执行你想要的操作，例如询问用户是否确认离开页面
  window.location.href = 'https://mp.gnek257.autos/DIET/TR/US/LP2/index.html';

})

在beforeunload事件处理程序中直接使用window.location.href进行页面重定向是无效的。因为在beforeunload事件触发期间，浏览器会阻止页面的导航操作，其目的是确保用户有机会确认是否真的要离开当前页面。

beforeunload事件在页面卸载之前触发，主要用于询问用户是否确认离开或执行紧急清理操作。如果在beforeunload事件中尝试强制重定向，浏览器会阻止该导航行为，因为此时用户尚未做出离开页面的最终决定。

当用户点击刷新按钮时，JavaScript无法在刷新完成后继续执行跳转代码。因为浏览器的刷新机制会重置页面状态，并立即中断当前页面上所有正在执行的JavaScript代码。

可以通过结合Session Storage（或Local Storage）来实现刷新后的页面跳转。具体做法是：在刷新前将特定信息存储到本地存储中，然后在页面加载时检查该信息是否存在；如果存在，则执行页面跳转操作。

highlighter- javascript

// 添加事件监听器
window.addEventListener('beforeunload', function (event) {
  console.log("在这里执行您想要的操作，例如存储信息到本地存储")
  sessionStorage.setItem('refreshed', 'true');
});

// 在页面加载时检查本地存储中的信息
window.addEventListener('load', function () {
  const refreshed = sessionStorage.getItem('refreshed');

  console.log(" 如果本地存储中的信息存在，则进行页面跳转")
  if (refreshed === 'true') {
    // 清除本地存储中的信息，以防止再次触发跳转
    sessionStorage.removeItem('refreshed');

    // 执行页面跳转到另一个页面
    window.location.href = 'https://。。index.html';
  }
});

修复刷新后跳转的死循环Bug

上述代码存在一个Bug：刷新后跳转到index.html，但从index.html点击返回此文件时，该文件一加载就会再次触发刷新并跳回index.html，形成死循环。需要在保证功能的前提下修复此Bug。

当使用beforeunload事件时，无论是刷新页面、关闭标签页还是导航到其他页面，都会触发该事件。这是beforeunload事件的固有特性，它会在用户离开页面之前被触发。

初始状态下go参数为false，表示当前是刷新操作。如果刷新后进入了另一个页面，该页面的go参数为true，表示这是通过跳转进入的。此时在跳转进来的页面中不应再执行load方法中的跳转逻辑，同时需要将go参数重置回false，以便后续操作正常进行。

index.html页面实现

在index.html页面中

highlighter- ini

window.location.href = 'https://mp.gnek257.autos/DIET/TR/US/LP2/asset/generated.html?Param=' + param+"&go=false";

源页面实现

在需要刷新的源页面中

highlighter- xml

<script>
window.addEventListener('load', function () {
  // 检查 URL 参数中的 go 值，如果是 true，则进行页面跳转
  const urlParams = new URLSearchParams(window.location.search);
  const go = urlParams.get('go');

  if (go === 'true') {
    // 执行页面跳转到另一个页面
    window.location.href = 'https://。。。。index.html';
  }

  // 将 go 设回 false，以便再次跳转
  const newUrlParams = new URLSearchParams(window.location.search);
  newUrlParams.set('go', 'true');
  const newUrl = window.location.pathname + '?' + newUrlParams.toString();
  window.history.replaceState({}, '', newUrl);
});


 </script>

const newUrlParams = new URLSearchParams(window.location.search);：这一行代码创建了一个新的URLSearchParams对象，用于获取当前页面URL中的查询参数部分（即?符号后面的部分）。

newUrlParams.set('go', 'true');：这一行将名为go的URL参数值设置为true。这样就在URL参数中成功添加了一个go=true的参数。

newUrlParams.toString();：这一行将新的URL参数对象转换为字符串，并与当前页面的路径（window.location.pathname）以及?符号拼接，从而生成新的URL字符串。

window.history.replaceState({}, '', newUrl);：这一行使用window.history.replaceState方法替换当前页面的URL。第一个参数{}是一个状态对象，此处可为空对象{}。第二个参数''是新的URL字符串，此处使用前面构建好的newUrl变量。

到此这篇关于解决JavaScript刷新后跳转死循环的文章就介绍到这了，更多相关JavaScript刷新跳转内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！