HTML5 FullScreen API for JavaScript Switching

Question

I am trying to make a button that will turn on (off / on) HTML5 full-screen mode on a specific website.

After reading a lot of documentation, there still seem to be some inconsistencies between how browsers handle certain properties for it.

I went for a "cross-browser" approach that works in Firefox and Safari / MacOS, partially works in Safari / Windows, and completely doesn't 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); } 

Answer 1

Change 1st line of _isFullScreen to

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

Is there a trick (at least for Firefox, Chrome and Safari on Mac and Windows)

Answer 2

Click handler:

 $("#toolFullScreen").click(function() { goFullScreen(); }); 

Functions:

 function goFullScreen() { var el = document.documentElement, rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen; rfs.call(el); } 

---

Keep in mind that a fullScreen request must be executed through a user-initiated event, such as a click event - mousedown , mouseup , etc.

Answer 3

Based on what I found on the Mozilla Developer Network , the Webkit function is actually written a little differently.

document.webkitRequestFullscreen with lowercase "s" for the screen.

And from the W3 specification , this means that it has a lowercase "s".

On the MDN link, they say:

Note. The specification uses the label "Fullscreen", as in "requestFullscreen" or "fullscreenEnabled" - without capital. The implementation described here and other prefix implementations can use capital S.