Im Projekt muss das Fenster des Hintergrundbrowsers vollständig geschrieben werden, dh klicken wir auf eine Schaltfläche, um den Effekt des Drückens des F11 -Vollbilds zu erreichen. In HTML5 hat W3C eine Full-Screen-API formuliert, die Vollbild-Effekte erzielen kann und auch Vollbild-Bilder, -Videos usw. auf der Seite ermöglichen kann, um vollständige Bildschirmbilder zu haben, die derzeit nur von Google Chrome 15+, SAFRI5.1+, FIRFOX10+, IE11 unterstützt werden.
Vollbild
var docelm = document.documentElement; // w3c if (docelm.RequestfulScreen) {docelm.Requestfullreencreen (); } // Firefox else if (docelm.mozRequestfullscreen) {docelm.mozRequestfulScreen (); } // Ie11Else if (Elem.msRequestfullscreen) {{Elem.msRequestfulScreen ();};Vollbild beenden
if (document.exitfulScreen) {document.exitfullscreen (); } else if (document.mozcancelfulscreen) {document.mozcancelfulscreen (); } else if (document.webkitcancelfulscreen) {document.webkitcancelfulscreen (); } else if (document.msexitfullscreen) {document.msexitfullscreen (); }Ereignishören
document.adDeVentListener ("fullscreenchange", function () {fullscreenState.innerhtml = (document.fullScreen)? "": "Nicht";}, false); document.adDeVentListener ("MozfullScreenchange", function () {fullscreenState.innnerhtml = (document.mozfullscreen)? "": "Nicht";}, false); document.adDeVentListener ("webkitfullScreenchange", function () {fullscreenState.innnerhtml = (document.webkitisiNlullscreen)? "": "Not";}, false); document.adDeVentListener ("msfulScreenchange", function () {fullscreenState.innerhtml = (document.msFullScreenElement)? "": "Nicht";}, false);Einstellungen zum Vollbildstil -Stil
Wir können auch den Vollbildbrowser verwenden, um Stile festzulegen
html: -moz-full-Screen {Hintergrund: rot; } html: -webkit-full-Screen {Hintergrund: rot; } html: fullscreen {Hintergrund: rot; }Anhang
1 Online -Demo
http://robnyman.github.io/fullscreen/
2 HTML5 Vollbild -API zum Phishing
http://www.36ria.com/5807
3 von JQuery eingekapselte Vollbild-Plug-in
http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
4 Weitere detaillierte Vollbild-API-Einführung
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 Zeigen Sie Unterschiede in der HTML5 -Vollbild -API in Firefox/Chrome anzeigen
http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/