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