关于如何禁止浏览器后退及刷新功能

最近做项目的过程中遇到这样一个需求:
考试过程中,系统会禁止用户后退或刷新页面
那我们如何解决这个问题呢?

---

我上网搜索了一些解决方法,下面这种方法是我亲测可以实现且比较方便的

禁用浏览器回退

history.pushState(null, null, document.URL);
    window.addEventListener("popstate", function() {
      history.pushState(null, null, document.URL);
    });

这是HTML5的新接口,可以改变网址而不刷新页面,当然这个网址是存在跨域限制的.
但是这个接口仅改变网址,页面不会真的发生跳转,内容也不会发生改变,所以本质上页面还是停留在原本的界面上.

我们来看一下histroy.pushState这个方法

window.history 对象包含浏览器的历史。
我们常用的方法有:

history.back( ) - 与在浏览器点击后退按钮相同
history.forward( ) - 与在浏览器中点击向前按钮相同

除此之外可以用history.go()这个方法来实现向前，后退的功能。

window.history.pushState(data, title, targetURL);
@状态对象：传给目标路由的信息,可为空
@页面标题：目前所有浏览器都不支持,填空字符串即可
@可选url：目标url，不会检查url是否存在，且不能跨域。如不传该项,即给当前url添加data

pushState()可以创建历史，可以配合popstate事件

有一个非常类似的方法是

window.history.replaceState(data, title, targetURL);

用法相同,区别就在于replaceState不会加入到历史记录里面

这两个方法常常搭配popstate事件一起使用

需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()或者history.forward()方法）

禁止浏览器刷新

 window.onbeforeunload = function(e) {
      var dialogText = "重新加载页面会丢失当前进度的答案，如无必要请取消操作";
      e.returnValue = dialogText;
      return dialogText;
    };

该方法实现了在用户点击刷新按钮时,跳出Dialog框,提示用户刷新时的注意事项.
但chrome暂不支持修改提示框内容

参考文章:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/popstate_event