Run a website in fullscreen mode

javascript html fullscreen

65,829

Solution 1

You can't force a website to display in fullscreen mode.

Imagine the security concerns if that were possible.
Malicious websites could "Hijack" a less computer literate person's desktop for all kinds of dubious business.

All of JS fullscreen api's will throw a error like this:
"Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture." If you try to simply call it from your code.

I'm pretty darn sure Flash is similar, in that it requires user interaction to go fullscreen. Otherwise, we'd have seen our fair share of fullscreen popups that are nearly impossible to close.

Solution 2

Other answers already describe how you can go fullscreen in a more or less browser-independent way. However, problem of needing user interaction remains.

You cannot force your webpage to display in fullscreen mode for security reasons. User interaction is required for that.

Also, browser leaves fullscreen mode whenever user goes to another page, even on the same website, and (s)he will have to perform some "user interaction" on every page to go back into fullscreen mode.
This is the reason why your website has to be a single page if you want it to be fullscreen.

That is what I suggest: Use a single splash page that has a hidden iFrame on it.

Whenever user clicks anywhere or presses any key, just set this iFrame to be fullscreen and show it. When you receive an event on leaving fullscreen mode, hide iFrame again to show splash.

Links open in the same frame by default, so you will stay in fullscreen mode until user explicitly leaves it or some links opens in a new tab.

Here is an example that works in Chrome:
(See it in action. Use other answers to make it browser-independent.)

<html>
<head>
    <script language="jscript">
        function goFullscreen() {
            // Must be called as a result of user interaction to work
            mf = document.getElementById("main_frame");
            mf.webkitRequestFullscreen();
            mf.style.display="";
        }
        function fullscreenChanged() {
            if (document.webkitFullscreenElement == null) {
                mf = document.getElementById("main_frame");
                mf.style.display="none";
            }
        }
        document.onwebkitfullscreenchange = fullscreenChanged;
        document.documentElement.onclick = goFullscreen;
        document.onkeydown = goFullscreen;
    </script>
</head>
<body style="margin:0">
    <H1>Click anywhere or press any key to browse <u>Python documentation</u> in fullscreen.</H1>
    <iframe id="main_frame" src="https://docs.python.org" style="width:100%;height:100%;border:none;display:none"></iframe>
</body>
</html>

Note, however, that websites often disallow embedding, e.g. being displayed inside an iframe. The example initially used W3Schools website instead of Python docs, but they set 'X-Frame-Options' header to 'sameorigin' (disallow cross-site embedding) and it stopped working.

P.S. I like the idea of simulating full-blown OS in browser, and it's even better in fullscreen! :) Change your OS!
Also, I am not a web developer. Just thought this question would be interesting to investigate.

Solution 3

You might be able to use requestFullScreen() methods as described at https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode.

Note : This still requires user input - but avoid usage of flash.

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

toggleFullScreen();

This allows the page to activate full screen, and could possibly be activated via page load on a javascript page. However, there is no support for older browsers.

Solution 4

When I needed to do something similar I used a splash screen. The button to continue into full screen mode requested it as an attribute of a JS pop:

 onClick="window.open('pageName.html', 'test', 'fullscreen=yes')"

This is not fullproof, but worked better than any other methods I found. You likely won't be able to do this without user interaction, so using something like a splashscreen allows you to minimize the intrusion to something more commonly accepted.

View more solutions

65,829

Marcio Barroso

Updated on July 09, 2022

Comments

Marcio Barroso almost 2 years

I am looking for a trick to put my website in fullscreen mode without human interaction.

I've found some examples using HTML5's techniques, but all of then needs to be triggered by a human interaction.

This website will be displayed in a TV ...

I already think in load the website using a SWF file in fullscreen mode, but instead of going to this direction, I would like to stress all possibilities using just the default pattern (html, css and javascript)
- Chris Forrence about 9 years
  
  Take a look at this: davidwalsh.name/fullscreen The only caveat is that it doesn't necessarily work on all browsers.
- Arturo Torres Sánchez about 9 years
  
  If the website will be displayed in a TV, you should already be using an OS designed for TVs, and those usually already have fullscreen browsers.
- Marcio Barroso about 9 years
  
  I will not use nothing specifics for the TV ... it is a generic website.
Cerbrus about 9 years

You can't call those functions without user interaction. Which is the reason the OP posted this question in the first place. The only answer to his question, to initialize fullscreen without user interaction, is a "no can do".
Tom about 9 years

Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture.
Sumner Evans about 9 years

Think about someone throwing together a web application that looks a lot like Windows (which is entirely possible) and then opening up a "web browser" and asking for a Social Security number. I know that my mom wouldn't be able to tell the difference (she wouldn't enter her Social though, she knows better than that).
Cerbrus about 9 years

@jsve: That's exactly what I mean with malicious intent. And that's exactly why fullscreen isn't accessible without user interaction.
Cerbrus about 9 years

My browser blocks popups like that by default.
Nicholas about 9 years

@Cerbrus That's a good point. I had set this up several years ago, before popup blockers were so common.
Incredibly HandSome Samuel over 7 years

Just a little question: what do "user gesture" mean here? It seems that only click or keydown event, but not mousemove event.
Neil over 6 years

If you're already using an onclick event... why not just set the current webpage to fullscreen?
RomanM about 5 years

Thank you for adding an actual USEFUL answer - unlike other nay-sayers, you provided a working solution and not useless rants. Bravo.
TuanHV almost 4 years

this function can execute when you have an user gesture like onClick, but you can not force from your code