javascript - 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 设备上有硬件后退按钮(Samsung S5、BlackBerry 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。 react native

它为此特定目的提供了一个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。