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 密鑰 2 是我正在測試的兩個）。 按下硬件后退按鈕時永遠不會調用 popstate 事件，因此用戶會被轉出應用程序而不是返回頁面。 是否有任何已知的方法可以通過 Javascript 攔截此硬件后退按鈕？

需要明確的是，除了那些具有硬件后退按鈕的設備（不是軟按鈕或像 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;
});

---

如果使用這樣的框架對您來說不是問題，那么您最好使用 go，因為他們在跨瀏覽器支持和即將進行的更改/添加方面付出了很多努力。 我可以自己推薦 jQuery 手機。