Javascript request fullscreen is unreliable

Question

I'm trying to use the JavaScript FullScreen API, using workarounds for current non-standard implementations from here:

https://developer.mozilla.org/en/DOM/Using_full-screen_mode#AutoCompatibilityTable

Sadly, it behaves very erratically. I only care about Chrome (using v17), but since I was having problems I did some tests in Firefox 10 for comparison, results are similar.

The code below attempts to set the browser to fullscreen, sometimes it works, sometimes not. It ALWAYS calls the alert to indicate it is requesting fullscreen. Here's what I've found:

• It USUALLY sets fullscreen. It can get to a state where this stops working, but the alert still happens, i.e. it is still requesting FullScreen, but it doesn't work.
• It can work if called from a keypress handler (document.onkeypress), but not when called on page loading (window.onload).

My code is as follows:

function DoFullScreen() {

    var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !==     null) ||    // alternative standard method  
            (document.mozFullScreen || document.webkitIsFullScreen);

    var docElm = document.documentElement;
    if (!isInFullScreen) {

        if (docElm.requestFullscreen) {
            docElm.requestFullscreen();
        }
        else if (docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
            alert("Mozilla entering fullscreen!");
        }
        else if (docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
            alert("Webkit entering fullscreen!");
        }
    }
}

Answer 1

requestFullscreen() can not be called automatically is because of security reasons (at least in Chrome). Therefore it can only be called by a user action such as:

• click (button, link...)
• key (keydown, keypress...)

And if your document is contained in a frame:

• allowfullscreen needs to be present on the <iframe> element*

* W3 Spec:
"...To prevent embedded content from going fullscreen only embedded content specifically allowed via the allowfullscreen attribute of the HTML iframe element will be able to go fullscreen. This prevents untrusted content from going fullscreen..."

Read more: W3 Spec on Fullscreen

Also mentioned by @abergmeier, on Firefox your fullscreen request must be executed within 1 second after the user-generated event was fired.

Answer 2

I know this is quite an old question but it is still the top result in Google when searching for FireFox's error message when calling mozRequestFullScreen() from code that wasn't triggered by any user interaction.

Request for full-screen was denied because Element.mozRequestFullScreen() was not called from inside a short running user-generated event handler.

As already discussed this is a security setting and therefore is the correct behaviour in normal browser environment (end user machine).

But I am writting an HTML5-based digital signage application which runs under a controlled environment without any user interaction intended. It is vital for my apllication to be able to switch to fullscreen automatically.

Luckily FireFox offers a possibilty to remove this restriction on the browser, which is rather hard to find. I will write it here as future reference for everybody finding this page via the Google search as I did

On the about:config page search for the following key and set it to false

full-screen-api.allow-trusted-requests-only

For my digital signage application I also removed the prompt the browser shows when entering fullscren:

full-screen-api.approval-required

Hopefully this might save someone the hours I wasted to find these settings.

Answer 3

You have nothing wrong with your function. In Firefox, if you call that function directly, it will prevent to for full-screen. As you know, Request for full-screen was denied because docElm.mozRequestFullScreen(); was not called from inside a short running user-generated event handler. So, You have to call the function on event such as onClick in Firefox.

<a href="#" onClick="DoFullScreen()">Full Screen Mode</a>

Answer 4

Another unexpected issue with requestFullscreen() is that parent frames need to have the allowfullscreen attribute, otherwise Firefox outputs the following error:

Request for fullscreen was denied because at least one of the document’s containing elements is not an iframe or does not have an “allowfullscreen” attribute.

Aside from iframes, this can be caused by your page being within a frameset frame. Because frameset is deprecated, there is no support for the HTML5 allowfullscreen attribute, and the requestFullscreen() call fails.

The Firefox documentation explicitly states this on MDN, but I think it bears reiterating here, for developers who might not read the documentation first.... ahem

Only elements in the top-level document or in an with the allowfullscreen attribute can be displayed full-screen. This means that elements inside a frame or an object can't.

Answer 5

I realize this is an old post, but in case someone else finds this I'd like to add a few suggestions and sample code.

To help avoid this error...

Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

Don't test for the existence of requestFullscreen(), which is a method. Instead, test for the existence of a property like document.fullscreenEnabled.

Also consider the following...

• Move your fullscreen check into its own function so you can reuse it.
• Make DoFullScreen() reusable by passing the element you want to affect as a parameter.
• Use a guard clause at the top of DoFullScreen() to exit out of the function immediately if the window is already in fullscreen mode. This also simplifies the logic.
• Set a default value for your DoFullScreen() element parameter to ensure the requestFullscreen() method is always called on an existing element. Defaulting to document.documentElement will probably save you some keystrokes.

// Move your fullscreen check into its own function
function isFullScreen() { 
  return Boolean(
    document.fullscreenElement ||
      document.webkitFullscreenElement ||
      document.mozFullScreenElement ||
      document.msFullscreenElement
  );
}

// Make DoFullScreen() reusable by passing the element as a parameter
function DoFullScreen(el) { 
  // Use a guard clause to exit out of the function immediately
  if (isFullScreen()) return false;
  // Set a default value for your element parameter
  if (el === undefined) el = document.documentElement; 
  // Test for the existence of document.fullscreenEnabled instead of requestFullscreen()
  if (document.fullscreenEnabled) { 
    el.requestFullscreen();
  } else if (document.webkitFullscreenEnabled) {
    el.webkitRequestFullscreen();
  } else if (document.mozFullScreenEnabled) {
    el.mozRequestFullScreen();
  } else if (document.msFullscreenEnabled) {
    el.msRequestFullscreen();
  }
}

(function () {
  const btnFullscreenContent = document.querySelector(".request-fullscreen-content");
  const el = document.querySelector(".fullscreen-content");
  // Request the .fullscreen-content element go into fullscreen mode
  btnFullscreenContent .addEventListener("click", function (){ DoFullScreen(el) }, false);

  const btnFullscreenDocument = document.querySelector(".request-fullscreen-document");
  // Request the document.documentElement go into fullscreen mode by not passing element
  btnFullscreenDocument .addEventListener("click", function (){ requestFullscreen() }, false);
})();