监控浏览器的前进后退---window.onpopstate事件

有时候,因为业务需求,须要监听用户的后退行为,好比禁止用户后退,好比想在用户后退是给连接加上参数,这该怎么办呢?window对象的popstate事件就派上用场了

每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发. 若是当前处于激活状态的历史记录条目是由history.pushState()方法建立,或者由history.replaceState()方法修改过的, 则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝.

可是,调用history.pushState()或者history.replaceState()不会触发popstate事件. popstate事件只会在浏览器某些行为下触发, 好比点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法).

要触发popstate事件,须要两步

1.添加并激活一个历史记录条目(history.pushState)

2.改变历史记录条目(用户行为,好比后退,前进)

 如下是一个场景,当用户触发popstate事件时,检测上一个页面的url,若是是指定url,则加上指定的查询字符串参数,便于后台知道访问url源自用户的"后退"等动做,而不是直接输入网址

 

//添加并激活一个历史条目
function pushHistory() { var state = { }; window.history.pushState(state, ""); } var url=document.referrer.replace('http://'+window.location.host,'');//上一页的url
if(url.indexOf('/mobile/index/index')>-1){//若是上一页url是指定url
    var newIndex //用户触发popstate时间后,将要跳转的url
    if(url.indexOf('?')>0){//已经携带了查询字符串,则追加字符串
        newIndex=document.referrer+'&popstate=1' }else{//没有,则加上字符串参数
        newIndex=document.referrer+'?popstate=1' } pushHistory();//添加并激活一个历史条目
 //当触发popstate事件时,执行的逻辑

    window.addEventListener("popstate", function(e) { window.location.href=newIndex;//根据本身的需求实现本身的功能,我这里是跳转,也能够变成刷新,或者什么都不作,若是是什么都不作,须要再次添加并激活一个历史记录条目
 }, false); 

 Tips:

1.后退/前进时,一般状况下,浏览器会从新渲染页面,但并无对当前页面从新发起请求,并且控件的值不会变.

2.微信浏览器(真机)的行为有些不同,当后退时,若是后退后的一页有popstate事件,则会当即触发,这不是咱们想要的.所以须要作一个小的改动

var canPopstate=false //1秒内不运行执行popstate里的逻辑 
setTimeout(function () {//1秒后才真正执行popstate触发后的逻辑
    canPopstate=true },5000) window.addEventListener("popstate", function(e) { if(canPopstate){//能够执行了
    //业务逻辑
    window.location.href='/' }else{//若是还没到1秒用户点击了后退,则继续添加历史记录
    history.pushState({},'','aa=bb') } }, false); history.pushState({},'','acc=ddd')

以上代码能够防止微信浏览器内点击后退时当即执行popstate里的逻辑

3.不管当前页面增长了几个历史,一旦请求其余页面,则后退只保留最新的历史.

4.张鑫旭大神的history应用demo