Dans le projet, la fenêtre du navigateur d'arrière-plan doit être entièrement dépistée, c'est-à-dire que nous cliquons sur un bouton pour réaliser l'effet de l'appuyer sur le plein écran F11. Dans HTML5, W3C a formulé une API plein écran, qui peut réaliser des effets à écran complet, et peut également permettre des images, des vidéos, etc. sur la page pour avoir des images à écran complet uniquement prises en charge uniquement par Google Chrome 15+, Safri5.1 +, Firfox10 +, IE11.
plein écran
var docelm = document.DocumentElement; // w3c if (docelm.requestfullScreen) {docelm.requestfullScreen (); } // firefox else if (docelm.mozrequestfullScreen) {docelm.mozrequestfullScreen (); } // ie11else if (elem.msRequestfullScreen) {{elem.msRequestfullScreen ();}Sortir en 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 (); }Écoute d'événements
document.addeventListener ("fullScreenchange", function () {fullScreenState.innerHtml = (document.fullScreen)? "": "pas";}, false); document.addeventListener ("mozfullScreenchange", function () {fullScreenState.InnerHtml = (document.mozfullScreen)? "": "pas";}, false); document.addeventListener ("webKitfullScreenchange", function () {fullScreenState.innerHtml = (document.webKitisfullScreen)? "": "pas";}, false); document.addeventListener ("msfullScreenchange", function () {fullScreenState.innerHtml = (document.msfullScreenelement)? "": "pas";}, false);Paramètres de style plein écran
Nous pouvons également utiliser le navigateur plein écran pour définir des styles
html: -moz-full-écran {fond: rouge; } html: -webkit-full-écran {fond: rouge; } html: plein écran {fond: rouge; }appendice
1 démo en ligne
http://robnyman.github.io/fullscreen/
2 API plein écran HTML5 pour le phishing
http://www.36ria.com/5807
3 plug-in plein écran encapsulé par jQuery
http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
4 Introduction API à écran complet plus détaillé
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 Afficher les différences dans l'API pleine écran HTML5 dans Firefox / Chrome
http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/