PhoneGap - 后退按钮上的 android 退出

Question

我正在尝试使用 jquery mobile 和 cordova 来编写 RSS 阅读器。我的 RSS 阅读器由 3 页组成（在同一个 HTML 文档中：page1、page2、page3）。我正在尝试覆盖（硬件）后退按钮行为，以便退出程序。为了检查我在项目设置中没有犯任何错误，我使用了 PhoneGap 示例项目并将其加载到 Eclipse 中。每个示例函数都有效，因此我将 index.html 和 res 文件夹移至 phonegap 示例。在我的 index.html 中，我导入了以下脚本：

<script src="res/jquery-1.7.1.min.js"></script>
<script src="res/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>

我的 main.js 文件如下所示：

document.addEventListener("backbutton", function(e){
if($.mobile.activePage.is('#homepage')){
    e.preventDefault();
    navigator.app.exitApp();
}
else {
    navigator.app.backHistory()
}
}, false);

您可以在第一个代码示例中查看我的脚本版本。关于如何让代码正常工作的任何想法，以便当我按下 Xperia Arc 上的后退按钮时它会简单地退出应用程序？如果需要，我可以上传我的完整代码。

编辑：我已经在我的 android 手机上测试了 phonegap(cordova) 哔声功能，它可以正常工作，所以这没有任何脚本实现错误。它必须在 main.js 文件中。可能与 jquerymobile 后退按钮功能和 phonegap 后退按钮功能存在兼容性问题。

Answer 1

您需要等待设备准备好添加事件监听器：

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady(){
    document.addEventListener("backbutton", function(e){
       if($.mobile.activePage.is('#homepage')){
           e.preventDefault();
           navigator.app.exitApp();
       }
       else {
           navigator.app.backHistory();
       }
    }, false);
}

Answer 2

如果您不想使用任何库，可以使用 window.location.hash 来获取您的应用所在的“面板”。 示例：

function onDeviceReady(){
    document.addEventListener("backbutton", function(e){
        if(window.location.hash=='#home'){
            e.preventDefault();
            navigator.app.exitApp();
        } else {
            navigator.app.backHistory()
        }
    }, false);
}
document.addEventListener("deviceready", onDeviceReady, false);

Answer 3

如果您不想使用 Jquery Mobile，请将 @mornaner 答案上的 $.mobile.activePage.is('#homepage') 更改为 document.getElementById('#homepage')，如下代码所示：

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady(){
    document.addEventListener("backbutton", function(e){
       if(document.getElementById('#homepage')){
           e.preventDefault();
           navigator.app.exitApp();
       }
       else {
           navigator.app.backHistory()
       }
    }, false);
}

通过这种方式，不需要只为此目的下载Jquery Mobile 乱码。 Also, activePage is deprecated as of JQuery mobile 1.4.0 将从 1.5.0 中删除。 (Use the getActivePage() method from the pagecontainer widget instead)

Answer 4

要禁用 Android 设备上后退按钮的默认行为，只需为后退按钮注册一个事件处理程序。这将阻止后退按钮关闭应用程序。

下面显示的代码专门用于 Framework7

$(document).on('page:beforeinit', function (e) {
if( $.fn.hyellaIMenu.mainView.history && $.fn.hyellaIMenu.mainView.history.length > 1 ){
    document.addEventListener( "backbutton", disableBackButton, false );
}
});

function disableBackButton( e ){
    if( $.fn.hyellaIMenu.mainView.history && $.fn.hyellaIMenu.mainView.history.length < 3 ){
        document.removeEventListener("backbutton", disableBackButton );
    }

if( $.fn.hyellaIMenu.mainView.history && $.fn.hyellaIMenu.mainView.history.length > 1 ){
    $.fn.hyellaIMenu.mainView.router.back();
}
};

要覆盖默认的后退按钮行为，请为后退按钮事件注册一个事件侦听器。

注意：不再需要调用任何其他方法来覆盖后退按钮行为。

https://cordova.apache.org/docs/en/latest/cordova/events/events.html#backbutton

Answer 5

function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }

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

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