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文件中的问题。也许是jQuery Mobile返回按钮函数和Phonegap返回按钮函数之间的兼容性问题。

- horin

---

你有一个ID为“homepage”的页面吗？ - mornaner

是的，我有一个ID为“homepage”的页面。 - horin

当前的返回按钮行为是什么？ - mornaner

它只是回到了历史记录。我还尝试了一个更简单的版本，没有检查当前页面是否为主页，在按下返回按钮时应该退出应用程序，但它没有起作用。 - horin

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);
}

- mornaner

---

谢谢，它现在正在运行。我使用了您的解决方案，但没有使用 e.preventDefault() 代码。 - horin

但是如果我打开另一个页面，然后导航到＃主页。我希望返回按钮现在将使我返回到上一页，而不是关闭应用程序。 - igrek

@igrek，维护任何变量或使用堆栈/队列怎么样？我也在研究它 :-) - Faizan Mubasher

@igrek，那不是一个很好的移动范例。大多数应用程序的导航模型与网站不同；对于某些重要页面，通常是基础页面，导航栈经常会“重置”。 - mix3d

调用 e.preventDefault 或不调用似乎没有区别。 - philk

抱歉，#homepage是什么 - 如何将其设置为index.html？谢谢。 - Zac

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);

- Etienne Wan

---

你好 @EtienneWan，这段代码我需要在哪里运行？在我的html代码中还是在PhoneGap应用中。我已经用PhoneGap创建了一个应用程序，它正在运行远程URL或浏览器应用程序，该应用程序是由PHP和HTML开发的。 - Sushil Kandola

此代码将在编译的应用程序中工作，而不是通过serve选项，因为需要cordova.js，并且仅适用于Android（用于设备事件）。 - Etienne Wan

完美的解决方案，无需额外插件！ - mix3d

Answer 3

如果您不想使用Jquery Mobile，可以将$.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的废话。 此外，自JQuery mobile 1.4.0开始，activePage已被弃用，将在1.5.0中删除。 (改为使用pagecontainer小部件的getActivePage()方法)

- meetnick

---

这对于URL位置（可能通过JS设置）是否有效，而不仅仅是查找ID为“homepage”的元素？ - mix3d

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();
}
};

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

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

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

- Patrick Ogbuitepu

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

- dev

---

为了帮助 OP 解决当前的问题，可以在回答中添加一些解释说明。 - ρяσѕρєя K