We Keep Coding

How to save fullscreen state in Firefox?

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)

Prevent opening link in same tab, but allow opening in a new tab

To improve performance on some bulky web apps, I've created an update that converts them to single-page apps. Only JS / jQuery are in use; thus far, it hasn't seemed useful to introduce Angular, React, Meteor, etc. However, beta testing has revealed a problem, which is that (duh) sometimes a user will want to open something in a new tab / window. The interactive elements in question are currently anchors with no href attribute, so it is not currently possible to open in a new tab.
My understanding is that if I were to use an a with an href and preventDefault(), users would still not be able to open in a new tab.
I considered placing "open in new tab" checkboxes next to the interactive elements, and I considered some other approaches that would require people to learn new, idiomatic interaction patterns. Bad idea.
Now, I'm thinking that I'll try using the onbeforeunload event handler to prevent changing the current window's location and instead affect the desired changes to the current screen. I believe this would not prevent opening in a new tab, since doing opening in a new tab won't fire the unload event.
I can't be the first person to try to address this problem, but I can't find any info on it, either. Anyone know how to prevent opening in the same tab while allowing opening in a new tab and while not forcing people to learn new interaction patterns? Anyone have a reason to believe that using the onbeforeunload event handler will not allow me to achieve that?
Update
In case it helps anyone in the future, below is what I developed. Thanks to #Kiko Garcia; it hadn't occurred to me that one could detect which mouse button was used. Tested on Firefox 54, Chrome 57, Edge, IE 11 (all on Windows 10) and on Safari for iOS10 and on Android Browser for Android 7. (Will test on Mac next week, but assuming it's good for now.)
// track whether or not the Control key is being pressed
var controlKeyIsPressed = 0;
$(document).keydown(function(keyDownEvent) {
if(keyDownEvent.which == "17") {
controlKeyIsPressed = 1;
}
});
$(document).keyup(function(){
controlKeyIsPressed = 0;
});
// on clicking anchors of the specified type
$("a.some-class").on("click", function(clickEvent) {
// left click only
if (clickEvent.which == 1 && controlKeyIsPressed == 0) {
// prevent default behaviour
clickEvent.preventDefault();
// perform desired changes on this screen
// middle click
} else if (clickEvent.which == 2) {
// prevent default behaviour because behaviour seems to be inconsistent
clickEvent.preventDefault();
}
});

Just as this answer says you can just provide different actions for different mouse events. Of course that can be an window.open() or a location.href change, for example.
With that you can do something like:
left click: change location.href
middle click: open new window
right click: open your custom menu
$(document).mousedown(function(e){
switch(e.which)
{
case 1:
//left Click
break;
case 2:
//middle Click
break;
case 3:
//right Click
break;
}
return true;// to allow the browser to know that we handled it.
});
Try that
Please note that I just pasted the answer's code. You should adapt to your tagname and usability

Javascript Keybindings "Interrupted" or "Lose Page Focus" After Advertisement Loads in Chrome

I have key event bindings for the arrow keys on a web page. These bindings work perfectly as the page loads, but suddenly stop working when the Google AdSense advertisement on the page loads. This doesn't happen on every page/ad load, but on about half of them.
When this happens, if I press the arrow keys repeatedly during page load, the bound event will fire successfully until the ad appears, at which point the event stops working, and the key's default action (scrolling the page) begins to occur as I keep pressing the key. This is strange since I have disabled the default action on these keys via:
window.onkeydown = function(e) {
// Spacebar, all four arrow keys
if (e.keyCode == 32 || e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39 ||
e.keyCode == 40) {
e.preventDefault();
return false;
}
};
If I subsequently click anywhere on the page body, the key bindings will start working again.
I'm guessing that perhaps when the ad finishes loading (which is after the rest of the page), it causes some kind of interrupt that "steals focus" from the page (but apparently not the window since the scrolling still happens?).
The actual keybindings are done using Mousetrap, though that doesn't seem to have anything to do with the problem, and I have only encountered this issue in Google Chrome. I do not get this behavior in Firefox. If I enable AdBlock on Chrome, the issue does not occur, further showing it's the advertisement triggering this "interruption."
Is there anything obvious that I'm unaware of that can completely interrupt keybindings in this way, while still allowing keys to scroll the page until the user clicks in the body again? Is there any way to prevent the advertisement from disrupting the user's interactivity with the page in this way?

One suggestion was to capture the AdSense ADS_LOADED event, but this appears to be available only when using the Google IMA SDK in videos.
The solution I came up with was to listen for all blur events, and when focus is stolen from the document body by an advertisement, return focus to the window. This only works when window.focus() is wrapped in a timeout, something I currently don't understand.
The isDescendant() function was taken from this answer.
function isDescendant(child, parent) {
/*
Test if child is contained within parent regardless of how many levels deep
*/
var node = child.parentNode;
while (node != null) {
if (node == parent) {
return true;
}
node = node.parentNode;
}
return false;
}
window.addEventListener('blur', function() {
var ads = document.getElementsByClassName('ad');
var n = ads.length;
for (i=0; i<n; i++) {
if (isDescendant(document.activeElement, ads[i])) {
// This only works if wrapped in a timeout (why?)
window.setTimeout(function () {
window.focus();
}, 0);
break;
}
}
});

SAPUI5-Show confirmation before exiting application in android

