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

Question

How can I make a visitor's browser go fullscreen using JavaScript, in a way that works with IE, Firefox and Opera?

Answer 1

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