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/)


Related articles: