为何点击页面后JS才能禁用Bing浏览器后退按钮？

这是浏览器的固有特性限制，并非你的事件使用有误。

核心原因 #

现代浏览器（包括基于Chromium的微软Bing浏览器）为了保护用户的导航控制权，对history.pushState这类修改历史栈的操作添加了交互上下文限制：

• 页面加载完成时（DOMContentLoaded触发阶段）执行的pushState属于「无用户主动交互的脚本操作」，浏览器会默认忽略这个操作，不会生成有效的历史记录条目。
• 当你点击页面后，触发了用户交互上下文，此时执行的pushState会被浏览器认可，生成新的历史记录，后续popstate事件触发时再调用pushState就能覆盖后退行为。
• 直接点击后退按钮时，由于初始的pushState未被浏览器认可，历史栈中仍保留着进入当前页之前的条目，所以后退操作会直接回到上一页。

替代方案 #

浏览器的核心设计逻辑是优先保障用户的导航自由，因此不存在能100%禁用后退按钮的方案，你可以通过以下方式优化体验：

• 监听popstate事件，在用户触发后退时弹出确认提示，引导用户选择：

  window.addEventListener('popstate', function(e) {
    if (confirm('确定要离开当前页面吗？')) {
      history.back();
    } else {
      // 重置历史栈，阻止后退
      history.pushState(null, null, location.href);
    }
  });
  

• 注意：即使是这种方案，在无用户交互的场景下，依然可能被浏览器的安全策略限制。

内容的提问来源于stack exchange，提问作者Carlos Peña Diaz