how to make a webpage instantly enter full screen

Question

I am trying to figure out how to make a webpage instantly enter full screen the second it is opened.
I've got this:

var elem = document.documentElement;
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

:-webkit-full-screen {
  background-color: white;
}

:-ms-fullscreen {
  background-color: white;
}

:fullscreen {
  background-color: white;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<button>Random button</button>

</head>
<body>

</body>
</html>

And I want openFullscreen() to be called the second the page is opened. Any way to do that?

No, because that would be incredibly annoying. So the browser vendors blocked that behavior. User input is mandatory. — Emiel Zuurbier, Jun 30 '21 at 21:02

score 2 · Answer 1 · answered Jun 30 '21 at 21:07

Your problem is that you never called the functions. See my code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Safari syntax */
:-webkit-full-screen {
  background-color: yellow;
}

/* IE11 */
:-ms-fullscreen {
  background-color: yellow;
}

/* Standard syntax */
:fullscreen {
  background-color: yellow;
}

/* Style the button */
button {
  padding: 20px;
  font-size: 20px;
}
</style>
</head>
<body>

<h2>Fullscreen with JavaScript</h2>
<p>Click on the "Open Fullscreen" button to open this page in fullscreen mode. Close it by either clicking the "Esc" key on your keyboard, or with the "Close Fullscreen" button.</p>

<button onclick="openFullscreen();">Open Fullscreen</button>
<button onclick="closeFullscreen();">Close Fullscreen</button>

<script>
var elem = document.documentElement;
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script>

<p>Note: Internet Explorer 10 and earlier versions do not support the msRequestFullscreen() method.</p>

</body>
</html>

Source: https://www.w3schools.com/howto/howto_js_fullscreen.asp#:~:text=Try%20it%20Yourself%20%C2%BB-,Fullscreen%20Document,-To%20open%20the

score 1 · Answer 2 · answered Jun 30 '21 at 21:05

Unfortunately this is not possible. Events such as mousemove that can be annoying when allowed are not running. You can try this code.

        document.querySelector('html').addEventListener('click', openFullscreen)
        var elem = document.querySelector('.ex');
        function openFullscreen() {
            if (elem.requestFullscreen) {
                elem.requestFullscreen();
            } else if (elem.webkitRequestFullscreen) { /* Safari */
                elem.webkitRequestFullscreen();
            } else if (elem.msRequestFullscreen) { /* IE11 */
                elem.msRequestFullscreen();
            }
        }

   :-webkit-full-screen {
            background-color: white;
        }

        :-ms-fullscreen {
            background-color: white;
        }

        :fullscreen {
            background-color: white;
        }

    <div class="ex">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia repellat culpa ipsam tenetur
        inventore quaerat cupiditate quo, voluptate tempora eligendi ratione animi consequatur earum eaque facilis quis
        optio mollitia saepe?</div>

how to make a webpage instantly enter full screen

2 Answers2