html5 toggle,html - HTML5 FullScreen API toggle with JavaScript - Stack Overflow

I am trying to make a button that would toggle (on/off) HTML5 fullscreen on a certain website.

After reading plenty of documentation, it appears there still are some inconsistencies among how browsers treat certain properties for it.

I went for kind of "cross-browser" approach which does work in Firefox and Safari/MacOS, partially works in Safari/Windows and totally fails to work in Chrome and Opera.

Some castrated code snippets:

// class init

initialize: function() {

this.elmButtonFullscreen = $('fullscreen');

this.elmButtonFullscreen.on('click', this.onClickFullscreen.bindAsEventListener(this));

},

// helper methods

_launchFullScreen: function(element) {

if(element.requestFullScreen) { element.requestFullScreen(); }

else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); }

else if(element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); }

},

_cancelFullScreen: function() {

if(document.cancelFullScreen) { document.cancelFullScreen(); }

else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); }

else if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); }

},

_isFullScreen: function() {

fullScreen = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled ? true : false;

if(this.debug) console.log('Fullscreen enabled? ' + fullScreen);

return fullScreen;

},

// callbacks

onClickFullscreen: function(e) {

e.stop();

if(this._isFullScreen()) this._cancelFullScreen();

else this._launchFullScreen(document.documentElement);

}