javascript使用history api防止|阻止页面后退

奇葩需求啥时候都会有，最近有个需求是不容许浏览器回退，可是全部页面都是超连接跳转，因而乎脑袋没转弯就回答了作不到，结果尼玛被打脸了，这打脸的声音太响，终于静下心来看了下history api。

先上代码：

// 防止页面后退
// 页面载入时使用pushState插入一条历史记录
history.pushState(null, null, document.URL.split("?")[0] + "?rand=" + Math.random());
console.log('刷新');
window.addEventListener('popstate', function(event) {
    console.log('回退');
    // 点击回退时再向历史记录插入一条，以便阻止下一次点击回退
    history.pushState(null, null, document.URL.split("?")[0] + "?rand=" + Math.random());
});

下面一步步来解释：

history.pushState(state, title, url);

页面载入时就使用history api插入一条历史记录，为啥要这一步呢，缘由是onpopstate事件只能监听pushState插入的历史记录，而a标签跳转的连接是不受监听滴。
所以为了让咱们能监听用户点击浏览器的回退操做or安卓的返回键，必须得加上这一步。

关于pushState方法三个参数

参数一：state，能够是字符串，也能够是一个JS对象，该参数设置的值在能够在响应onpopstate事件时event对象上获取。

参数二：title，听说能够设置历史记录中的标题，然而亲测没什么卵用(firefox和chrome测试结果)，历史记录仍是会取页面上<title>标签中的文字，不过能够在pushState以前设置document.title改变历史记录中的标题。

参数三：url，就是历史记录中的URL地址，没太多用处，只是在地址栏使用，方便用户复制，或者手动刷新。

 

window.addEventListener('popstate', function(event) {/* code */});

监听用户退回操做，必须是history api添加的历史记录才能响应事件。意思是history.pushState或者history.replaceState添加的才能响应。超连接或者location.href跳转不受控制。

 

history.pushState(/* xxx */);

事件中的pushState方法，该方法做用就是在用户点击回退以后，再向历史记录中插入一条记录，以便用户下一次点击回退还能拦截。

 

document.URL.split("?")[0] + "?rand=" + Math.random()

这一串的用处是在测试的时候方便看出地址栏变化，实际使用中不要rand后面这一串随机数。

 

关于history api的说明，这儿就不作阐述，请自行Google。