CODEWITHSUNDEEP
javascript
Stefan
Stefan

Reputation: 9329

Javascript request fullscreen is unreliable

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:

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!");
        }
    }
}

Upvotes: 52

Views: 92416

Answers (5)

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94319

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.

Upvotes: 100

Bryan Sullivan
Bryan Sullivan

Reputation: 506

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);
})();

Upvotes: 4

Drew
Drew

Reputation: 1014

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.

Upvotes: 4

Lukas Zech
Lukas Zech

Reputation: 515

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.

Upvotes: 31

Sally Hammel
Sally Hammel

Reputation: 304

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>

Upvotes: 10

Related Questions