如何在JavaScript中检测移动端返回导航？解决Android Chrome失效问题

代码失效的原因 #

• 浏览器的popstate事件仅在历史栈存在至少两个条目，且通过前进/后退按钮触发历史导航时才会触发。你打开页面后直接按返回键，此时历史栈只有当前页面这一条记录，按返回键会直接退出页面（回到上一个应用或浏览器主页），不会触发popstate。
• 移动端Chrome对返回键行为做了优化：如果当前页面是历史栈的唯一条目，点击返回键会直接关闭页面或回到浏览器首页，不会触发页面内的popstate事件。

修复方案 #

页面加载时，手动调用history.pushState()添加一条历史状态，让历史栈拥有至少两个条目。这样按返回键时，浏览器会触发popstate事件，而非直接退出页面。

修改后的完整代码：

<p>Press The Back Button and see a message!</p>

<script>
// 页面加载时添加初始历史状态，不改变当前URL
history.pushState({page: 1}, "", window.location.href);

window.onpopstate = function(event) {
    alert("location: " + document.location);
    // 可选：如果需要支持多次按返回键触发事件，可再次添加历史状态
    // 注意：频繁添加可能导致历史栈膨胀，按需使用
    history.pushState({page: 1}, "", window.location.href);
};
</script>

补充说明 #

• history.pushState()的三个参数分别是：自定义状态对象（可存储任意数据）、页面标题（目前多数浏览器忽略该参数）、目标URL（留空则使用当前页面URL）。这里用当前URL添加状态，不会改变页面地址，但会增加历史栈条目。
• 如果不需要多次触发返回事件，可以去掉回调里的pushState调用，此时按一次返回键触发事件，再按一次就会退出页面。

内容的提问来源于stack exchange，提问作者Sudo Sur