一、背景介绍
事情是这样的，有一个业务需求需要监听浏览器(或手机内嵌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 中实现后退按钮拦截效果，需要在产品交互设计上做一些思考，至少需要用户主动进行一次交互操作。
