Fullscreen API in webkit browser

Question

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");
    }
  }
};

There's several [jQuery plugins](https://github.com/kayahr/jquery-fullscreen-plugin) that helps to simplify fullscreen, might be worth checking into. — Strille, Aug 13 '13 at 14:20
both safari and chrome. I don't look for a plugin, since the native code is easy to implement. — christophe, Aug 13 '13 at 14:25

score 2 · Accepted Answer · answered Aug 13 '13 at 14:23

2

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.

answered Aug 13 '13 at 14:23

Brand

109
3

That link does not work any longer. DNS probe cannot find it. Has it possibly been moved? – José Mancharo Jul 12 '21 at 22:47

José Mancharo · Answer 2 · 2021-07-12T23:10:11.423

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

https://hacks.mozilla.org/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

Fullscreen API in webkit browser

2 Answers2