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

2021-02-14 08:18

阅读：584

有时候,由于业务需求,需要监听用户的后退行为,比如禁止用户后退,比如想在用户后退是给链接加上参数,这该怎么办呢?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);

上一篇：Windows Server 2016-部署第一台域控制器

下一篇：为什么 Windows API 使用 stdcall 调用约定？

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：监控浏览器的前进后退---window.onpopstate事件
文章链接：http://soscw.com/essay/55135.html

亲，登录后才可以留言！

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

评论

热门文章

推荐文章

最新文章

置顶文章