I am developing an app using phonegap-1.3.0 and android-4.0.3.Below is my code :
function home() {
document.removeEventListener("backbutton", handleBackButton, false);
document.addEventListener("backbutton", handleBackButtonOnHome, false);
}
function edit() {
document.removeEventListener("backbutton", handleBackButtonOnHome, false); document.addEventListener("backbutton", handleBackButton, false);
}
function handleBackButton() {
console.log("Back Button Pressed!");
home();
}
function handleBackButtonOnHome() {
console.log("Back Button Pressed in home!");
navigator.app.exitApp();
}
On click of hardware back button on edit page takes the user to the home page and when on home page the app exits as specified by the event handlers. The app is working fine on the specified setup (configuration).
Recently I upgraded to cordova-2.1.0, on click of back button on edit page exits the app instead of taking the user to the home page.
Please note : I have tried my thing but nothing seems to work,
navigator.app.backHistory()
history.back()
Any help welcome..
When looking for a solution to this problem in my environment (Sencha Touch 2 inside PhoneGap, see Andreas Sommer's instructions here) I fixed by adding the following code to my index.html HEAD secion:
<!-- handle android hardware back button -->
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", function() {
document.addEventListener("backbutton", function() {
if (Ext.getCmp('mainview').pop(1) == null) {
Ext.Msg.confirm("Exit", "Do you want to Exit?", function(e) {
if (e == 'yes') {
navigator.app.exitApp();
}
});
}
else {
return false;
}
}, false);
}, false);
</script>
FYI, the "mainview" component is an Ext.navigation.View where I'm popping off the current view from the stack. If pop() returns null then we are at the home view.
This worked fine for Gingerbread and ICS but did not work with Jelly Bean. To get it to work with Jelly Bean I needed to remove the android:targetSdkVersion="17" attribute from the tag in the AndroidManifest.xml file under PhoneGap.
All of this only worked with PhoneGap. When I generate the .apk under Sencha Touch instead of PhoneGap then the hardware back button didn't get captured.
Thanks for having a look into the problem.
I resolved the issue by adding the below line
document.addEventListener("backButton", backPressed, false);
in onDeviceReady() function. And used a flag variable to navigate between pages like this,
function backPressed() {
alert('backPressed');
if(gAppControl.pageFlag == true)
home();
else
navigator.app.exitApp();
}
Regards,
Nanashi
Related
I have a webview from my website working very well in my app. What I'm trying to do now is asking users when they hit Android Back Button if they really want to leave the app.
I'm using the InAppBrowser plugin. Here's my code.
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
function onDeviceReady() {
navigator.splashscreen.show();
var ref = window.open("http://m.estadao.com.br", "_self", "location=no");
ref.addEventListener('loadstop', function(){
ref.executeScript({
code:
document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown() {
navigator.notification.confirm(
"Tem certeza que deseja sair?",
function(buttonIndex){
confirmExit(buttonIndex);
},
"Aviso",
"Ok, Cancel"
);
}
function confirmExit(stat){
if (stat == "1"){
navigator.app.exitApp();
} else {
window.open("http://m.estadao.com.br", "_self", "location=no", "zoom=no");
}
};
});
});
}
And here is the link of plugin
http://cordova.apache.org/docs/en/2.7.0/cordova_inappbrowser_inappbrowser.md.html#executeScript
Any idea what can i do to make it work ? Thanks!
I am assuming that your problem is back-button event is not getting triggered once the webview loads. This is a common problem with using in-appbrowser plugin for webview. It loads page but we loose control over the page. Use the following plugin
https://github.com/Wizcorp/phonegap-plugin-wizViewManager/ for webView. It creates a custom webview inside your phonegap app and you still have control over back button and you can also define the size of the webView
I am having problem with Android's back button in my phonegap application.
Each time i press back it closes the whole application. Below is the codes that I have written. I refered to Phonegap API documentation for 2.2.0 here : http://docs.phonegap.com/en/2.2.0/cordova_events_events.md.html#backbutton
In the JS file:
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady()
{
document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown() {
alert("back button");
}
HTML File:
<body onload="onLoad()">
All of the other functions are working except for the android physical back button. When I press back, it does not prompt me with an alert of "back button" but it just exits the whole application.
What am I doing wrong or did I miss something out?
Thank you.
Regards,
Amanda
Are you certain that the onDeciveryReady() is invoked? Try adding a console.log(""); and check in logcat that you actually get to the onDeviceReady.
I had no problem overriding the back button with your example.
Make sure your javascript file import is correct and that you are using the cordova.js file for Android and not some other platform.
As a side note, overriding certain buttons, like the Back button may be confusing for the user, if you plan to add some sort of "Exit Confirm?" dialog that should be fine but making it to something completely different than what is usually does is not recommended.
Do this.
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady()
{
document.addEventListener("backbutton", function(ev){
ev.preventDefault();
ev.stopPropagation(); // ev is event
}, false);
}
In my app i am using phonegap 2.6.For back button, I am using the following function
document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown() {
alert("hello");
navigator.app.backHistory();
}
document.addEventListener('deviceready', onDeviceReady, true);
The above function works fine when I click on the device's hardware back button. But when I click on the back button it is not working.
I have designed my back button as below:
<a class="ui-link" href="#" rel="external" onclick="onBackKeyDown()">
<img src="images/icon-back.png" alt="Phone" border="0">
</a>
But this button is working fine for this navigator.app.exitApp(); (application exit).
//Working Fine
function onBackKeyDown() {
navigator.app.exitApp();
}
//Not Working
function onBackKeyDown() {
navigator.app.backHistory();
}
but not working for navigator.app.backHistory();.
I have tried 3 separate things when I faced the same situation:
window.history.back()
navigator.app.backHistory();
History.go(-1);
Individually, none of these solve the problem. I put all 3 things together and much to my surprise it worked. I really don't know what is behind it.
Then I decreased to two functions and removed:
window.history.back()
Now I am using this function and it is working fine.
//Works Fine
function onBackKeyDown() {
history.go(-1);
navigator.app.backHistory();
}
If you use the attribute data-rel="back" on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default href.
it depends where you are:
on my windowsphone 8.1 lumia 925, it works history.go(-1);,
while navigator.app.backHistory(); causes an exception before crashing.
On my Android (I believe the majority), navigator.app.backHistory(); works properly.
This might help some people, as it helped me fix the history.go(-1) not working in google chrome browser.
// Doesn't work in Chrome browser
function onBackKeyDown() {
history.go(-1);
navigator.app.backHistory();
}
// Does work in Chrome browser
function onBackKeyDown() {
history.go(-1);
return false; //needed in chrome to prevent about:blank page.
navigator.app.backHistory();
return false; //needed in chrome to prevent about:blank page.
}
Im no expert at all in jQuery, but thought it might help someone, as I was looking for this answer but couldn't find it at first.
Solved! Stop getting "TypeError: navigator.app is undefined"
A function I created that will first check what device you're on and then apply the relevant script:
function onBackKeyDown() {
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i) || userAgent.match(/iPod/i)) {
// IOS DEVICE
history.go(-1);
} else if (userAgent.match(/Android/i)) {
// ANDROID DEVICE
navigator.app.backHistory();
} else {
// EVERY OTHER DEVICE
history.go(-1);
}
}
Call function by adding this to your back link/button:
onclick="onBackKeyDown()"
I am trying to use the back button in android to go to the main page every time the user press the back button and when the user is not logged in, the application should exit. I have tried this coded but it only works in index page and in the other pages, back button acts as it has been disabled. i am using phonegap for this application.
$(document).ready(function(){
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
}
}
I kept the following function on .js file.
function onBackKeyDown() {
alert('Back Button!');
if (window.localStorage.getItem("loggedInData") == "undefined"
&& window.localStorage.getItem("loggedInData") == "") {
//location.href = 'main.html';
alert('LoggedIn');
} else {
alert('not logged in');
navigator.app.exitApp();
}
}
In my brief experience with Phonegap to get this to work i had to call the onDeviceReady before document.ready (i know this doesnt make sense but it worked for me on a small project).
Also if i am assigning different functions to the back button based on a page, i like to clear them first before rebinding them each time by chaining off().on() as below:
$(document).off("deviceready").on("deviceready", PhoneGapReady);
function PhoneGapReady(e) {
$(document).off("backbutton").on("backbutton", backHandler);
}
function backHandler(e) {
//back button pressed do something if you like
}
Also in the if statement for localstorage, should that be 'or' instead of 'and'?
To make the back button work for every pages of your app add the following code to every html pages.
$(document).ready(function() {
$(document).on("deviceready", PhoneGapReady);
function PhoneGapReady(e) {
document.addEventListener("backbutton", onBackKeyDown, false);
}
}
function onBackKeyDown(){
//your codes for back button
}
and add
<script>type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"</script>
to the every page...
As i am using cordova-2.0.0,i have used that.
Could someone please tell me how to disable Android's back button (That is the back-button found on all Android phones).
I am using Jquery mobile with PhoneGap. I find this online in the Cordova documentation, but this does not work for me. Back button event is not even registering.
function onLoad() {
console.log("**** INSIDE ONLOAD FUNCTION *****");
document.addEventListener("backbutton", onBackKeyDown, false);
}
// Handle the back button
function onBackKeyDown() {
// Pressing the back button does not print this message.
console.log("**************** INSIDE BACK BUTTON *************");
}
I used backKeyDown and it works for me :
function onDeviceReady() {
document.addEventListener("backbutton", backKeyDown, true);
console.log("PhoneGap is ready");
}
function backKeyDown(d) {
navigator.app.exitApp(); // To exit the app!
e.preventDefault(); // to disable the back
}
make sure that PhoneGap is ready!
Update: You can leave the handler empty to disable it
sometimes you can get blocking Back button, sometimes not.
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", function (e) {
e.preventDefault();
}, false );
}