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);
}
Changing the 1st line of _isFullScreen function to
fullScreen = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled ? true : false;
Does the trick (at least for Firefox, Chrome and Safari on Mac and Windows)