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();
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.
I have a webpage that "plays a video" using sprite sheets. The page is mobile-optimized, so it can get loaded into Android and iOS WebViews. I'd like to know is when the page is visible so only after that I can play the video. I don't want users to catch the video mid-stream because the WebView lags in presenting itself.
I can see some developers might wait until the whole page has finished pulling in all the assets from the page before making it visible to the user. So, I don't want the "video" to start before that time. I can't rely on window.onload because that event fires even when the WebView isn't onscreen or visible.
How can I accomplish this from the client side, with some JavaScript, preferably?
[Edit] To be clear, I'm implying that I don't have any control over the native WebView. You can load web pages into a WebView that isn't onscreen and push the view or add it to the on-screen layout at a later time. My issue is that when my webpage's URL is loaded into a WebView, I can't tell when the WebView comes onscreen.
Take a look at the Safari Web Content Guide. Scroll down to the Supported Events table. I am thinking (or hoping) that the pageshow event will do what you are hoping for. There is also the focus event.
Looks like using these events for mobile Safari would be as easy as
<body onpageshow="onPageShow();">
I am less familiar with Android, but I will look into it real quick.
EDIT: The onpageshow solution should work the same way in Android 2.2 and above as it does in iOS 4.0 and above. As for whether it works the way you need it to, I am not entirely sure. Let me know!
It is not possible to control the webview using JavaScript. If its not too late to change the design of the app, using native APIs will give you more control of the webview.
You could insert a timeout in the webpage before loading the video. It might be worth a shot.
you can use phonegap library:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
// Now safe to use the PhoneGap API
}
phonegap is very good for handle events and more action in webview.
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 have a question regarding jQuery mousemove() on iPhone. The problem is that it doesn't show the movement on iPhone when touches occur; the events are not working properly in Safari on iPhone.
Can I get any tips of any Javascript plugins to fix this or detect movement on iPhone?
You can use jQuery mobile and use the virtual events created by that plugin (vmousemove for example). More info on the events here.
However this framework is NOT compatible with every jQuery plug-in (for example some of jQuery-UI widgets are integrated in it, but in a different way). It probably works for plugin that are not event driven (i.e. that don't change the way the user interract).
An other choice is jQTouch but I don't know much about it.
You should use the touchmove event. Example of usage:
$('#selector').bind('touchmove', function(event)
{
// your code...
});
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.