ในโครงการหน้าต่างเบราว์เซอร์พื้นหลังจะต้องได้รับการคัดกรองอย่างสมบูรณ์นั่นคือเราคลิกปุ่มเพื่อให้ได้ผลของการกดหน้าจอเต็มหน้าจอ F11 ใน HTML5 W3C ได้กำหนด API แบบเต็มหน้าจอซึ่งสามารถบรรลุเอฟเฟกต์เต็มหน้าจอและยังสามารถอนุญาตให้ภาพเต็มหน้าจอวิดีโอ ฯลฯ บนหน้าเว็บเพื่อให้ภาพเต็มหน้าจอรองรับโดย Google Chrome 15+, Safri5.1+, Firfox10+, IE11
เต็มหน้าจอ
var docelm = document.documentelement; // w3c ถ้า (docelm.requestfullscreen) {docelm.requestfullscreen (); } // firefox else ถ้า (docelm.mozrequestfullscreen) {docelm.mozrequestfullscreen (); } // ie11else ถ้า (elem.msrequestfullscreen) {{elem.msrequestfullscreen ();}ออกจากจอเต็มหน้าจอ
if (document.exitfullscreen) {document.exitfullscreen (); } อื่นถ้า (document.mozcancelfullscreen) {document.mozcancelfullscreen (); } อื่นถ้า (document.webkitcancelfullscreen) {document.webkitcancelfullscreen (); } อื่นถ้า (document.msexitfullscreen) {document.msexitfullscreen (); -การฟังเหตุการณ์
document.addeventListener ("FullScreenchange", function () {FullScreenstate.innerhtml = (document.fullscreen)? "": "ไม่";}, เท็จ); document.addeventListener ("mozfullscreenchange", function () {fullscreenstate.innerhtml = (document.mozfullscreen)? "": "ไม่";}, เท็จ); document.addeventListener ("WebKitfullScreenchange", function () {FullScreenstate.innerhtml = (document.webkitisfullscreen)? "": "ไม่";}, เท็จ); document.addeventListener ("msfullscreenchange", function () {fullscreenstate.innerhtml = (document.msfullscreenelement)? "": "ไม่";}, เท็จ);การตั้งค่าสไตล์หน้าจอเต็มรูปแบบ
เรายังสามารถใช้เบราว์เซอร์เต็มหน้าจอเพื่อตั้งค่าสไตล์
html: -moz-full-screen {พื้นหลัง: สีแดง; } html: -webkit-full-screen {พื้นหลัง: สีแดง; } HTML: FullScreen {พื้นหลัง: สีแดง; -ภาคผนวก
1 การสาธิตออนไลน์
http://robnyman.github.io/fullscreen/
2 HTML5 Full Screen API สำหรับฟิชชิ่ง
http://www.36ria.com/5807
ปลั๊กอินเต็มหน้าจอ 3 รายการที่ห่อหุ้มด้วย jQuery
http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
4 การแนะนำ 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 แสดงความแตกต่างใน HTML5 เต็มหน้าจอ API ใน Firefox/Chrome
http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/