javascript阻止浏览器回退事件

最近做一个金融相关的项目，甲方想要一个能阻止浏览器回退的方案以实现用户操作包括浏览器左上角按钮，鼠标右键打开菜单选择返回，或者alt+键盘左键的情况下能不丢失用户键入数据或者操作的动作。

从我调查来看因为浏览器安全策略问题没办法直接屏蔽掉回退功能，在用户交互之前（新进入一个界面不进行鼠标点击，滚轮或者键盘操作）或者连续点击回退按钮的情况下总会出现屏蔽失效的问题 这个问题没办法改变 但是可以阻止用户因为误触导致画面回退用户的数据或者动作操作丢失的问题。

1.强行阻止

在JavaScript中，阻止浏览器回退事件通常使用window.onbeforeunload事件。但是，目前的浏览器安全策略可能会要求用户与页面进行交互后才能触发该事件。

这是为了防止恶意网站滥用此功能，强制用户停留在页面上，阻止其离开。通过在用户与页面进行交互时才允许触发window.onbeforeunload事件，浏览器确保用户可以自由地离开页面，同时在必要时提供一些保护。

以下是一个示例，展示了如何使用window.onbeforeunload事件来阻止浏览器回退：

window.onbeforeunload = function() {
  return "确定要离开此页面吗？";
};

要阻止浏览器右键菜单中的返回按钮（不阻止整个右键菜单的弹出），你可以使用beforeunload事件来捕获用户离开页面的行为，并在事件处理程序中阻止默认的返回行为。以下是一个示例代码：

window.addEventListener('beforeunload', function(event) {
  event.preventDefault();
  event.returnValue = ''; // 兼容旧版本浏览器
});

这段代码将监听窗口的beforeunload事件，并在事件处理程序中调用preventDefault()方法来阻止默认的返回行为。为了兼容旧版本的浏览器，我们还将设置event.returnValue为空字符串。

通过这种方式，当用户在右键菜单中选择返回按钮时，浏览器将不会执行返回操作。

2.修改历史记录

要在JavaScript中阻止浏览器的回退事件（即用户按下浏览器的后退按钮），你可以使用history.pushState()方法来修改浏览器的历史记录，从而阻止默认的后退行为。以下是一个示例代码：

window.history.pushState(null, null, window.location.href);
window.onpopstate = function(event) {
  window.history.pushState(null, null, window.location.href);
};

这段代码将在页面加载时调用pushState()方法，将当前URL添加到浏览器的历史记录中。然后，当用户按下浏览器的后退按钮时，onpopstate事件将触发，并再次调用pushState()方法，将当前URL再次添加到历史记录中。当然第一个pushState()方法是为了要画面一跳转进来就压入历史记录中。

这样做的效果是，当用户按下后退按钮时，浏览器的历史记录中只有一个页面条目，即当前页面的URL，因此无法回退到前一个页面。

请注意，阻止浏览器的回退事件可能会影响用户的导航体验，因为他们可能无法像预期的那样回退到前一个页面。请谨慎使用此功能，并确保在特定情况下进行适当的测试和验证。

可以搭配以下代码使用：

• history.back() // 与在浏览器点击后退按钮相同 （）里面可以填参数是回退的页面数
• history.forward() //与在浏览器中点击向前按钮相同（）里面可以填参数是回退的页面数
• history.go(1); // go() 里面的参数表示跳转页面的个数 例如 history.go(1) 表示前进一个页面
• history.go(-1); // go() 里面的参数表示跳转页面的个数 例如 history.go(-1) 表示后退一个页面

详情可以了解JavaScript window.history 对象包含浏览器的历史

以上是一个简略的修改history来实现功能的方法 

另附（浏览器左上角按钮，鼠标右键打开菜单选择返回，或者alt+键盘左键的控制历史记录实现回退）：

// 阻止浏览器的回退事件（包括后退按钮、右键返回、Alt+左键）
window.history.pushState(null, null, window.location.href);
window.onpopstate = function(event) {
  window.history.pushState(null, null, window.location.href);
};

// 阻止右键返回事件
window.addEventListener('mousedown', function(event) {
  if (event.button === 2) { // 右键点击
    event.preventDefault();
    event.stopPropagation();
  }
});

// 阻止Alt+左键的回退事件
window.addEventListener('keydown', function(event) {
  if (event.altKey && event.keyCode === 37) { // Alt+左键
    event.preventDefault();
    event.stopPropagation();
  }
});

这段代码首先阻止浏览器的回退事件，使用和前面一样的方法，即在页面加载时调用pushState()方法，并在onpopstate事件中再次调用pushState()方法。

然后，通过监听鼠标的mousedown事件，检测是否为右键点击（event.button === 2），如果是，则调用preventDefault()和stopPropagation()方法阻止默认的右键返回事件。

最后，通过监听键盘的keydown事件，并检测是否按下了Alt键和左键（event.altKey && event.keyCode === 37），如果是，则同样调用preventDefault()和stopPropagation()方法阻止默认的Alt+左键回退事件。

3.Vue.js、React 和 Angular 的示例代码实现

Vue.js

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  mounted() {
    // 监听浏览器的 popstate 事件
    window.addEventListener('popstate', this.handlePopstate);
  },
  beforeDestroy() {
    // 组件销毁时移除事件监听
    window.removeEventListener('popstate', this.handlePopstate);
  },
  methods: {
    handlePopstate(event) {
      // 阻止浏览器回退事件的默认行为
      event.preventDefault();
      
      // 可以在这里执行你自定义的逻辑
    }
  }
};
</script>

在 Vue 组件的 mounted 生命周期钩子中添加了对 popstate 事件的监听，当浏览器触发回退事件时，会调用 handlePopstate 方法来阻止默认行为，并在其中执行自定义逻辑。在组件销毁时，使用 beforeDestroy 钩子来移除事件监听。

React:

import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    const handlePopstate = (event) => {
      // 阻止浏览器回退事件的默认行为
      event.preventDefault();
      
      // 可以在这里执行你自定义的逻辑
    };

    // 监听浏览器的 popstate 事件
    window.addEventListener('popstate', handlePopstate);

    return () => {
      // 组件卸载时移除事件监听
      window.removeEventListener('popstate', handlePopstate);
    };
  }, []);

  return (
    <div>
      {/* 页面内容 */}
    </div>
  );
};

export default MyComponent;

使用 React 的函数式组件和 useEffect 钩子来添加和移除对 popstate 事件的监听。在 handlePopstate 方法中，阻止了浏览器回退事件的默认行为，并在其中执行自定义的逻辑。

Angular:

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <!-- 页面内容 -->
  `,
})
export class MyComponent {
  @HostListener('window:popstate', ['$event'])
  onPopstate(event: Event) {
    // 阻止浏览器回退事件的默认行为
    event.preventDefault();
    
    // 可以在这里执行你自定义的逻辑
  }
}

使用 Angular 的 @HostListener 装饰器将 onPopstate 方法绑定到 window 对象的 popstate 事件上。在 onPopstate 方法中，阻止了浏览器回退事件的默认行为，并在其中执行自定义的逻辑。