如何使preventBack函数不对指定页面restart.html生效？

问题根源 #

你当前的代码在page1.html加载时强制执行history.forward()，会在浏览器历史栈中多添加一条当前页面的记录。当你跳转到page2.html后，点击返回按钮会先回到page1.html，而page1.html的脚本又会立即把页面推回page2.html，导致无法正常返回。另外，你的代码没有做页面判断，所以所有关联页面都会受影响。

方案一：优化原有逻辑，排除特定页面 #

直接在脚本开头判断当前页面是否为restart.html，如果是就不执行禁止返回的逻辑，同时优化代码写法：

// 检查当前页面是否是restart.html，是则跳过禁止返回逻辑
if (!window.location.href.includes('restart.html')) {
  function preventBack() {
    // 增加历史栈长度判断，避免无意义的forward操作
    if (window.history.length > 1) {
      window.history.forward();
    }
  }
  // 用函数引用代替字符串调用，更安全规范
  setTimeout(preventBack, 0);
  // 清空onunload事件，原有的null写法无效
  window.onunload = function() {};
}

方案二：用popstate事件更可控地禁止返回（推荐） #

这种方式不会污染历史栈，只会在当前页面拦截返回操作，对其他页面无影响：

if (!window.location.href.includes('restart.html')) {
  // 页面加载时，添加一条当前页面的历史记录
  window.history.pushState(null, null, window.location.href);
  
  // 监听浏览器返回事件
  window.addEventListener('popstate', function() {
    // 当用户点击返回时，再添加一条当前页面的记录，抵消返回操作
    window.history.pushState(null, null, window.location.href);
  });
}

注意事项 #

• 确保脚本只在需要禁止返回的页面（比如page1.html）中引入，不要在restart.html或其他允许返回的页面加载该脚本。
• 测试时注意清除浏览器缓存，避免旧代码干扰。

内容的提问来源于stack exchange，提问作者0xsined