I want to show a confirmation dialog(Are you sure?) with 2 button "Yes" and "Cancel" before exit when the user press the native back button on the home(first) screen. And based on the buttons the decision should be made.
My question is where do I write the confirm dialog(/popup) code. I tried inside onExit(), but its not working.
Thanks.

You have to attach on the right browser resp. native events. Here are the best guesses I found:
How to prevent Android from closing web-application when backbutton is pressed?
detect back button click in browser
http://www.irt.org/script/311.htm
window.onbeforeunload = function (e) {
var e = e || window.event;
var msg = "Do you really want to leave this page?"
// For IE and Firefox
if (e) {
e.returnValue = msg;
}
// For Safari / chrome
return msg; };
That piece of code appears not to work on iOS, not sure about Android.
Another possibility would be to make your page open in a new window or use a redirect. This way your application would be the first page in window.history stack and there will be no back beyond your start page.
GL
Chris

How can I detect exit intent on a mobile browser?

I'm working on a solution to detect exit intent on safari mobile. (or any mobile browser for that matter)
On desktop I can track curser movement and when the user breaks the plane of the webpage I can initiate a pop up. See http://www.quicksprout.com/about/ as an example. Move your curser up to the back button on the browser and as soon as your curser breaks the webpage a pop up will appear. How can I solve this in a mobile environment?
Is there any way to detect when someone clicks the Safari address bar and before the favorites screen appears I can launch a pop up then?
Thank you in advance for the help.

I know this is over a year later, but maybe my answer might still help someone in the future.
On some of my sites, I found that mobile exit intent often consists of a slight upward scroll before the user hits their back button. For example, users often scroll down the page quite a bit while consuming content, but when they're ready to leave they might scroll upwards slightly (say 5-10% of the page height), and then they'll go hit the back button or close the tab.
I use that knowledge to pop up a newsletter sign up form on some of my content sites, and it actually works well without annoying the user. So if I ever detect that a user scrolled down at least 50% of my page, then back up by at least 5%, I hit them with a popup since I think they liked my content but are ready to exit the page. I wrote some simple Javascript that actually lets me detect such behavior at https://github.com/shahzam/DialogTriggerJS
Not sure if that's the exact answer you're looking for, but hope that helps a bit!

I just came back from a long trip around the web with the same goal in mind however as of now - you really are not able to detect if a user clicks on the address.
However I found out that you can look for patterns that users are making before they are ready to leave your website or abandon shopping cart. Here is show how we solved this and made mobile exit intent work on all mobile devices in case if the user quickly scrolls back up the page since that can be a sign that shows that the user has lost interest in our content and might want to leave.
Detecting if the user is on a mobile device.
This part is rather simple - we use Javascript to check if the event is "touchstart" and if so, we are adding a class to our body tag:
jQuery(document).on('touchstart', function(){
$(body).addClass('on-mobile-device');
});
Detecting the scroll direction, scroll speed and displaying Exit Intent popup:
function myScrollSpeedFunction(){
if( jQuery('body').hasClass('on-mobile-device') ){
if(my_scroll() < -200){
//Your code here to display Exit Intent popup
console.log('Must show mobile Exit Intent popup')
}
}
}
var my_scroll = (function(){ //Function that checks the speed of scrolling
var last_position, new_position, timer, delta, delay = 50;
function clear() {
last_position = null;
delta = 0;
}
clear();
return function(){
new_position = window.scrollY;
if ( last_position != null ){
delta = new_position - last_position;
}
last_position = new_position;
clearTimeout(timer);
timer = setTimeout(clear, delay);
return delta;
};
})();
jQuery(document).on('scroll', myScrollSpeedFunction );
This is basically it. This way you are not interrupting the user's flow since the user has already finished looking at the content and going up very quickly and we can present him with a message.
What we have done ourselves besides this code is to make sure our Exit Intent popup is displayed only in case if the user has got a product in his shopping cart since we are suggesting to save the users shopping cart and remind about his abandoned cart via email.
You can test it out on our product page here: https://www.cartbounty.com, just remember to add a product to the shopping cart before you test drive it on your mobile device.

At least on mobile safari, you're looking for the window.onpagehide function. This event will fire immediately after the page is hidden.
Here is a snippet showing this code in action:
<!DOCTYPE html>
<html>
<head>
<script> window.onpagehide = function(e) { alert("Don't go! I'm lonely!"); }</script>
</head>
<body>
</body>
</html>
Unfortunately, it looks like if you want an event to fire before the page is hidden, you're out of luck, because mobile Safari halts execution of everything on the page when the user clicks on the address bar. This means that you cannot, for example, monitor the page height to see if the user is typing on the keyboard (as they would be if they clicked the address bar).

Some simple code to detect exit intent on a mobile device.
It detects exit intent through the speed of the user's upwards scroll.
It delays 10 seconds before enabling. You probably should make it about 30 seconds if you only want to show your exit intent popup to people who are really interested in your content.
setTimeout(() => {
document.addEventListener("scroll", scrollSpeed);
}, 10000);
scrollSpeed = () => {
lastPosition = window.scrollY;
setTimeout(() => {
newPosition = window.scrollY;
}, 100);
currentSpeed = newPosition - lastPosition;
console.log(currentSpeed);
if (currentSpeed > 160) {
console.log("Exit intent popup triggered");
document.removeEventListener("scroll", scrollSpeed);
}
};