No projeto, a janela do navegador em segundo plano precisa ser totalmente rastreada, ou seja, clicamos em um botão para alcançar o efeito de pressionar a tela cheia do F11. No HTML5, o W3C formulou uma API em tela cheia, que pode obter efeitos de tela cheia e também pode permitir imagens de tela cheia, vídeos etc. na página para ter imagens de tela completa atualmente suportadas pelo Google Chrome 15+, Safri5.1+, Firfox10+, IE11.
tela cheia
var docElm = document.documentElement; // w3c if (docelm.requestfullscreen) {docelm.requestfullScreen (); } // firefox else if (docelm.mozRequestfullScreen) {docelm.mozRequestfullScreen (); } // ie11else if (elem.msRequestfullScreen) {{elem.msRequestfullScreen ();}Saia de tela cheia
if (document.exitfullscreen) {document.exitfullScreen (); } else if (document.mozcancelfullscreen) {document.mozcancelfullscreen (); } else if (document.webkitcancelfullcreen) {document.webkitcancelfullscreen (); } else if (document.msexitfullScreen) {document.msexitfullScreen (); }Escuta de eventos
document.addeventListener ("fullscreennchange", function () {fullscreenstate.innerhtml = (document.fullscreen)? "": "não";}, false); document.addeventlistener ("mozfullScreennchange", function () {fullscreenstate.innerhtml = (document.mozfullscreen)? "": "não";}, false); document.addeventListener ("webkitfullscreennchange", function () {fullscreenstate.innerhtml = (document.webkitisfullcreen)? "": "não";}, false); document.addeventListener ("msfullScreennchange", function () {fullscreenstate.innerhtml = (document.msfullscreenElement)? "": "não";}, false);Configurações de estilo de tela cheia
Também podemos usar o navegador de tela inteira para definir estilos
html: -moz-full-screen {background: vermelho; } html: -webkit-full-screen {background: Red; } html: tela cheia {Background: Red; }apêndice
1 demonstração online
http://robnyman.github.io/fullscreen/
2 HTML5 API de tela cheia para phishing
http://www.36ria.com/5807
3 plug-in em tela cheia encapsulada por jQuery
http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
4 API de tela cheia mais detalhada Introdução
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 Exibir diferenças na API de tela cheia HTML5 no Firefox/Chrome
http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/