Question

我有一个可以在Android上正常构建并安装的应用。

然而，当我使用应用程序并导航到几个页面然后返回index.html如果我按下后退按钮，应用程序不会退出，它只会返回到页面。

如何在index.html上使用PhoneGap应用程序终止/退出然后再按回来？

退出应用程序的常规做法是什么？

请帮帮我。

 <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <meta name="viewport" content="width=device-width" />
    <title></title>

    <script src="resources/jquery-1.10.2.min.js" type="application/javascript"></script>
    <link rel="stylesheet" type="text/css" href="resources/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="resources/style.css"/>
    <script src="resources/jquery.mobile-1.4.5.min.js" type="application/javascript"></script>
    <link rel="stylesheet" type="text/css" href="resources/jquery.mobile-1.4.5.min.css" media="screen" />
    </head>
    <script>
        var g_context=0;


        function submitFormInPopUp() {
            window.open('', 'Prvwindow','location=no,status=no,toolbar=no,scrollbars=yes,width=730,height=500');
            document.test.action = "preview.jsp"
            document.test.target = "Prvwindow"
            document.test.submit();
        }


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

            $('#mainDiv').hide();

            setInterval(function(){
                $('#AnimationDiv').hide();

                $('#mainDiv').show();


            }, 4000);

            var param1 = getQueryVariable("message");

            if (param1 != "" && param1 != undefined)
                alert(param1);


        });
function onDeviceReady() {
        // Register the event listener
        document.addEventListener("backbutton", onBackKeyDown, false);
    }

    // Handle the back button
    //
    function onBackKeyDown() {
     alert("Pressed back button");

    }
        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for ( var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    return pair[1];
                }
            }
        }


         function test(){
            var username = $("#username").val();
            var password = $("#password").val();
            //alert(username);
            //alert(password);
            if(!(username == '' || password == '')){
            $.post(g_ipaddress + "/HTRIMS-1/login",{
            username : username ,password : password
            },  
            function(data){
                //alert(data);
                //alert(data.message + "::" + data.reason);
                if(data.message=="Success"){
                    localStorage.setItem("roleid",data.id);
                    window.location.assign("services.html")
                }
                else{
                        document.getElementById("loginFailed").innerHTML=data.reason;
                }
            });
            }


        } 

        </script>

    <body style="background-color:white;" >
    <div id="mainDiv" style="background-color:white;">
            <div data-role="header" style="background-color:#004255;height:50px;border-top-width: 0px;">

            <a  data-iconpos="left"  id = "backbutton" style="background-color:#004255;color:white;text-shadow: 0px 0px #ff0000;border:0px;padding:0px;padding-top:5px;" onclick = "" ><img  src= "icons/bel_icon.ico" style = "height:32px;height:32px;"/></a>
            <h1 style = "color:white;font-size:20px;text-shadow: 0px 0px #ff0000;">HTRIMS</h1>

            </div>



        <form>
            <div class="container" id="login">
                <div class="row">
                    <div class="content">
                        <div class="section" style="margin-top: 70px;background-color:white;">
                                <center>

                                    <input name="username" placeholder="USER NAME" class="form-control" id="username" style = "width:100%;font-size:17px;text-align:center;background-color:#E9DBD6;text-shadow: 0px 0px #ff0000;" onClick="check();" />

                                <br><br>

                                    <input type="password"
                                        name="password" placeholder="PASSWORD" class="form-control"
                                        id="password" style = "width:100%;font-size:17px;text-align:center;background-color:#E9DBD6;text-shadow: 0px 0px #ff0000;" />

                                </center>
                                <br><br><br>
                                <center><span  value="LOGIN" name="Login" onclick="test()" class="btn btn-primary" style = "text-align:center;width:100%;height:40px;text-shadow: 0px 0px #ff0000;font-size:15px;box-shadow: 5px 5px 5px #888888;background-color:#00ADEE;color:white;" />LOGIN</center>

                                <br>

                                    <br><center><span
                                    style="color: red;" id = "loginFailed"></span></center>
                                    <br><center><span
                                    style="color: red;" id = "loginFailed1"></span></center>
                                    <div id="error" class="error"></div>
                                    </div></div>
                        </div>
                    </div>
        </form>
    </div>









    <div id="AnimationDiv">

        <center>
     <img src="Bharat_Electronics_logo.png"  style="width:304px;height:200px;margin-top:200px;">
    </center>

    </div>

    <!--<script type="text/javascript" src="loginscript.js"></script>-->
    </body>
    </html>

Answer 1

将此行放在您的主要活动

中

appView.addJavascriptInterface(this, "MainActivity");

在主要活动中制作方法

private void finishact() {
        finish();
    }

in html

将以下代码放在index.html

中

function onDeviceReady(){
    document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown(){
window.MainActivity.finishact();
}

Answer 2

试试这个..

document.addEventListener("backbutton", function(e){
if($.mobile.activePage.is('#homepage')){
    /* 
     Event preventDefault/stopPropagation not required as adding backbutton
      listener itself override the default behaviour. Refer below PhoneGap link.
    */
    //e.preventDefault();
    navigator.app.exitApp();
}
else {
    navigator.app.backHistory()
}
}, false);

这是链接

http://docs.phonegap.com/en/2.0.0/cordova_events_events.md.html#backbutton

如何使用phonegap在index.html上按回按钮时让Android应用程序退出

2 个答案: