Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 629
WebDeveloper404 Avatar asked Aug 03 '14 23:08

WebDeveloper404


People also ask

How do I exit fullscreen mode?

Using the F11 key on your computer's keyboard will let you both enter and exit full-screen mode in many applications. If you use a laptop, you might need to press Fn + F11 to activate this keyboard shortcut.

How do I exit full screen in HTML?

exitFullscreen() The Document method exitFullscreen() requests that the element on this document which is currently being presented in fullscreen mode be taken out of fullscreen mode, restoring the previous state of the screen.

What is Full screen API?

The Fullscreen API adds methods to present a specific Element (and its descendants) in fullscreen mode, and to exit fullscreen mode once it is no longer needed.

Which function is used for making the website fullscreen?

requestFullscreen() (currently prefixed in Chrome, Firefox, and IE) displays the element in fullscreen mode. document. exitFullscreen() (currently prefixed in Chrome, Firefox and IE. Firefox uses cancelFullScreen() instead) cancels fullscreen mode.


1 Answers

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)

like image 173
Gabriele Petrioli Avatar answered Nov 05 '22 19:11

Gabriele Petrioli