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
Related
I am a new Cordova web Developer , I 'm creating an application that load automatically a web site using inapbrowser ,my probleme is : after loading the site when i click on the backbutton , instead of closing the application , it goes back to the blank page that contains the inapp browser , how to do to quit the application when i press the back button ??
You can probably register a backbutton event on InAppBroswer page load and exit the app on click of back button. The sample code is as follows:
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
//inapp is a sample button's id available in HTML
$('#inapp').click( function()
{
try {
ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener("exit", onBackButton, false);
}
catch(err) {
alert("Plugin Error - " + err.message);
}
});
function onBackButton(e) {
alert("back button pressed");
navigator.app.exitApp();
}
}
The key to your question lies in the addEventlistener section of the Official InAppBrowser Plugin Page.
I'm building an app using cordova, which is just an webview from my website.
I just want to refresh my website when the user resume the app.
I followed the documentation from phonegap, which says I need to wrap my resume event in a SetTimeOut function: http://docs.phonegap.com/en/2.2.0/cordova_events_events.md.html#resume
Here is my code:
document.addEventListener("deviceready", onDeviceReady, false);
document.addEventListener("resume", onResume, false);
function onDeviceReady() {
var ref = window.open("http://m.estadao.com.br/?load-all=true", "_self", "location=no", "closebuttoncaption=Return", "EnableViewPortScale=no");
}
function onResume() {
setTimeout(function() {
onDeviceReady();
}, 0);
}
I do know why, but it's working properly in Android, but iOS seems to do not regonize this "resume"
Any idea ?
I solved it just changing "_self" to "_blank".
When we use "_self", the Javascript loose the context of window.
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);
}
I am developing a phonegap android app, where I have initially disabled the back button of device using this, its working
document.addEventListener("backbutton", onBackKey, false);
function onBackKey(){
}
But, when I click on a button in my app to goto facebook login page, I want the back button to be enabled. I tried to remove event listener but it didn't work
funtion f_click(url, width, height){
document.removeEventListener("backbutton", onBackKey, false);
//some link to start facebook
}
I also used
document.removeEventListener("backbutton", function(e) { e.preventDefault(); }, false);
But I am getting this error every time, cordova is not defined. Why?
Don't forget to call the "deviceready" event.
From phonegap doc :
This is a very important event that every Cordova application should
use.
Cordova consists of two code bases: native and JavaScript. While the
native code is loading, a custom loading image is displayed. However,
JavaScript is only loaded once the DOM loads. This means your web
application could, potentially, call a Cordova JavaScript function
before it is loaded.
The Cordova deviceready event fires once Cordova has fully loaded.
After the device has fired, you can safely make calls to Cordova
function.
Try something like this :
var deviceReady = false;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady()
{
deviceReady = true;
}
function f_click(url, width, height)
{
if(deviceReady)
{
document.removeEventListener("backbutton", onBackKey, false);
//...
}
}
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