Develop Reference

Angular 7 Cordova 8 backbutton override not working

I'm developing an app with Angular 7 and Cordova 8. I want to override the cordova back button event, to prevent the app from closing by adding an event listener as described in the cordova docs
My code looks like this:
let onDeviceReady = () => {
enter code hereconsole.log("Bootstraping Module...")
document.addEventListener("backbutton", (e) => {e.preventDefault(); e.stopPropagation(); console.log("backbutton"); return false;}, false);
platformBrowserDynamic().bootstrapModule(AppModule);
};
document.addEventListener('deviceready', onDeviceReady, false);
According to the docs this should prevent the app from closing. I know that the preventDefault, stopPropagation and return false calls are not necessary, but I found the as possible solutions to my problem, which all didn't work.
When I press the back button, I see the backbutton print, however, the app is still closing.
Tested on Android.
Update: After debugging the issue using logcat I could see the message WARNING: Back Button Default Behavior will be overridden. The backbutton event will be fired! which is logged in the CoreAndroid plugin class when the back button is overriden in the native Android app. Still when I press the button, the app exits
Update: The issue was related to OnsenUI, see my answer below

We handed the backbutton logic in app.component.ts ngOnInit
import {Renderer2} from '#angular/core';
constructor(private renderer: Renderer2){}
ngOnInit(){
const devicebackbutton = this.renderer.listen('document', 'backbutton', e => {
e.preventDefault();
e.stopPropagation();
return false;
});
}

I managed to solve the issue. It wasn't caused by Cordova or Angular, but by OnsenUI, which I used for input components.
By default it overwrites all cordova handlers for the backbutton, as it provides its own functionality. You can read more here

Cordova not firing OnResume function iOS

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.

Cordova - Trying to execute a function inside a webview

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

How to disable android back button handler in ONSEN-UI Phonegap?

I am developing a phonegap application in ONSEN-UI, in which I want to disable the android back button handler. I've tried Phonegap's backbutton hadler code to disable it. But I am unable to do it. Is there any other way to do it?
My Code:
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", function (e) {
e.preventDefault();
}, false);
}

This works for me in onsen2...I have it in my app.js
ons.ready(function () {
ons.disableDeviceBackButtonHandler();
document.addEventListener('backbutton', function () {}, false);
});

This is explained in Onsen UI docs: http://onsen.io/reference/ons.html#methods-summary
Just use the method ons.disableDeviceBackButtonHandler() and it will be disabled. You can use ons.enableDeviceBackButtonHandler() to enable it again.

Try to leave the function empty. This works perfect for me.
document.addEventListener("backbutton", androidBackKey, false);
var androidBackKey = function(){
//stay empty
};

Try this:
function onLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
function onDeviceReady()
{
document.addEventListener("backbutton",noth,false);
}
function noth()
{
}

Use this if you're using a navigator:
myNavigator.getDeviceBackButtonHandler().setListener( stopButton );
function stopButton(e) {
try{
myNavigator.popPage();
}
catch (err){
// event.callParentHandler();
console.log( "Stopping...." + e);
}
}
It's another listener handled by ONSEN-UI itself that quit the app. So add a listener attached to document will not stop the app from exiting. To understand it's flow, you may check out onsenui_all.js to check out the source code.

If someone useing onsenUI with VueJS
put this code in app's created or mounted method.
this.$ons.ready(() => {
this.$ons.disableDeviceBackButtonHandler();
document.addEventListener("backbutton", e => {
e.preventDefault();
e.stopPropagation();
}, false);
});

If you've been looking for what I'm looking for, that is disable Android back button exiting the app altogether back to launcher, but preserve back button functionality across the app (to back out to main menu or close a dialog for example), you may do it using that method:
ons.setDefaultDeviceBackButtonListener(function(event) {});
This method overrides default action (which would be normally executed if there's nothing other action to execute), which is normally to close the app in case of Cordova.
Source and more examples: https://onsen.io/v2/guide/cordova.html#device-back-button (there's example there that can show confirmation dialog and exit the app if user says yes)

Enable back button when return from facebook.com, phonegap android

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);
//...
}
}