Verwenden Sie HTML5 JS, um einen Vollbild-Browsereffekt zu erzielen, indem Sie auf eine Schaltfläche klicken_Javascript-Kenntnisse

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

http://www.36ria.com/5807

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/