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?
Related
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 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 am able to control the audio through mouse is there any to control the audio through keyboard the code that i tried is here the controlling happens with button i need this without button how can i do this
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
Use postMessage, to transfer the data from one page to another. On the newly opened page do sth like this:
window.addEventListener("keydown",function(key){
window.postMessage(key,"*");
});
To receive this, simply listen for the message event on your main site:
window.addEventListener("message",function(data){
origin=data.origin
//check if this is your site to prevent hijacking
key=data.data;
//do whatever
});
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 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>