Gunakan HTML5 JS untuk mencapai efek layar penuh mengklik tombol

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/