Im Projekt müssen wir das Hintergrundbrowserfenster im Vollbildmodus anzeigen, das heißt, wir klicken auf eine Schaltfläche, um den Vollbildeffekt durch Drücken von F11 zu erzielen. In HTML5 hat W3C eine Vollbild-API entwickelt, die Vollbildeffekte erzielen und auch Bilder, Videos usw. auf der Seite im Vollbildmodus erstellen kann. Derzeit sind nur Google Chrome 15, safri5.1, firfox10, verfügbar. und IE11-Unterstützung
Vollbild
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(); }
Vollbildmodus verlassen
if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); }
Ereignisüberwachung
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);
Einstellungen für den Vollbildstil
Wir können den Stil auch festlegen, wenn wir den Browser im Vollbildmodus verwenden
html:-moz-full-screen { background: red; } html:-webkit-full-screen { background: red; } html:fullscreen { background: red; }
Anhang
1 Eine Online-Demo
http://robnyman.github.io/fullscreen/
2 HTML5-Vollbild-API-Phishing
3 Vollbild-Plug-in gekapselt durch jquery
http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
4 Eine detailliertere Einführung in die Vollbild-API
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 Anzeigeunterschiede der HTML5-Vollbild-API in Firefox/Chrome
http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/