关于javascript:使用pushState点击浏览器后退按钮-chrome-不会触发popstate事件分析

249次阅读

共计 537 个字符,预计需要花费 2 分钟才能阅读完成。

一、背景介绍
一些业务需要会须要拦挡用户返回操作(浏览器、手机内嵌 webview、微信网页等),做弹窗提醒或者用户行为记录上报操作。
粗体
二、代码实现形式:
const currentUrl = location.href
history.pushState(null, null, currentUrl)
window.onpopstate = event => {
event.preventDefault()
popStateEvent()
}

三、问题形容

  1. 在 chrome 浏览器中只有手动在页面中进行交互操作(点击元素、滑动页面都算)后再点击浏览器的后退按钮能力触发 popstate 事件。如果进入页面后没有任何人为交互操作行为的话,是不会触发 popstate 事件的。
  2. 没有交互操作时,只能通过 js 返回办法触发(history.go(-1)、history.back())
  3. 然而 Safari 浏览器没有这个问题。

四、论断
查阅一些材料,发现这是 chrome 浏览器 为了进步用户体验,为了避免流氓网站禁止用户执行回退操作,把用户困在以后网站,专门做的一个性能。

所以论断是:想要在 chrome 中或是基于 chrome 的 webview 中实现后退按钮拦挡成果,须要在产品交互设计上做一些思考,至多须要用户被动进行一次交互操作。

正文完
 0