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);
}
To enable a full-screen view on a user's browser, you will first need to ask for permission to do so with the Element. requestFullScreen function.
The fastest way to run Google Chrome in full-screen mode is to press the F11 key on your keyboard.
function goFullScreen() {
const el = document.documentElement,
rfs = el.requestFullScreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
|| el.msRequestFullscreen
rfs.call(el)
}
document.querySelector('#full-screen-button')
.addEventListener('click', () => {
goFullScreen()
})
Keep in mind that requesting fullScreen
needs to be done via a user-triggered event such as a click event - mousedown
,mouseup
etc..
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With