Using html5 js to achieve a button click to achieve the browser full screen effect
- 2020-03-30 03:06:02
- OfStack
Full screen
var docElm = document.documentElement;
//W3C
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome etc.
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//IE11
else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
Exit full screen
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
Event listeners
document.addEventListener("fullscreenchange", function () {
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";}, false);
document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";}, false);
document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";}, false);
document.addEventListener("msfullscreenchange", function () {
fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";}, false);
Full screen style Settings
We can also set the style for full-screen use in the browser
html:-moz-full-screen {
background: red;
}
html:-webkit-full-screen {
background: red;
}
html:fullscreen {
background: red;
}
The appendix
1 an online Demo
(link: http://robnyman.github.io/fullscreen/)
2 HTML5 full screen API phishing
(link: http://www.36ria.com/5807)
3 Jquery encapsulation of the full screen plug-in
(link: http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/)
4 More detailed full screen API introduction
4.1 (link: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode)
4.2 (link: https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html)
5 HTML5 full screen apis show differences in FireFox/Chrome
(link: http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/)