function toggleFullScreen() {
if (!document.fullscreenElement && !document.mozFullScreenElement
&& !document.webkitFullscreenElement
&& !document.msFullscreenElement) {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement
.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
Understand a javascript code snippet
-1
Hello, I was wondering if anyone could explain this piece of code to me, it activates Fullscreen mode of browsers, however I wanted to understand it and also wanted to know if the "document.fullscreenElement" is something native or something created by the person what did you do?
asked by anonymous 18.03.2017 / 18:18
1 answer
2
Properties with and without prefixes
-
The
document.fullscreenElement,requestFullscreenanddocument.exitFullscreenare native, but only newer browsers support it
The -
document.webkitFullscreenElement,webkitRequestFullscreen, anddocument.mozCancelFullScreenare native to outdated Chrome and Safari browsers (probably still supported for backward compatibility),webkitis a prefix used for experimental features in Webkit browsers or features that only exist in these browsers, CSS in Blink and Webkit also uses-webkitas a prefix -
The
document.msFullscreenElement,msRequestFullscreenanddocument.msExitFullscreenare used by the only IE11 browser
document.mozFullScreenElement , mozRequestFullScreen and document.exitFullscreen are native to older browsers with Mozilla technology, such as out-of-date Firefox browsers (probably still supported for backwards compatibility), moz is a used prefix for experimental features in Mozilla browsers or features that only exist in these browsers, CSS in Mozilla also uses -moz as a prefix
The use of document.fullscreenElement
The properties document.fullscreenElement , document.mozFullScreenElement , document.webkitFullscreenElement and document.msFullscreenElement , return the element that is in fullscreen, if it does not have anything in fullscreen it will return null , in case your code is being used for check if you have nothing in fullscreen to execute the code, then it will execute document.exitFullscreen (or with prefixes)
The reason for using prefixes moz, ms, webkit
Today almost all browsers use only document.fullscreenElement , the code you're using is what we call backward compatibility or reverse compatibility , it's a term often used in console but it is fully valid for almost anything, the purpose of backward compatibility is to support older technologies, perhaps the user has an older browser, or a computer that does not support newer browsers.
18.03.2017 / 19:20