Dans le projet, nous devons rendre la fenêtre du navigateur en arrière-plan en plein écran, c'est-à-dire que nous cliquons sur un bouton pour obtenir l'effet plein écran en appuyant sur F11. En HTML5, le W3C a développé une API plein écran, qui peut obtenir des effets plein écran, et peut également créer des images, des vidéos, etc. sur la page en plein écran. Actuellement, seuls Google Chrome 15, safri5.1, firfox10, et prise en charge d'IE11
Plein écran
var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm.requestFullscreen(); } //FireFox else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } //Chrome等 else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } //IE11 else if (elem.msRequestFullscreen) { elem.msRequestFullscreen(); }
Quitter le plein écran
if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); }
Surveillance des événements
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);
Paramètres de style plein écran
Nous pouvons également définir le style lors de l'utilisation du navigateur en plein écran
html:-moz-full-screen { background: red; } html:-webkit-full-screen { background: red; } html:fullscreen { background: red; }
Annexe
1 Une démo en ligne
http://robnyman.github.io/fullscreen/
2 Phishing API plein écran HTML5
3 Plugin plein écran encapsulé par jquery
http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
4 Une introduction plus détaillée à l'API plein écran
4.1 https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
4.2 https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
5 Différences d'affichage de l'API plein écran HTML5 dans FireFox/Chrome
http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/