Android 硬件后退按钮未触发“popstate”

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、BlackBerry Key 2 是我正在测试的两个设备）。按下硬件后退按钮时永远不会调用 popstate 事件，因此用户会被转出应用程序而不是返回页面。是否有任何已知的方法可以通过 Javascript 拦截此硬件后退按钮？

需要明确的是，除了那些似乎不会触发历史 popstate 事件的硬件后退按钮（不是软按钮或像 Android 10 中那样向后滑动）的设备之外，几乎所有设备都可以完美运行后退。

Answer 1

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

1. jQuery 移动版

  $(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 mobile。