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

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

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。

Answer 2

我在 Pixel 6 上遇到了类似的问题，滑动返回（或任何实际名称）不会触发 popstate 事件侦听器。这个功能为我解决了这个问题：

window.addEventListener("pageshow", function (event) {
    // Do the things
});