Friday, April 20, 2018

How to save fullscreen state in Firefox?

Leave a Comment

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.

4 Answers

Answers 1

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.

Answers 2

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.

Answers 3

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/

Answers 4

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) 
If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment