I am working on a toggle for the JavaScript Fullscreen API. Somehow the exit fullscreen mode (the else statement) in Webkit Browser doesn't work. Can someone hint what is wrong? The code is the example code of the Mozilla Documentation of the fullscreen API. var toggleFullScreen;

toggleFullScreen = function() {
  if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreenElement && !document.webkitFullScreenElement)) {
    if (document.documentElement.requestFullScreen) {
      return document.documentElement.requestFullScreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      return document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullScreen) {
      return document.documentElement.webkitRequestFullScreen();
    } else {
      return console.log("didnt happen");
    }
  } else {
    if (document.cancelFullScreen) {
      console.log("Mozilla Proposal cancels Fullscreen");
      return document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      console.log("Firefox closes");
      return document.mozCancelFullScreen();

// This is the line:

    } else if (document.webkitCancelFullScreen) {
      console.log("Webkit closes");
      return document.webkitCancelFullScreen();
    } else {
      return console.log("Can't close");
    }
  }
};

I am working on a toggle for the JavaScript Fullscreen API. Somehow the exit fullscreen mode (the else statement) in Webkit Browser doesn't work. Can someone hint what is wrong? The code is the example code of the Mozilla Documentation of the fullscreen API. var toggleFullScreen;

toggleFullScreen = function() {
  if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreenElement && !document.webkitFullScreenElement)) {
    if (document.documentElement.requestFullScreen) {
      return document.documentElement.requestFullScreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      return document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullScreen) {
      return document.documentElement.webkitRequestFullScreen();
    } else {
      return console.log("didnt happen");
    }
  } else {
    if (document.cancelFullScreen) {
      console.log("Mozilla Proposal cancels Fullscreen");
      return document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      console.log("Firefox closes");
      return document.mozCancelFullScreen();

// This is the line:

    } else if (document.webkitCancelFullScreen) {
      console.log("Webkit closes");
      return document.webkitCancelFullScreen();
    } else {
      return console.log("Can't close");
    }
  }
};

• javascript
• jquery
• toggle
• fullscreen

• for "webkit browser" you mean chrome or the buggy safari? – Paolo Casciello Commented Aug 13, 2013 at 14:19
• There's several jQuery plugins that helps to simplify fullscreen, might be worth checking into. – Strille Commented Aug 13, 2013 at 14:20
• both safari and chrome. I don't look for a plugin, since the native code is easy to implement. – christophe Commented Aug 13, 2013 at 14:25

2 Answers 2

Here is a decent article that describes how to do this. It's from 2012, but it seems to work.

https://hacks.mozilla/2012/01/using-the-fullscreen-api-in-web-browsers/

Takeaways from the article:

function enterFullscreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen({ navigationUI: "hide" });
    }
    else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen({ navigationUI: "hide" });
    }
    else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    }
    else if (docElm.msRequestFullscreen) {
        docElm.msRequestFullscreen();
    }
}

function exitFullscreen(){
    if (document.exitFullscreen) {
        document.exitFullscreen();
    }
    else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    }
    else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    }
    else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

function setOnFullscreenChange(callback){
    document.addEventListener("fullscreenchange", function () {
        callback();
    }, false);
    
    document.addEventListener("mozfullscreenchange", function () {
        callback();
    }, false);
    
    document.addEventListener("webkitfullscreenchange", function () {
        callback();
    }, false);
    
    document.addEventListener("msfullscreenchange", function () {
        callback();
    }, false);
}

Note that modern versions of firefox do not require the moz prefix.

Also (not from article) to check if fullscreen is enabled

function getIsFullscreenEnabled(){
    return document.fullscreenEnabled 
    || document.webkitFullscreenEnabled;
} // checks if the browser supports fullscreen

function getIsBrowserInFullscreen(){
    return document.fullscreenElement != null 
    || document.webkitFullscreenElement != null;
} //checks if browser is currently in fullscreen mode. Note that document.fullscreen is deprecated

Have a look here http://xme.im/display-fullscreen-website-using-javascript ... This is the page I use when Im referencing fullscreen oriented code... it should help.