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

Posted 2020-09-23 随记

奇葩需求啥时候都会有，最近有个需求是不允许浏览器回退，但是所有页面都是超链接跳转，于是乎脑壳没转弯就回答了做不到，结果尼玛被打脸了，这打脸的声音太响，终于静下心来看了下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。