I am developing a HTML5 web-application and compiling it with Cordova (phonegap) 1.7.
I want to override the Android backbutton so that I can call window.history.back() instead of closing the application (default Android). How can I prevent Android from killing the defaultactivity on back button pressed?
I get the "Back button pressed!!!!" in logcat, so the method is fired before the application is closed.
This is what I have so far:
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
document.addEventListener("backbutton", function(e) {
console.log("Back button pressed!!!!");
window.history.back();
}, false);
}
EDIT: I am willing to accept an answer explaining a way to simulate the window.history.back() directly from the DefaultActivity.java android class if that is possible!
I solved my own question by adding the code below to the DefaultActivity.java file to prevent the default android behavior, and keeping the JavaScript code as stated in the question:
#Override
public void onBackPressed() {
return;
}
I hope this helps someone in the future with the same problem!
I took this approach. I hooked the backbutton event as you have shown. I look to see if this is the first page or not and then ask the user if they want to exit the program or not. This depends on what you want your program to do depending on its state. I did not add the override as you have shown; I didnot seem to need it.
if ($.mobile.activePage.attr('id') === 'firstpage') {
// Prompt to confirm the exit
} else {
window.history.back();
}
If they want to exit you can call:
navigator.app.exitApp();
to close your program.
I imagine you still want to allow the user to exit your app. I don't tend to use apps that
do not allow an exit of some kind.
Hope this helps you out.
Never had to do that but, have you tried to return true ?
Like in the Java SDK, if you return True, the system will assume you have correctly catched the event and will no longer pass it to other event listeners.
Related
I want to disable the android back button click in my web app which I built using html5, javascript and jquery mobile.
On clicking the android back button, it minimizes my web app. Web app goes to the background. How can i prevent this ? I tried so many ways like,
document.addEventListener('backbutton', function(){});
data- backbtn = false etc... but still no luck..
If it was a native android application , it is easy. But how to do this is in a web app.
Appreciate any kind of help.
Are you working in Phonegap?
//Deviceready function
document.addEventListener('deviceready', function() {
document.addEventListener("backbutton", goBack, false);
}, false);
//Function for back button function
function goBack(){
}
put the following code inside your Main Activity .java class
#Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) {
return true;
}
return super.onKeyDown(keyCode, event);
}
If i understand you right a web app is basically opening a web page in a browser on your phone.You cannot disable the back key from a web app.
It is built into the phone to put applications(in this case the browser) into the background when the back key is pressed.
If you wish to use native features while writing your code in html/css/javascript, then checkout a wrapper like Phonegap. It easily packages your web app into a native app.
Hi I am new for developing iOS apps How to set setup native back button using javascript.
document.addEventListener("backbutton", yourCallbackFunction, false);
When you override backbutton, you also prevent its original behavior. So user can't close app with it. You must use
document.removeEventListener("backbutton", yourCallbackFunction, false);
To bring original behavior back.
Your question is not so clear. But i assume you need a native type back button in your application.
Try exploring this plugin,
If you are new to cordova(previously phonegap) IOS, look for how to use native plugins with phonegap.
Note that Different plugins may require different configurations(way of using them), In most cases you will find the steps on the plugin page.
Also using plugins will be version dependent. So make sure you are using the plugin which is compatible with your cordova version
You can also get the back button functionality using javascript as commented out in other answer.
Just make sure you over-ride the function after device ready.
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown(){
console.log("put your code for back button here");
}
Try this
window.history.back();
When I navigate to a second page and try to go back using the default back button that every android device has, it seems as though the first time I tap it, nothing happens. I have to tap it a second time. Anyone have any idea why this happens?
I'm not sure what more information I need to provide. If you need more info please request specifically what you need and I will try to edit the question.
Edit: my main activity extends DroidGap and only has the one method
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
I think I'm narrowing down on the problem. On the second page, there are a list of anchor tags that perform a css animation when clicked.
This jsfiddle isn't doing the animation for whatever reason but here is the relevant markup, css and javascript
http://jsfiddle.net/7fdQu/
I am not sure what is going on in background but there is a definite for it ....
you can program the back button in Android there is a code for it. The phonegap fires a event "backbutton" in Android.
document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown() {
window.location.href = 'URL';
}
Ref:
Should I use window.navigate or document.location in JavaScript?
http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html#backbutton
I have an iPhone webapp that uses a cache manifest to work offline and add the webapp to my Home screen. What I would like to find is a way to detect that the app is exiting so I can do some housekeeping and save some data.
If I am running as a web page in Safari, window.onunload does this for me, but this event does not happen when running from the Home screen.
I tested the pagehide event using the below code and found that it works well for detecting whether the user navigated to another link or simply opened a new tab when you are in safari.
However, if you are in a web app saved to your homescreen (like you describe) then the pagehide event is useless for telling if the web app was closed.
Depending on what you need specifically, you can work around this limitation by saving data to localStorage and then checking the localStorage when the app opens again. Then you can perform any extra work that may need to be done before the app fully starts again.
function myLoadHandler(evt)
{
if (evt.persisted) {
alert('user returns to page from another tab');
return;
}
alert('loading new page');
}
function myUnloadHandler(evt)
{
if (evt.persisted) {
alert('user goes to new tab');
return;
}
alert('user truly leaves the page');
}
if ("onpagehide" in window) {
window.addEventListener("pageshow", myLoadHandler, false);
window.addEventListener("pagehide", myUnloadHandler, false);
} else {
window.addEventListener("load", myLoadHandler, false);
window.addEventListener("unload", myUnloadHandler, false);
}
I have an answer. It's not what we were hoping for.
The technical definition of unload from http://www.w3.org/TR/DOM-Level-2-Events/events.html is:
The unload event occurs when the DOM
implementation removes a document from
a window or frame. This event is valid
for BODY and FRAMESET elements.
I also got a reply from some in the know at Apple: "Unfortunately, I haven't been able to find an event that fires when the Home button is clicked! I think the most appropriate event for this might be the pagehide event. This event actually does fire in Safari on iOS when you switch to the "tabs" view to open a new page, but not when you click the home screen icon :-("
In iOS3 or multitasking unsupported devices/app, you can do the housekeeping in applicationDidTerminate method.
In iOS4 and multitasking supported devices/app, you can do the housekeeping in applicationDidEnterBackground method. It's best to implement the applicationDidTerminate method as well just in case iOS decide to remove your app from memory, applicationDidTerminate will be called in your app.
Cheers.
Is there a way by which we can capture the click of HOME and BACK button in the html file in android application using phonegap/jqtouch/javascript?
I have an application for Android using phonegap. I want to capture the click of native HOME and BACK button of the Android phone in the html page to exit / go back gracefully.
You can catch the BACK button event in PhoneGap, however not the HOME button (this is a bad Android practice as there is a clear user expectation regardless of the app you're using about what the HOME key does: sends you back to your home screen! You don't want to override this functionality).
I will direct you to pieces of code in PhoneGap (LATEST source! pull from github for latest version of the phonegap framework) for guidance.
First, there is a 'BrowserKey' java object bound to the 'BackButton' JavaScript global:
http://github.com/phonegap/phonegap-android/blob/master/framework/src/com/phonegap/DroidGap.java#L291
The definition of this class is here: http://github.com/phonegap/phonegap-android/blob/master/framework/src/com/phonegap/BrowserKey.java
First thing you need to do in your application (I suggest you run this during application initialization) is to let the native side of the framework know you are overriding BACK button functionality. You would do this in JavaScript with a simple call:
BackButton.override();
From there on out, you can attach an event handler to the document's 'backKeyDown' event to execute logic every time the BACK button is hit. Something like this should work:
document.addEventListener('backKeyDown', function(e) {
alert('you hit the back key!');
}, false);
As an addendum, here is the JavaScript code that wraps the back button event dispatching: http://github.com/phonegap/phonegap-android/blob/master/framework/assets/js/keyevent.js
Basically, after calling BackButton.override(), the native side of the framework will call window.keyEvent.backTrigger() every time the BACK button is hit.
This code sample works for PhoneGap 0.9.5 and later (tested on 0.9.6) :
document.addEventListener("menubutton", function () {
alert('Menu button');
}, false);
document.addEventListener("searchbutton", function () {
alert('Search button');
}, false);
document.addEventListener("backbutton", function () {
alert('Back button');
}, false);
Home button can't be handled. That's reserved by the system.
I have an application for Android using phonegap. I want to capture the click of native HOME and BACK button of the Android phone in the html page to exit/go back gracefully.