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.
Related
Does Phonegap 3 includes a method "onExit" or "onDestroy" ? I would like to perform some actions before the app closes.
Basically, I want to kill an admob.
Well, after some exploration seems like phonegap api have no such event as onDestroy. This functionality could be implementat in some states for android, course a bit creepy, but in iOS this is not avalible anyway.
Android logic:
if user presses the home button app fires pause event, but application is not closed, so window.onunload will take no reaction. From this point phonegap app's webView doesn't recieve any event. But if user presses back button on first page or application was closed programmatically window.onunload must fire. I think there is a way to realise some kind of native callback by creating a java background process.
iOS logic:
In iOS, application can't close itself by some kind of apple sequrity statements. So app never closes untill user do this by double pressing the home button and killing the app. By some reasons apple dosen't allow apps do anything in background, excluding push notification recievement. So app can detect only it's transfer from foreground to background
I think all you have is onpause/onresume
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();
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.
I've built a mobile website - a web site optimized for handheld units. If you are using an iPhone you launch Safari and go to the site URL to use this web app. It can also be run as an iPhone web app by adding it to your home screen. So it's not a native iPhone app - it's a mobile web page.
If you choose to run this mobile web page as an iPhone web app (by adding it to your home screen) you are not in the normal Safari interface. If the user clicks a link to an external site, you leave the web app and the link is opened in Safari. If you on the other hand use JavaScript to change the location, the link is opened in the web app - not in Safari.
Now I'm looking for a way to open a link in Safari from an iPhone web app using JavaScript. I've tried window.location.href but since it's JavaScript you stay in the web app.
Thanks in advance!
I'm also struggling with this. I have defaulted to using basic HTML when opening an external link, instead of Javascript – this appears to force it to open in another browser. I simply write a div with the link inside it, either using Javascript or static in the .html file.
An example of my implementation, check the "about" pages for offsite links written in HTML: http://4drillsbrewery.com/tools
(Please don't judge the code, it was all just a toy written to get used to Dashcode, not as a programming project! thanks). I'll be following this thread, hoping someone has a better way.
I appreciate this isn't going to help in all scenarios BUT PROVIDED the javascript code originates from a user generated click of a hyperlink there is this solution...
$("a.someHyperLink").click(function () {
var url = doJavascriptStuffToGenerateTheDynamicUrl();
$(this).prop("href", url);
return true; // return true so the click propagates and the new href is followed
});
You could extend this further so that it works both when the site is being browsed in Safari normally and as a standalone app.
$("a.someHyperLink").click(function () {
var url = doJavascriptStuffToGenerateTheDynamicUrl();
if (window.navigator.standalone) {
// We are within the context of an iPhone standalone/fullscreen/homescreen app
// Change the href and return true so that we leave the standalone app and the URL is opened in a new window in Safari
$(this).prop("href", url);
return true;
} else {
// Website is open in a browser normally
// Open the URl in a new browser window
window.open(url);
return false; // Return false so the href isn't followed
}
});
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.