在Cordova Android应用程序上使用后退按钮关闭模态窗口

时间:2014-09-18 02:08:27

标签: javascript android cordova

我正在使用Bootstrap 3为HTML和CSS构建Cordova Web应用程序。我只使用一个index.html文件,在其中我使用模态窗口进行特定操作。

从应用程序的一些初始测试中,当模态窗口显示时最自然的事情是使用手机上的后退按钮关闭它。但是,当他们按此时会关闭应用程序。

我试图以基本方式处理后退按钮事件,但它似乎无法在模拟器上或我的开发手机上工作(华为Y300,如果这有所不同)。以下是代码:

// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
    app.receivedEvent('deviceready');

    // Cordova is loaded and it is now safe to call Cordova methods
    //
    function onDeviceReady() {
        // Register the event listener
        document.addEventListener("backbutton", onBackKeyDown, false);
    }

    // Handle the back button
    //
    function onBackKeyDown() {
        // whatever you want to do
        alert('Back button Pressed');
    }
},

我很确定我知道该怎么做才能找出Modal窗口是否打开,所以我可以自己处理。但是,尝试控制后退按钮我无法做到。

1 个答案:

答案 0 :(得分:1)

审查了代码后,我认为它是在错误的地方。所以我已将以下内容添加到我的index.js文件中:

document.addEventListener("backbutton", onBackKeyDown, false);

function onBackKeyDown(event) {
    event.preventDefault();

    if($("#myModal").hasClass('in')) {
        $("#myModal").modal('hide');
    } else if ($('body').hasClass('mme')){
        $('body').removeClass('mme');
    } else {
        navigator.app.exitApp();
    }

}