H5如何解监听页面退出需求???
事发背景(时间较久):
在一个阳光明媚的一天,这天lz正在工位上悠闲的敲着代码;说时迟那时快,运营小姐姐箭步过来,让lz做一个挽留弹窗;我当时一听这TM不是流氓么。于是便有了以下的故事。。。
如何实现:
众所周知,我们一般是无法去监听浏览器的返回事件的;更别说是用户设备的物理返回键了;依稀记得浏览器确实是有个关闭事件----onbeforeunload;但是这个原意是用户是否确定关闭此页面,会有个弹窗出现;所以,这条路是走不了了。OMG折磨人,于是又想了想,如果我们添加一个中间页,在这个页面进行跳转;如果用户返回必将回到这个页面,然后在进行挽留的需求;思路貌似是可以的;但这样用户体验以及与我们需求的初衷是不符合的,于是又被pass;接着又想了想用hash去做监听呢,而且页面也不会有刷新,感觉还挺好;实践了后发现,页面进去改变了hash值后就会触发一次,当用户返回时,就不再触发这个hashchange事件了;于是就想在浏览器的浏览记录去动手;于是就用到了History 接口中的pushState完成这个需求;
如何使用:pushState /onpopstate
pushState见名知意就是往历史记录条目添加一条历史状态;使用方法:
state:'',//可以用在popstate事件中,可以通过locaton.state获取 k title: 'pushstate',//为跳转的state传递一个短标题 url: '#'//该参数定义了新的历史URL记录 window.history.pushState(state, title,url);
onpopstate监听就比较简单:
window.addEventListener('popstate', (e) => { this.callback() }, false)
兼容性:
这个是H5新特性,目前的兼容性也不是特别好;但是至少我们能够把这个需求能够完成,至于其他的监听思路,lz暂时还没想出来;也请各路大神集思广益。。
最后lz贴上我之前写的方法:
class _browserBack { init (param) { let {callback} = param; this.callback = callback; this.pushHistory() this.listenEvent() } listenEvent () {
if('pushState' in window.history){
window.addEventListener('popstate', (e) =>
this.callback()
}, false)
}
}
pushHistory () { if (this.ifhasHash()) return; let state = { title: 'pushstate', url: '#' } window.history.pushState(state, 'title', '#'); } ifhasHash () { return location.href.includes('#') } }
文章的结尾lz推荐一篇大神的文章:https://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/
小弟不才,还望指教!