防止页面回退

window对象通过history对象提供了对浏览器历史的访问。它暴露了很多有用的方法和属性，允许你在用户浏览历史中向前和向后跳转。

在history中跳转
使用back(), forward()和go()方法来完成在用户历史记录中向后和向前的跳转。

向后跳转

window.history.back()

这段代码和用户点击浏览器回退按钮的效果相同。

向前跳转

window.history.forward()

这段代码如同用户点击了前进按钮。

跳转到history中指定的一个点
你可以用go()方法载入到会话历史中的某一特定页面，通过与当前页面相对位置来标志（当前页面的相对位置标志为0）

向后回退一个页面（等同于调用back()）

window.history.go(-1);

向前前进一个页面（等同于调用forward()）

window.history.go(-1);

也可以通过查看长度属性的值来确定历史堆栈中页面的数量

window.history.length;

---

添加和修改历史记录中的条目
history.pushState()和history.replaceState()方法，通常配合window.onpopstate()方法使用。

使用history.pushState()可以改变referrer，它在用户发送XMLHttpRequest请求时在HTTP头部使用，改变state后创建的XMLHttpRequest对象的referrer都会被改变。因为referrer是标识创建XMLHttpRequest对象时this所代表的window对象中document的url。

pushState()方法的例子
假设在http://mozila.org/foo.html中执行了以下的JavaScript代码：

var stateObj = {foo: "bar"};
history.pushState(stateObj, "page 2", "bar.html");

这段代码将使浏览器地址栏显示为http://mozilla.org/bar.html，但并不会导致浏览器加载bar.html，甚至不会检查bar.html是否存在。

假设现在用户又访问了http://google.com，然后点击了返回按钮。此时，地址栏将显示http://mozilla.org/bar.html, 同时页面会触发popstate事件，事件对象state中包含了stateObj的一份拷贝。页面本身和foo.html一样。

如果我们再次点击返回按钮，页面URL就会变为http://mozilla.org/foo.html, 文档对象document会触发另外一个popstate事件，这一次事件对象stateObject为null，返回并不改变页面内容。

window.onpopstate()
每当处于激活状态的历史记录条目发生变化时，popstate事件就会在对应window对象上触发，如果当前处于激活状态的历史记录条目是由history.pushState()方法创建，则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝。

调用history.pushState()不会触发popstate事件，popstate事件只会在浏览器某些行为下触发，比如点击后退，前进按钮。

语法

window.onpopstate = funcRef;  // funcRef是个函数名

例子
假如当前网页地址为http://example.com/example.html，运行如下代码：

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
//绑定事件处理函数. 
history.pushState({page: 1}, "title 1", "?page=1");    //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1
history.pushState({page: 2}, "title 2", "?page=2");    //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2
history.replaceState({page: 3}, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3
history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 弹出 "location: http://example.com/example.html, state: null
history.go(2);  // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}

还是有点一知半解………….

---

防止页面回退的代码，如下：

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

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/onpopstate 来自MDN