I'm developing phonegap/cordova apps with ember. To use the backbutton functionality from android, it's important to send the "backbutton" event to my ember-App. How do I send an event to an ember application?
I found this ember-specific mixin very useful. Give it a try, Ember bindings for using phonegap events.
I had faced this problem recently. I attached the backbutton eventlistener on 'didInsertElement' event in my Ember View.
App.IndexView = Ember.View.extend({
_eventonInsert : function () {
document.addEventListener('deviceready', function(e) {
document.addEventListener('backbutton', function(e) {
//Your logic related to back button
});
});
}.on('didInsertElement')
});
Related
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
I am having some trouble with a mobile menu. At first i had my code written like this which worked fine on desktop
$('#nav-icon3').click(function(){
$(this).toggleClass('open');
});
$('.menu-item').click(function(){
$('#nav-icon3').toggleClass('open');
});
after uploading and checking on my mobile device via android chrome the click function was not working, so i tried using the touchstart.
$('#nav-icon3').on('touchstart', function(){
$(this).toggleClass('open');
});
$('.menu-item').on('click touchstart', function(){
$('#nav-icon3').toggleClass('open');
});
when touching the menu-item element, the toggle fires twice. Anyway I can prevent this from happening and let it only fire once?
I think what is going on based on your question is that your event is propagating. What you can do is the stop the event from propagating by doing something like this.
$('.menu-item').on('click touchstart', function(e) {
e.stopPropagation();
$('#nav-icon3').toggleClass('open');
});
More reference here:
https://api.jquery.com/event.stoppropagation/
Using e.preventDefault(); worked for me when I had the same issue as you.
$('#nav-icon3').on('touchstart', function(e){
e.preventDefault();
$(this).toggleClass('open');
});
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)
I have a sencha app and launch in Android with phonegap. In my controller config.js I do window.open() when the user push a button and I add the Event Listener for 'loadstop' but I don't receive the event never.
onDeviceReady: function(){
var manual = window.open('resources/manual/manual.html', '_blank', 'location=no');
manual.addEventListener('loadstop', function() { alert('start'); });
},
goToManual: function () {
document.addEventListener("deviceready", this.onDeviceReady, false);
}
thanks for the help and sorry for my English
I guess that you are using the default JS method window.open. Since sencha mixes up things
in that case, I don't think you can add listeners or make changes if you are working on a mobile device.
So use this instead to make sure your call uses Cordova plugin:
var manual = null;
Cordova.exec(manual = window.open('resources/manual/manual.html', '_blank', 'location=no'));
The app crashes for me a few seconds after opening the page though.
I would like to disable or override the Android Back button while I am navigating pages on the InAppBrowser. Can I add an event listener that can handle that?
EDIT:
Looking at the answer by #T_D below the solutions provided are the closest I could get to. It does not seem to be possible to override the button in InAppBrowser as all the PhoneGap tweaks stop working while navigating pages on this plugin. I was not able to find any other solution rather than modifying the API library. If there are any PhoneGap guys here and know something more, I 'll be glad to get some comment. Thanks.
The closest I got:
var ref = window.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener("backbutton", function () { })
According to the documentation the behaviour of the hardware back button can be configured now for the InAppBrowser:
hardwareback: set to yes to use the hardware back button to navigate backwards through the InAppBrowser's history. If there is no previous page, the InAppBrowser will close. The default value is yes, so you must set it to no if you want the back button to simply close the InAppBrowser.
Thanks to Kris Erickson.
So just update your InAppBrowser plugin if the backward navigation is the desired behaviour.
For more details see: https://github.com/apache/cordova-plugin-inappbrowser/pull/86
You can do it quite easily now (as of InAppBrowser version 0.3.3), but you will have to edit the Java files. Go to src/com/org/apache/corodova/inappbrowser directory and edit the InAppBrowserDialog.java:
Change
public void onBackPressed () {
if (this.inAppBrowser == null) {
this.dismiss();
} else {
// better to go through the in inAppBrowser
// because it does a clean up
this.inAppBrowser.closeDialog();
}
}
to
public void onBackPressed () {
if (this.inAppBrowser == null) {
this.dismiss();
} else {
if (this.inAppBrowser.canGoBack()) {
this.inAppBrowser.goBack();
} else {
this.inAppBrowser.closeDialog();
}
}
}
Then go to InAppBrowser and find the goBack function, change:
/**
* Checks to see if it is possible to go back one page in history, then does so.
*/
private void goBack() {
if (this.inAppWebView.canGoBack()) {
this.inAppWebView.goBack();
}
}
to
/**
* Checks to see if it is possible to go back one page in history, then does so.
*/
public void goBack() {
if (this.inAppWebView.canGoBack()) {
this.inAppWebView.goBack();
}
}
public boolean canGoBack() {
return this.inAppWebView.canGoBack();
}
And now the hardware back button will go back until there are no more backs to do. I really think this should be the default behavior in android since the Done button already closes the InAppBrowser window.
This worked for me in PhoneGap 2.7, help came from here, How do I disable Android Back button on one page and change to exit button on every other page
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", function (e) {
e.preventDefault();
}, false );
}
I was having this same issue and finally got it to work, I'll post the answer here in case it helps someone.
This is the code I use:
window.new_window = window.open(url, '_blank', 'location=no');
window.new_window.addEventListener("exit", function () {
window.new_window.close();
});
So the key basically is to attach the exit event, which gets called when the back button of the device is tapped.
BTW, I used cordova.js, and build my apps locally using the Cordova CLI, I don't know if that makes any difference, I mention it just in case.
EDIT NOTE: As far as I know, it's not possible to override the back-button for the InAppBrowser in PhoneGap. But I did my best searching for possible solutions...
There's an eventListener to override back-button in PhoneGap -doesn't work for InAppBrowser-
function onDeviceReady(){
document.addEventListener("backbutton", onBackKeyDown, false);
}
Alternative eventListener to override back-button -the OP said this didn't work either-
var ref = window.open('http://www.stackoverflow.com', '_blank', 'location=yes');
ref.addEventListener("backbutton", function () {
//logic here
})
Overriding the Back-button in an Activity -this is plain java, obviously didn't work in PhoneGap-
#Override
public void onBackPressed()
{
//logic here
}
Conclusion:
Above solutions didn't work, following links (this answer, this one and a third one) didn't help either. So it's highly possible that overriding the back-button for the InAppBrowser in PhoneGap is not possible. If someone does come up with a solution or if things changed for a new PhoneGap version feel free to let us know...
EDIT:
Installing this plugin may take you to closest solution:
cordova plugin add org.apache.cordova.inappbrowse
What this plugin will do, in WP8, it will overlay back/forward/close button on InAppBrowser whenever you open any link/page in it.
See this image:
Use jQuery mobile:
$(document).on('backbutton',
function(e){
e.preventDefault();
// YOUR CODE GOES HERE
});
Running Cordova 5.1.1 and when i load pages in the inappbroswer i like having the back button work until the inappbrowser exits back to my index.html page because it's blank and just sits there. So i used the following code to fix this. It exits the app when it exits the inappbrowser.
window.open = cordova.InAppBrowser.open;
var ref = window.open(url, '_blank', 'location=no');
ref.addEventListener('exit', function () {
navigator.app.exitApp();
});
As far as I know it's not possible to override or detect the back button from inAppBrowser. When you press the back button, inAppBrowser will hide and return control to the Phonegap page. You can catch this with the focus event on the window, (using jQuery) like
var browser = window.open('http://example.com', '_blank', 'location=no');
$(window).on('focus', function() {
browser.show();
});
to reopen the browser. You could then use browser.executeScript() to signal the webapp loaded in the browser, if you like.
Inspired by this forum post.
I know this question has an answer already but I post my answer for those who any of these answers didn't work for them(such as myself):
so I have a multi page app for android and IOS and I am using cordova 5.x and I added the code below in every page except the page I needed InAppBrowser:
delete window.open;
and then for the rest of the pages I used:
document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown(event) {
// your code for handling back button comes here
}
for handling back button
note that: delete window.open; base on the documentation
manually restore the default behaviour of 'window.open'
after that InAppBrowser plugin worked great and I handled back button in all pages correctly.
one last thing don't forget to add:<script type="text/javascript" charset="utf-8" src="cordova.js"></script> in pages you need to have InAppBrowser.
hope this help.