How to make the window full screen with Javascript (stretching all over the screen) How to make the window full screen with Javascript (stretching all over the screen) javascript javascript

How to make the window full screen with Javascript (stretching all over the screen)


In newer browsers such as Chrome 15, Firefox 10, Safari 5.1, IE 10 this is possible. It's also possible for older IE's via ActiveX depending on their browser settings.

Here's how to do it:

function requestFullScreen(element) {    // Supports most browsers and their versions.    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;    if (requestMethod) { // Native full screen.        requestMethod.call(element);    } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.        var wscript = new ActiveXObject("WScript.Shell");        if (wscript !== null) {            wscript.SendKeys("{F11}");        }    }}var elem = document.body; // Make the body go full screen.requestFullScreen(elem);

The user obviously needs to accept the fullscreen request first, and there is not possible to trigger this automatically on pageload, it needs to be triggered by a user (eg. a button)

Read more: https://developer.mozilla.org/en/DOM/Using_full-screen_mode


This code also includes how to enable full screen for Internet Explorer 9, and probably older versions, as well as very recent versions of Google Chrome. The accepted answer may also be used for other browsers.

var el = document.documentElement    , rfs = // for newer Webkit and Firefox           el.requestFullscreen        || el.webkitRequestFullScreen        || el.mozRequestFullScreen        || el.msRequestFullscreen;if(typeof rfs!="undefined" && rfs){  rfs.call(el);} else if(typeof window.ActiveXObject!="undefined"){  // for Internet Explorer  var wscript = new ActiveXObject("WScript.Shell");  if (wscript!=null) {     wscript.SendKeys("{F11}");  }}

Sources:


This is as close as you can get to full screen in JavaScript:

<script type="text/javascript">    window.onload = maxWindow;    function maxWindow() {        window.moveTo(0, 0);        if (document.all) {            top.window.resizeTo(screen.availWidth, screen.availHeight);        }        else if (document.layers || document.getElementById) {            if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {                top.window.outerHeight = screen.availHeight;                top.window.outerWidth = screen.availWidth;            }        }    }</script>