首页 > 代码库 > javascript使用history api防止|阻止页面后退

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。

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