如何在 phonegap/cordova 中检测 Android 后退按钮答案

【问题标题】：How to detect Android back button in phonegap/cordova如何在 phonegap/cordova 中检测 Android 后退按钮
【发布时间】：2015-04-16 15:02:43
【问题描述】：

我目前使用的是cordova 3.7.1。在我的应用程序中，我无法在我的 jquery 脚本中检测到硬件后退按钮。我尝试这样： $(document).ready(function() { //registering the back button document.addEventListener("backbutton", onBackKeyDown, false); });

function onBackKeyDown(e) { alert("back button pressed");//alert if the android back button is pressed }

但这不起作用。我已经尝试了所有的可能性

我还尝试使用

获取 MainActivity.java 中的当前 URL

appView.getUrl();

但这不会返回 div 的 url 如果我有一个 div 作为 #page2 它不会返回 url。

它只返回http://sas.cer.org/index.html。它没有返回http://sas.cer.org/index.html#page2

我也在使用 jquery mobile。

在 Native 端或 Jquery 端处理 android/hardware 后退按钮是否有任何替代方法？？

【问题讨论】：

总是喜欢使用移动原生事件。在deviceready 事件中绑定所有移动事件是一个很好的做法。

标签： android jquery cordova jquery-mobile

【解决方案1】：

有两种解决方案：

1) 您需要在 index html 文件的 head 部分的脚本标记中包含 cordova.js 以使事件和插件正常工作。

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

您可能无法在文件夹中看到此文件，但 phonegap |在移动设备上运行时，cordova 命令会构建它。

2) 修改你的代码为given here. 使用特定于移动设备的事件来确保您的应用程序正常运行。

【讨论】：

我在标签中添加了cordova.js。代码不起作用我尝试了这样的事情：document.addEventListener('deviceready',function(event) { document.addEventListener('backbutton', function(e) { // Logic to be executed on back button event alert("Back Pressed"); } }, false); 如果按下后退按钮则显示警报。
这是我的代码 sn-p：<script type="text/javascript"> $(document).ready(function() { document.addEventListener('backbutton', function(e) { // Logic to be executed on back button event alert("Back Button Pressed"); }, false); }); </script>

【解决方案2】：

以下内容在我们部署到 cordova 和 web 的应用中使用并运行良好。

如果在科尔多瓦，需要window._cordovaNative = true。

我将我的按钮处理代码留在那里作为示例（请参阅“// close menu if open”和其他 cmets），您需要将其替换为您的代码。

把它放在某处：

let bNH, bakNavHandler = bNH = {
    warningOpen: false,
    init: function(){
        if (window._cordovaNative)
            document.addEventListener('backbutton', this.onback, false);
        else {
            if (!window.performance || performance.navigation.type != 1)
                this.preventDefault();
            window.onpopstate =  this.onback;
        }
    },
    preventDefault: function(e){
        window._cordovaNative ? 
            e.preventDefault() : 
            window.history.pushState(null, '', window.location.href);
    },
    onback: function(e){
        // close menu if open
        if ($('#ekapp_menu_div').css('margin-right') == '-2px'){
            bNH.preventDefault(e)
            _that.hideMenuDiv();
        }
        // close modal if open
        else if (!bNH.warningOpen && $('#ekapp_modal:visible')[0]){
            bNH.preventDefault(e)
            _that.closeModal();
        }
        // prev screen if history
        else if (_that.history.length > 1) {
            bNH.preventDefault(e)
            _that.previousScreen();
        }
        // show close app warning
        else if (!bNH.warningOpen) {
            if (window._cordovaNative)
                bNH.preventDefault(e);
            _that.openModal('Tap back button again to exit app!');
            bNH.warningOpen = true;
            $('#ekapp_modal_buttons .ekapp_cancel_btn').one('click', function(){
                bNH.warningOpen = false;
                if (!window._cordovaNative)
                    bNH.preventDefault();
            });
        }
    }
};

然后在您的 deviceready (cordova) 或 doc ready (web) 初始化函数中执行：

bakNavHandler.init();

【讨论】：

【解决方案3】：

阅读文档，你有a full example there

你必须监听 deviceready 事件，而不是 document ready

<!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">

    // 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() {
    }

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

【讨论】：

我正在处理本机端本身的后退按钮事件。我没有使用 OnBackKeyDown()。