点击浏览器后退按钮 chrome 不会触发popstate事件分析-[七日打卡5]

一、背景介绍

事情是这样的，有一个业务需求需要监听浏览器(或手机内嵌webview)的后退按钮，当用户点击back键退出时，需要提示用户「确定要退出吗？」的弹框，用来进行「用户挽留」操作。

采用的方案是使用 popstate 事件监听机制：

• 首先：当页面load时手动执行pushState操作，往浏览器的历史记录中注入一条
• 然后：监听 popstate 事件
• 最后：当用户点击浏览器后退按钮时会自动触发 popstate 事件，在事件的handler中执行业务逻辑即可。

通过上述3步基本实现劫持浏览器后退按钮效果。

但是测试下来发现： 在chrome浏览器中只有手动在页面中进行交互操作（点击元素、滑动页面都算）后再点击浏览器的后退按钮才能触发popstate 事件。

如果进入页面后没有任何人为交互操作行为的话，是不会触发 popstate 事件的。

这看起来就很奇怪了。

毕竟 Safari浏览器 就没有这个问题。

二、代码实现方式

原理前面已经说过了，就是在页面onload时执行pushState，等用户点击浏览器后退按钮或者执行history.back()时就会触发popstate事件。

最精简的示意代码如下：

function watchBackBtn() {
    window.addEventListener('load', () => {
        const state = {
            title: 'init',
            url: '#',
        };
        window.history.pushState(state, 'init', '#');
    });
    window.addEventListener('popstate', () => {
        alert('back...');
    });
}

三、思考

查阅一些资料，发现这是 chrome浏览器 为了提高用户体验，为了防止流氓网站禁止用户执行回退操作，把用户困在当前网站，专门做的一个功能。

所以结论是：想要在chrome中或是基于 chrome 的 webview 中实现后退按钮拦截效果，需要在产品交互设计上做一些思考，至少需要用户主动进行一次交互操作。

四、参考资料

1. stackoverflow.com/questions/5…

2. nakedsecurity.sophos.com/2019/05/09/…

3. segmentfault.com/q/101000001…