Show confirmation box on exit(hardware button) in phonegap app
Question
I am working on a iframe android app on phonegap. I use phonegap build to compile my code online. For a day,I am searching for a code that pop out confirmation box that shows "do you want to exit?" yes|no ?? I comeout with these code.But it is not working.Can you help out? do we have to add any plugin in config.xml?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Layout</title>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false); //Listen to the User clicking on the back button
}
function onBackKeyDown(e) {
e.preventDefault();
navigator.notification.confirm("Are you sure you want to exit ?", onConfirm, "Confirmation", "Yes,No");
// Prompt the user with the choice
}
function onConfirm(button) {
if(button==2){//If User selected No, then we just do nothing
return;
}else{
navigator.app.exitApp();// Otherwise we quit the app.
}
}
</script>
<style type="text/css">
body, html
{
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#content
{
position:absolute; left: 0; right: 0; bottom: 0; top: 0px;
}
</style>
</head>
<body>
<div id="content">
<iframe width="100%" height="100%" frameborder="0" src="#" />
</div>
</body>
</html>
3 answers
solution1
0 2016-12-10 15:17:08
For Apache Cordova / Phonegap you don't need any plug-in for the native events (like deviceready or backbutton ) but you need the cordova-plugin-dialogs plug-in to show the native alerts.
So, I'm guessing that your problem is not to catch the event, but to show the alert.
Please, try just ti print a classic window.alert() , to verify if the event is catch, after that you can try with the dialog plug-in.
solution2
0 2016-12-12 07:00:38
I think two changes are there in your code
first, if you haven't added cordova.js then please add it to your header section of file
second, before calling backbutton event you need to give some time to complete loading of the page otherwise it will not understand the back button click event
So here I just added timeout to your function
function onDeviceReady() {
setTimeout(function(){
document.addEventListener("backbutton", onBackKeyDown, false); //Listen to the User clicking on the back button
},500);
}
Here is my working code too.
$(document).ready(function(){
setTimeout(function(){
document.addEventListener('backbutton', function(e){
if (confirm("Are you sure you want to exit app?"))
{
navigator.app.exitApp();
}
}, false);
}, 500);
}
solution3
0 2016-12-12 10:33:38
here is my working code on pressing backbutton it will ask for exit
document.addEventListener("backbutton", function (e) {
e.preventDefault();
navigator.notification.confirm("Are you sure want to exit from App?", onConfirmExit, "Confirmation", "Yes,No");
}, false);
function onConfirmExit(button) {
if (button == 2) { //If User select a No, then return back;
return;
} else {
navigator.app.exitApp(); // If user select a Yes, quit from the app.
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.