browser - How can we programmatically enter and exit the fullscreen mode in javascript?

Question

Here's documentation on exiting fullscreen mode.

I used this code that I learnd to make the browser go fullscreen (it works), but my attempts to modify a version of it to exit fullscreen failed. Dealing with these non-standard APIs is a little tricky, with each browser implementing it a bit differently.

Here's the code:

// Bring the page into full-screen mode - Works!
function requestFullScreen(element) {

    // Supports most browsers and their versions.
    var requestMethod = element.requestFullScreen || 
        element.webkitRequestFullScreen           || 
        element.mozRequestFullScreen              || 
        element.msRequestFullScreen;
    if (requestMethod) {
        requestMethod.call(element);
    } else if ( typeof window.ActiveXObject !== "undefined") {
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}

// Exit fullscreen - Doesn't work!
function exitFullScreen(element){
    var requestMethod = element.exitFullscreen || 
        element.mozCancelFullScreen            || 
        element.webkitExitFullscreen           || 
        element.msExitFullscreen;
    if (requestMethod) {
        requestMethod();
    } else {
        console.log("Oops. Request method false.");
    }
}

And the calls:

var $fullscreenButton = $("#fullscreen-button");
var $smallscreenButton = $("#smallscreen-button");

$fullscreenButton.on("click", function() {
    var elem = document.body;

    // Make the body go full screen.
    requestFullScreen(elem);
});

$smallscreenButton.on("click", function() {
    var elem = document.body;

    // Exit full screen.
    exitFullScreen(elem);
});

What's wrong with the exitFullScreen function? How can I fix it?

Edit:

• I'm working on a JSFiddle for this!
• By "Doesn't work", I meant that it outputs "Oops. Request method false."
• I'm calling the function exitFullScreen() with the parameter document.body

JSFiddle:

While the full screen request function works for me in the browser normally, I could not get it to work in JSFiddle, and I'm unsure whether this is because of my own mistake, or something to do with JSFiddle.

Answer 1

For entering the fullscreen there were some issues with the capitalization.

For the exiting you need to call it on the document and not on the body, and you also need to apply it correctly instead of calling the reference to the method..

so requestMethod.call(element); for exiting as well.

See demo at http://jsfiddle.net/gaby/FGX72/show
(tested on latest IE/Chrome/FireFox)