في المشروع ، تحتاج نافذة متصفح الخلفية إلى فحصها بالكامل ، أي أن نقر الزر لتحقيق تأثير الضغط على الشاشة F11. في HTML5 ، قامت W3C بصياغة واجهة برمجة تطبيقات كاملة على الشاشة ، والتي يمكنها تحقيق تأثيرات كاملة ، ويمكن أن تسمح أيضًا للصور ومقاطع الفيديو على الشاشة كاملة ، وما إلى ذلك على الصفحة ، على شاشة كاملة فقط تدعمها Google Chrome 15+ ، Safri5.1+، Firfox10+، IE11.
ملء الشاشة
var docelm = document.documentElement ؛ // w3c if (docelM.RequestfullScreen) {docelM.RequestfullScreen () ؛ } // firefox else if (docelM.MozRequestfullScreen) {docelM.MozRequestfullScreen () ؛ } // ie11else if (elem.msRequestfullScreen) {{elem.msRequestfullScreen () ؛}الخروج ملء الشاشة
if (document.exitfullScreen) {document.exitfullScreen () ؛ } if if (document.mozcancelfullscreen) {document.mozcancelfullScreen () ؛ } if if (document.webkitCancelFullScreen) {document.webkitCanCelfullScreen () ؛ } آخر if (document.msexitfullScreen) {document.msexitfullScreen () ؛ }الاستماع الحدث
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) ؛إعدادات نمط ملء الشاشة
يمكننا أيضًا استخدام متصفح شاشة ملء الشاشة لتعيين الأنماط
html: -moz-full-screen {background: red ؛ } html: -webkit-full-screen {background: red ؛ } html: fullscreen {background: red ؛ }زائدة
1 التوضيح عبر الإنترنت
http://robnyman.github.io/fullscreen/
2 HTML5 ملء الشاشة واجهة برمجة تطبيقات للتصيد
http://www.36ria.com/5807
3 شاشة كاملة مكون من قبل jQuery
http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
4 مقدمة أكثر تفصيلًا على شاشة كاملة
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 عرض الاختلافات في API HTML5 بملء الشاشة في Firefox/Chrome
http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/