PhoneGap - 后退按钮上的android退出

Question

我正在尝试使用jquery mobile和cordova编写RSS阅读器。我的RSS阅读器由3页组成（在同一HTML文档中：第1页，第2页，第3页）。我试图覆盖（硬件）后退按钮行为，因此它将退出程序。为了检查我在项目设置中没有犯任何错误，我使用了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 answer上将$ .mobile.activePage.is（'#pagepage'）更改为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() {
    }