I have an universal app with Cordova and PhoneJS and build it with Phonegap for iOS, Android and Windows Phone.
The Windows Phone style removes the back button on views to navigate back.
When I press the hardware back button, the app exits.
Thats why I want to override the back button functionality.
I found a lot of documentation which states that you need to register on the 'backbutton' event on 'deviceready' after Cordova loads.
The 'on load' and 'deviceready' events are invoked successfully.
The problem is that the back button event is not invoked and the app still exits.
Versions:
npm list -g cordova
...\AppData\Roaming\npm
└─┬ phonegap#5.3.7
└── cordova#5.4.0
Device:
Microsoft Lumia 640 LTE
Windows Phone 8.1 Update 2
Code:
// Is invoked
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// Is invoked
function onDeviceReady() {
document.addEventListener("backbutton", onBackButton, false);
}
// Is not invoked
function onBackButton(){
debugger;
}
<body onload="onLoad()">
</body>
I found out that the included PhoneJS uses WinJS.
With that I could set the 'onbackclick' action.
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
// Check if WinJS api is available
if(WinJS){
WinJS.Application.onbackclick = function (e) {
MyApp.app.navigationManager.back();
// Return true otherwise it will close app.
return true;
}
}
}
<body onload="onLoad()">
</body>
Related
I'm creating an hybrid app with Phonegap and Framework7 (v1 i guess).
I've been trying to set the "android back button" to quit the app after the user confirms it, and i've been looking at some examples but i can't get this to work. I'm using this:
$$(document).on('deviceready', function() {
console.log("Device is ready!");
document.addEventListener('backbutton', function(e) {
e.preventDefault();
navigator.notification.confirm("Tem a certeza que quer fechar a aplicação?", onConfirmExit, 'Pizzarte', 'Sim,Não');
}, false);
function onConfirmExit(button) {
if (button == 2) { //If User select a No, then return back;
return;
} else {
navigator.app.exitApp(); // If user select a Yes, quit from the app.
}
}
var mySwiper = myApp.swiper('.swiper-container', {
pagination: '.swiper-pagination'
});
});
But when I click the back button on Android, nothing happens. And the strange thing is that if i'm previewing the app using the Phonegap app this will work. Only when i install the final app on my phone, this does not work.
Please help/suggest me if I am doing something wrong.
Phonegap Developer app is a Cordova app which includes all the core plugins and a few 3rd party ones.
Your problem is you are trying to use cordova-plugin-dialogs for the confirm prompt, but you don't have it installed, so it does nothing.
So install it with cordova plugin add cordova-plugin-dialogs
I have a cordova app and using InAppBrowser to login to a website. On Successful login, I need to pass the response to the App. I am using executeScript() to achieve and the same is working fine in Android, whereas in iOS, the callback for executeScript() is not getting fired.
My Load stop event listener is as follows
var ref = cordova.InAppBrowser.open("XXXX.html", "_blank", 'location=yes,toolbar=yes');
function iabLoadStop(event) {
alert("EXECUTING SCRIPT")
ref.executeScript({
code: "document.body.innerHTML"
}, function(values) {
alert("SCRIPT EXECUTED")
alert(values)
});
}
I am getting "EXECUTING SCRIPT" alert successfully on load stop event, but the executeScript() which was support to alert "SCRIPT EXECUTED" and the innerHTML is not getting fired.
As it turned out the reason was with the first alert. This function stops the programm-flow but also caused the code within XXXX.html, that is executed by executeScript, to stop.
So it should be avoided to call such functions (alert/confirm etc.) between event loadstop and executeScript, at least on iOS. There are alternatives like console.log.
I simply try to change the content of an element with id output, after the the pause event fired.
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady()
{
document.addEventListener("pause", test,false);
}
function test()
{
document.getElementById("output").innerHTML = "PAUSE";
}
This works on desktop browser.
The pause event fires when the native platform puts the application
into the background, typically when the user switches to a different
application.
But if i switch to another app on my mobile phone (windows phone), then it does not work? Is it because I did not added the platform windows to my project?
I am developing an Android-Application with cordova. The android 4.4 device is connected with a bluetooth remote control.
With the help of the documentation, I am able to catch some buttons, e.g. the "volume-up"-key:
document.addEventListener("volumeupbutton", onVolumeUpKeyDown, false);
function onVolumeUpKeyDown() {
console.log("Volume up pressed");
}
According to the cordova-documentation, there are some other Eventlisteners for keys available:
backbutton
menubutton
searchbutton
startcallbutton
endcallbutton
volumedownbutton
volumeupbutton
I want that the user gets to the settings-page of my application, when he presses the remotes menu-button, but Unfortunately this button doesn't work for me. Here is the description on the cordova site and the sample code:
document.addEventListener("menubutton", onMenuKeyDown, false);
function onMenuKeyDown() {
console.log("Menu pressed");
}
I have found an APK named "keytest", which shows the pressed keys. This app recognizes:
keyCode=KEYCODE_MENU
still, cordova doesn't fire the event... Why?
It's not documented, but you have to override the menu button to make it work
add this line
navigator.app.overrideButton("menubutton", true);
Then you can use
document.addEventListener("menubutton", yourCallbackFunction, false);
I need to open an external page from my Phonegap app. I need to make it compatible with at least Android and iOS.
I have this code to open the external page
**var ref = window.open('http://mysite.com/', '_blank', 'location=no');**
lastPageLoaded = ref;
ref.addEventListener('loadstop', function (event) {
try {
alert('executing...');
var retVal = lastPageLoaded.executeScript(
{
code: "alert('got here!');"
}, function () {
});
}
catch (exception) {
alert(exception);
}
});
I also have this in my config.xml file:
<access origin="*" />
The code above invokes the InAppBrowser an correctly opens my external page. BUT, the InAppBrowser is not in fullscreen mode which is not good for my app.
I noticed that if I make a slight change to the bolded (that is, the text decorated with ** ) line above to this:
var ref = window.open('http://mysite.com/', **'_self'**, 'location=no');
than InAppBrowser is not invoked but the external page opens in full mode, as my entire app is, which is good!
However, adding the event listener won't work:
ref.addEventListener('loadstop', function (event)
I mean, my code never gets to execute this line:
code: "alert('got here!');"
Seems logical because now I am not running under InAppBrowser context, but I need one of two solutions:
1. Make InAppBrowser run in fullscreen mode and keep my existing event handler
2. Find a similar event to hook to so I can invoke the script on the loaded external page.
Is it possible to achieve this?