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);
Related
I'm trying to show a confirmation pop before user close the tab or went to another tab like facebook, gmail, GoDaddy & others do.
My code working for Firefox but not for other browser like chrome, safari etc.
<script type="text/javascript">
var hook = true;
window.onbeforeunload = function() {
if (hook) {
return "Did you save"
}
}
function unhook() {
hook=false;
}
</script>
Call unhook() onClick for button and links
No Block URL
Please help me to get this fixed.
If you take a look at the api of window.beforeunload(), you can see that, though widely the basic unload event is supported, a custom message can only be set in internet explorer and certain versions of some browsers. So just use the normal standard message.
This feature (custom messages) was often exploited by malicous sites to interact with user in a harmful or malipulative way. This is why many browsers don't support this anymore, until some patch removes the threat for users.
Standard message solution:
window.addEventListener('beforeunload', function (e) {
// Cancel the event
e.preventDefault();
// Chrome requires returnValue to be set
e.returnValue = '';
});
Look at Ouibounce it helps detect when a user is about to leave the page(It looks at the position of the cursor). You could probably build off this library.
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
Following Mozilla's API document on Fullscreen, I've placed the following code in my website, it simply takes the whole document (html element) and makes the page go fullscreen once the user clicks anywhere in the page, and once there's another click, page goes back to normal.
var videoElement = document.getElementsByTagName('html')[0];
function toggleFullScreen() {
if (!document.mozFullScreen) {
if (videoElement.mozRequestFullScreen) {
videoElement.mozRequestFullScreen();
}
} else {
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
}
}
window.addEventListener("click", function(e) {
toggleFullScreen();
}, false);
My question is how can I save this fullscreen state so every time that Firefox loads up, that page is still on fullscreen.
Or any workaround? This is for Firefox for Android.
It's an extreme workaround, but you can make your website a progressive web app and put "display": "fullscreen" in its manifest. Then you can launch your site from the home screen and use it like a fullscreen native app.
Following my experiments and the specs, this isn't doable, from client browser javascript
This api need an user interaction. We can't activate the fullscreen by scripting.
From the fullscreen api specification:
Fullscreen is supported if there is no previously-established user
preference, security risk, or platform limitation.
An algorithm is allowed to request fullscreen if one of the following
is true:
The algorithm is triggered by user activation.
The algorithm is triggered by a user generated orientation change.
https://fullscreen.spec.whatwg.org/#model
About activation events:
An algorithm is triggered by user activation if any of the following
conditions is true:
The task in which the algorithm is running is currently processing an
activation behavior whose click event's isTrusted attribute is true.
The task in which the algorithm is running is currently running the
event listener for an event whose isTrusted attribute is true and
whose type is one of:
change
click
dblclick
mouseup
pointerup
reset
submit
touchend
https://html.spec.whatwg.org/multipage/interaction.html#triggered-by-user-activation
We can't trigger fullscreens from scripts, or if so, the script must be triggered by the user.
Including simulating a click won't works, this is regular behavior, made to protect user experience.
With some reflexion, we can't agree more on this, imagine any ads page can launch full screens, the web would be a hell to browse!
You told in comment: «I am the only user here»
What you can do if using unix: (( probably alternatives exists in other os )).
Using midori (a lightweight webkit browser), this will start a real fullscreen.
midori -e Fullscreen -a myurl.html
There is no ways to start firefox or chromium in a fullscreen state from the command line, to my knowledge.
But what is doable is to trigger a F11 click at system level, focusing on the good window, just after the page launch. ((sendkey in android adb shell?))
xdotool can do that.
Here is a pipe command line that will launch firefox with myurl.html, search for the most recent firefox window id, then trigger the F11 key on this window.. (Press F11 again to exit)
firefox myurl.html && xdotool search --name firefox | tail -1 | xdotool key F11
This should be easy to adapt for other browsers.
As last alternative, have a look at electron or nw.js.
take a look at this add on for Firefox, i have not tried it, as I'm posting this from mobile, it's description does say that it can force start in full screen. I'm just quoting their description .
Saves the last state or force start in full screen forever! Simple and
complete for this purpose.
Edit : And the link to it
https://addons.mozilla.org/en-US/firefox/addon/mfull/
What about using localStorage like this?
function goFullScreen() {
if (videoElement.mozRequestFullScreen) {
localStorage.setItem('fullscreenEnabled', true)
videoElement.mozRequestFullScreen();
}
}
window.onload = function () {
if (localStorage.getItem('fullscreenEnabled') === true) {
goFullScreen();
}
};
function toggleFullScreen() {
if (!document.mozFullScreen) {
goFullScreen();
} else {
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
localStorage.setItem('fullscreenEnabled', false)
}
}
}
window.addEventListener("click", function(e) {
toggleFullScreen();
}, false)
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 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>