Dalam proyek, jendela Browser Latar Belakang perlu diputar sepenuhnya, yaitu, kami mengklik tombol untuk mencapai efek menekan layar penuh F11. Dalam HTML5, W3C telah merumuskan API layar penuh, yang dapat mencapai efek layar penuh, dan juga dapat memungkinkan gambar layar penuh, video, dll. Pada halaman memiliki gambar layar penuh yang saat ini hanya didukung oleh Google Chrome 15+, Safri5.1+, Firfox10+, IE11.
layar penuh
var docelm = document.documentElement; // w3c if (docelm.requestfullscreen) {docelm.requestfullscreen (); } // firefox else if (docelm.mozrequestfullscreen) {docelm.mozrequestfullscreen (); } // ie11else if (elem.msrequestfullscreen) {{elem.msrequestfullscreen ();}Keluar dari layar penuh
if (document.exitfullscreen) {document.exitfullscreen (); } else if (document.mozcancelfullscreen) {document.mozcancelfullscreen (); } else if (document.webkitcancelfullscreen) {document.webkitcancelfullscreen (); } else if (document.msexitfullscreen) {document.msexitfullscreen (); }Mendengarkan acara
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)? "": "tidak";}, false); document.addeventListener ("msfullscreenchange", function () {fullscreenstate.innerhtml = (document.msfullScreeNeLement)? "" ":" not ";}, false);Pengaturan Gaya Layar Penuh
Kami juga dapat menggunakan browser layar penuh untuk mengatur gaya
html: -moz-full-screen {latar belakang: merah; } html: -webkit-full-screen {latar belakang: merah; } html: fullscreen {latar belakang: merah; }lampiran
1 demo online
http://robnyman.github.io/fullscreen/
2 HTML5 API Layar Lengkap untuk phishing
http://www.36ria.com/5807
3 plug-in layar penuh yang dienkapsulasi oleh jQuery
http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
4 Pendahuluan API layar penuh yang lebih terperinci
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 Perbedaan tampilan dalam API layar penuh HTML5 di Firefox/Chrome
http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-diference/