安卓硬件后退按钮未触发"弹出状态"

Question

在移动 SPA 应用程序中，我覆盖了默认的后退行为以在页面之间切换。

// create history states
history.pushState(-1, null); // back state
history.pushState(0, null); // main state
history.pushState(1, null); // forward state
history.go(-1); // start in main state
window.addEventListener('popstate', function (event) {
var state = event.state;
if (state === -1) {                    
if (!this.goBack()) {
return false;
}
// reset state to what it should be
history.go(-state);
}
}, false);

这适用于所有移动设备，除非某些Android设备上有硬件后退按钮(三星S5，黑莓键2是我正在测试的两个碰巧(。 按下硬件后退按钮时，永远不会调用 popstate 事件，因此用户被转储出应用程序，而不是返回页面。 有没有已知的方法可以通过Javascript拦截这个硬件后退按钮？

需要明确的是，back适用于所有设备，除了那些具有硬件后退按钮(而不是像Android 10那样的软按钮或向后滑动(的设备，这些设备似乎不会触发历史popstate事件。

Answer 1

我知道两种方法，但它们依赖于第三方框架：

1. j查询手机版

$(window).on("navigate", function(event, data){
if(direction == "back") {
// back
} elseif(direction == "forward") {
// forward
}
});

---

2. 反应原生

它为此特定目的提供了一个BackHandler：

BackHandler.addEventListener('hardwareBackPress', function() {
// this.onMainScreen and this.goBack are just examples, you need to use your own implementation here
// Typically you would use the navigator here to go to the last state.
if(!this.onMainScreen()) {
this.goBack();
return true;
}
return false;
});

---

如果使用这样的框架对你来说不是问题，你最好去做，因为他们在跨浏览器支持和即将到来的更改/添加方面投入了大量精力。我可以自己推荐jQuery移动版。