En el proyecto, la ventana del navegador de fondo debe estar completamente proyectada, es decir, hacemos clic en un botón para lograr el efecto de presionar la pantalla completa F11. En HTML5, W3C ha formulado una API de pantalla completa, que puede lograr efectos de pantalla completa, y también puede permitir que las imágenes de pantalla completa, los videos, etc. en la página tengan imágenes de pantalla completa que actualmente solo compatible con Google Chrome 15+, SAFRI5.1+, FIRFOX10+, IE11.
pantalla completa
var docelm = document.documentElement; // w3c if (docelm.RequestFullScreen) {DocelM.RequestFullScreen (); } // Firefox else if (DocelM.MozRequestFulLScreen) {DocelM.MozRequestFullScreen (); } // ie11else if (elem.msRequestfullScreen) {{elem.msRequestFullScreen ();}Salir pantalla completa
if (document.exitfullScreen) {document.exitfullScreen (); } else if (document.mozCancelfullScreen) {document.mozCancelfullscreen (); } else if (document.webkitcancelfullscreen) {document.webkitcancelfullscreen (); } else if (document.msexitfulLscreen) {document.msexitfulLscreen (); }Evento de escucha
document.adDeventListener ("fullscreenchange", function () {fullscreenState.innerhtml = (document.fullScreen)? "": "no";}, falso); document.adDeventListener ("mozfullscreenchange", function () {fullscreenstate.innerhtml = (document.mozfullScreen)? "": "no";}, falso); document.adDeventListener ("webkitfullScreenchange", function () {fullscreenstate.innerhtml = (document.webkitisfullscreen)? "": "no";}, falso); document.adDeventListener ("msfulLsCreenchange", function () {fullscreenState.innerhtml = (document.msfullScreenElement)? "": "no";}, falso);Configuración de estilo de pantalla completa
También podemos usar el navegador de pantalla completa para establecer estilos
html: -Moz-Full-Screen {fondo: rojo; } html: -webkit-full-screen {fondo: rojo; } html: Fullscreen {fondo: rojo; }apéndice
1 demostración en línea
http://robnyman.github.io/fullscreen/
2 API de pantalla completa HTML5 para phishing
http://www.36ria.com/5807
3 complementos de pantalla completa encapsulado por jQuery
http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
4 Introducción de API de pantalla completa más detallada
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 Diferencias de visualización en la API de pantalla completa HTML5 en Firefox/Chrome
http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/