Display page in fullscreen using JS

Question

I want to display my page in fullscreen when it opens (WITHOUT user input). How can I do that? I tried this code, but it doesnt't really work

function fullScreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.webkitrequestFullscreen) {
        element.webkitRequestFullscreen();
    } else if (element.mozRequestFullscreen) {
        element.mozRequestFullscreen();
    }
}

var html = document.documentElement;
fullScreen(html);

Can you be more specific? Does it do *nothing*, does it make the page almost fullscreen, does it make the page fullscreen for a second and then reverts back/reverts on scroll? Etc. — TylerH, Jun 15 '18 at 16:25
I think you may find proper examples here: https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp — monogate, Jun 15 '18 at 16:29
@monogate thanks, but I need page to be full screen after it loads, without user interaction. Is that possible? — IntegerOverlord, Jun 15 '18 at 16:41
have you tryed this? [https://stackoverflow.com/questions/13303151/getting-fullscreen-mode-to-my-browser-using-jquery](https://stackoverflow.com/questions/13303151/getting-fullscreen-mode-to-my-browser-using-jquery) — Luca Fonta, Jun 15 '18 at 16:49
@LucaFontanot those examples require user input. I need to make page fullscreen on load — IntegerOverlord, Jun 15 '18 at 17:04
Fullscreen requests need to be called from within an event handler or otherwise they will be denied. https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API — Emeeus, Jun 15 '18 at 17:29

Emeeus · Accepted Answer · 2018-07-06T13:38:12.930

3

Today (6/2018) it's not possible to call fullscreen methods without an event fired by user interaction. As doc said:

Fullscreen requests need to be called from within an event handler or otherwise they will be denied.

https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API We can't emulate that interaction. This example shows that behavior:

<div id="somediv">
    content
</div>

<script>

var div = document.getElementById("somediv");

function toggleFullScreen() {
    if (!document.mozFullScreen && !document.webkitFullScreen) {
      if (div.mozRequestFullScreen) {   
        div.mozRequestFullScreen();
      } else {
        div.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
      }
    } else {
      if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else {
        document.webkitCancelFullScreen();
      }
    }
  }

  document.addEventListener("click", function(e) {
      console.log("click");
      toggleFullScreen();
  }, false);


div.click();

</script>

This example shows that console.log("click"); was executed without interaction but fullScreen is denied. If user perform a click (user event), fullScreen is allowed.

edited Jul 06 '18 at 13:38

answered Jun 15 '18 at 17:35

Emeeus

5,072
2
25
37

Alright, thanks. Than another question. How can I launch default system browser in kiosk mode with specified url? That is actually what I needed – IntegerOverlord Jun 15 '18 at 18:02
It's something like: google-chrome --kiosk http://example.com in linux and windows: chrome.exe --kiosk http://example.com, I'm not sure Firefox – Emeeus Jun 15 '18 at 18:12
Oh, also, is there any way to emulate that user input? Probably that would be too easy – IntegerOverlord Jun 15 '18 at 19:11
We can't do that for fullscreen. In the code, .click() emulates a click and doesn't work, that is the problem. No matter if we emulate a click or a mouseenter or whatever, fullscreen needs an event triggered by user. It needs a real interaction. – Emeeus Jun 15 '18 at 19:25

Display page in fullscreen using JS

1 Answers1