一、背景介绍
一些业务需求会需要拦截用户返回操作(浏览器、手机内嵌webview、微信网页等),做弹窗提示或者用户行为记录上报操作。
粗体
二、代码实现方式:
const currentUrl = location.href
history.pushState(null, null, currentUrl)
window.onpopstate = event => {
event.preventDefault()
popStateEvent()
}
三、问题描述
- 在chrome浏览器中只有手动在页面中进行交互操作(点击元素、滑动页面都算)后再点击浏览器的后退按钮才能触发popstate 事件。如果进入页面后没有任何人为交互操作行为的话,是不会触发 popstate 事件的。
- 没有交互操作时,只能通过js返回方法触发(history.go(-1)、history.back())
- 但是Safari浏览器没有这个问题。
四、结论
查阅一些资料,发现这是 chrome浏览器 为了提高用户体验,为了防止流氓网站禁止用户执行回退操作,把用户困在当前网站,专门做的一个功能。
所以结论是:想要在chrome中或是基于 chrome 的 webview 中实现后退按钮拦截效果,需要在产品交互设计上做一些思考,至少需要用户主动进行一次交互操作。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。