firefox Browser rejected fullscreen change

Question

I'm trying to make a element of my website in fullscreen when we click on it, and it works with chrome, IE, but not with firefox.

I went to the microsoft fullscreen API, and I tested theire code, and there is no problems with any of this browsers.

Here the part of my web site I want to put in full screen.

<div class="wrap">
    <div class="signin">
        <div style="margin: 2px 0px -25px 10px;"><h1>Sign In or <a href="<?php echo $this->url(array('module' => 'default','controller'=>'paid-sign-up','action'=>'index'),null,true); ?>" style="color:#F00;text-decoration:none;">Signup</a></h1></div>
        <?php echo $this->signin(); ?>
        <span class="forget">
        <a href="<?php echo $this->url(array('module' => 'default','controller'=>'forgot-password','action'=>'index'),null,true); ?>">Forgotten Password?</a> </span>
    </div>

And here the script I use

    <script type="text/javascript">
  var inFullScreen = false; // flag to show when full screen

  var fsClass = document.getElementsByClassName("wrap");
  for (var i = 0; i < fsClass.length; i++) {
    fsClass[i].addEventListener("click", function (evt) {
      if (inFullScreen == false) {
        makeFullScreen(evt.target); // open to full screen
      } else {
        reset();
      }
    }, false);
  }


  function makeFullScreen(divObj) {
alert (divObj);
  if (divObj.requestFullscreen) {
alert ('standard');
        divObj.requestFullscreen();
    }
    else if (divObj.msRequestFullscreen) {
alert ('ms');
      divObj.msRequestFullscreen();
    }
    else if (divObj.mozRequestFullScreen) {
alert ('moz');
      divObj.mozRequestFullScreen();
    }
    else if (divObj.webkitRequestFullscreen) {
alert ('webkit');
      divObj.webkitRequestFullscreen();
    }
    inFullScreen = true;
    return;
  }

  function reset() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
    else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
    else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    }
    else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
    inFullScreen = false;
    return;
  }


</script>

And the last info who can be usefull, my website is a zent framework website, it's why there is some PHP.

Have you checked the console? When a fullscreen request fails, the browser logs an error. — Pointy, May 28 '14 at 13:45
I didn't checked cause I didn't knew it. So the error shown in the console is : "Request for full-screen was denied because Element.mozRequestFullScreen() was not called from inside a short running user-generated event handler." I don't really know what it means. — Phantom, May 28 '14 at 13:54
It means that you cannot force full-screen without the activity being triggered by some user interaction (like clicking on a button). — Pointy, May 28 '14 at 13:56
Yes, but, the fullscreen is triggered when the user click in the div, so what is the problem ? — Phantom, May 28 '14 at 14:02
Oh, you're right :) Well in that case I don't know why the request would fail. I'll make a jsfiddle. — Pointy, May 28 '14 at 14:07
Hmm well [in this jsbin test](http://jsbin.com/sehaw/1) it (sort-of) works; I don't know what happens to the content but if you click on "Hello" Firefox puts the page in full-screen. — Pointy, May 28 '14 at 14:11

IgnoranceIsBliss · Accepted Answer · 2022-04-02T19:35:24.793

13

This code segment should work for most browsers incl. Mozilla Firefox. Specifically, Mozilla Firefox insists that the code in the event handler executes under 1 second. Else Fullscreen requests are denied. Refer: Bug Report

HTML

<button id="view-fullscreen">Fullscreen</button>

Javascript

var viewFullScreen = document.getElementById("view-fullscreen");
if (viewFullScreen) {
  viewFullScreen.addEventListener("click", function() {
    var docElm = document.documentElement;
    if (docElm.requestFullscreen) {
      docElm.requestFullscreen();
    } else if (docElm.msRequestFullscreen) {
      docElm.msRequestFullscreen();
    } else if (docElm.mozRequestFullScreen) {
      docElm.mozRequestFullScreen();
    } else if (docElm.webkitRequestFullScreen) {
      docElm.webkitRequestFullScreen();
    }
  })
}

Refer to the FullScreen API for more details Fullscreen API

The above code segment's working Demo: Fullscreen Demo

edited Apr 02 '22 at 19:35

answered May 28 '14 at 13:48

IgnoranceIsBliss

300
2
12

1

That's almost exactly what's in the OP! – Pointy May 28 '14 at 13:56
Well, the above code snippet has a working demo (see link). I think @Phantom 's use of evt.target is broken & should instead use the document.documentElement parameter. – IgnoranceIsBliss May 28 '14 at 14:38
I tried with the document.documentElement parameter, and it not working on any browsers. And if what I use is broken, why it's works on chrome and IE, but not on firefox ? – Phantom May 28 '14 at 14:58
Also, this behavior of Firefox is intentional as detailed in the bug report " Requests for full-screen are only granted when they're requested while running in a user-generated event handler. A user generated event handler is a bit of code which runs when the users performs some input, like clicking a mouse button, or pressing a key on the keyboard. If the code in the event handler runs for more than one second before requesting full-screen, the request is also denied." https://bugzilla.mozilla.org/show_bug.cgi?id=687687 – IgnoranceIsBliss May 28 '14 at 15:03
1

Ok, but like I reply to Pointy in the comments of my post : 'the fullscreen is triggered when the user click in the div'. So what is the problem ? – Phantom May 28 '14 at 15:08
2

It could be that the code in the event handler's execution exceeds 1 second. Mozilla denies fullscreen requests in such a case. – IgnoranceIsBliss May 28 '14 at 15:15
1

Your code has the event handler in a different function and then you invoke the makeFullScreen(). Try integrating the event handler within the makeFullScreen() function to execute your code within the 1 second Mozilla barrier, as show in the above code snippet. – IgnoranceIsBliss May 28 '14 at 15:27
I sorted it. The problem was the 1 second barrier, cause I used two alert who took time. I removed the two alert and it's working fine. Thanks for your help. ;) – Phantom May 28 '14 at 15:30
Great! Please accept the answer if it worked for you. I'll add the 1 second barrier to the main answer to reflect Mozilla's stricter requirements. – IgnoranceIsBliss May 28 '14 at 15:34
1

A console.log() can replace & do the reporting of the slower-user-dialog involved alert(). – IgnoranceIsBliss May 28 '14 at 15:49
Is a there a Firefox? Chrome/Chromium settings to remove this requirement? I see it in both browser. I need to run my app as KIOSK mode in a controlled environment (non-public). – Meryan May 27 '20 at 19:06
All of the above is no longer needed - https://stackoverflow.com/a/71572615/1461862 – Mauricio Gracia Gutierrez Mar 22 '22 at 13:14
@Meryan you probably already solve this, but for Chromium - https://gist.github.com/rampfox/085bf3ffb9ff51e114bf7afdf3ced71b – Mauricio Gracia Gutierrez Mar 22 '22 at 13:15
@MauricioGraciaGutierrez thanks for the hint, you guessed right I already know about those switches, let me know if you any idea how to solve this problem on *chromium* https://superuser.com/questions/1343290/disable-chrome-session-restore-popup – Meryan Mar 30 '22 at 05:29
I seem to be missing something, that questions has different answers and a solution. – Mauricio Gracia Gutierrez Mar 31 '22 at 14:08
@MauricioGraciaGutierrez Op's question was to get rid of timeout error for full-screen due to usage of alert, which exceeds 1 second due to requiring human interaction. Both are very different questions. You can check the demo link for working solution. – IgnoranceIsBliss Apr 02 '22 at 19:37

firefox Browser rejected fullscreen change

1 Answers1

Linked