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，请将$ .mobile.activePage.is（＆＃39; #homepage＆＃39;）更改为document.getElementById（＆＃39; #homepage＆＃39;）在@mornaner上回答，如下面的代码：

document.addEventListener（＆＃34; deviceready＆＃34;，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() {
    }

PhoneGap - 后退按钮上的android退出

5 个答案: