如何以编程方式打开/关闭后退按钮？答案

【问题标题】：how to programmatically toggle back button on/off?如何以编程方式打开/关闭后退按钮？
【发布时间】：2015-02-24 12:13:02
【问题描述】：

我有一些代码可以根据条件显示/隐藏输入按钮：

settings = settingsManager.readSettings();
if (settings) {
   $("#settings-back-button").show();
} else {
   $("#settings-back-button").hide();
}

但是，这不会阻止用户按下设备的后退按钮。我该怎么做？

settings = settingsManager.readSettings();
if (settings) {
   $("#settings-back-button").show();
   disableDeviceBackButton(); // How to implement this?
} else {
   $("#settings-back-button").hide();
   reEnableDeviceBackButton();  // How to implement this?
}

【问题讨论】：

重复，见这里：stackoverflow.com/questions/18211984/…
我已经更新了我的问题。另一个问题是问如何控制后退按钮，但这个问题是关于切换后退按钮。

标签： cordova jquery-mobile

【解决方案1】：

我认为这段代码应该可以工作：

<!DOCTYPE html>
    <html>
      <head>
        <title>Back Button Example</title>

        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    var backButtonDisabled = false;
    // Wait for device API libraries to load
    //
    function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }

    // device APIs are available
    //
    function onDeviceReady() {
        // Register the event listener
        document.addEventListener("backbutton", onBackKeyDown, false);
    }

    // Handle the back button
    //
    function onBackKeyDown(e) {

        if (backButtonDisabled) {
            e.preventDefault();
        } 
    }

    function disableDeviceBackButton() {
        backButtonDisabled = true;
    }

    function reEnableDeviceBackButton(){
        backButtonDisabled = false;
    }

</script>
  </head>
  <body onload="onLoad()">
  </body>
</html>

它可能有一些改进，例如不使用全局变量（backButtonDisabled），您可以使用 sessionStorage 代替，但重要的部分是 e.preventDefault(); 当您不想返回时避免返回按钮默认行为。

【讨论】：