تم تجميع HTML5 مع عدد كبير من ميزات واجهة برمجة التطبيقات وكان أحد أفضلها هو واجهة برمجة تطبيقات Fullscreen التي توفر طريقة أصلية للمتصفح للقيام بما هو ممكن فقط في الفلاش لفترة طويلة: عرض صفحة الويب في وضع ملء الشاشة للمستخدم.
يأتي هذا في متناول اليد إذا كنت تعرض الفيديو ، أو الصور ، أو إذا كنت تقوم بتطوير لعبة. في الواقع ، يمكن أن يستفيد أي محتوى يجب التركيز عليه من واجهة برمجة تطبيقات Fullscreen.
وأفضل ما في الأمر أن واجهة برمجة تطبيقات Fullscreen سهلة الاستخدام حقًا ...
هناك عدد من الطرق التي تعد جزءًا من واجهة برمجة تطبيقات Fullscreen:
element.requestFullScreen()تسمح هذه الطريقة بعنصر واحد للدخول إلى وضع ملء الشاشة.
Document.getElementById(“myCanvas”).requestFullScreen()سيؤدي ذلك إلى استخدام لوحة الرسم مع id 'myCanvas' في وضع ملء الشاشة.
document.cancelFullScreen()هذا ببساطة الخروج من وضع ملء الشاشة والعودة إلى عرض المستند.
Document.fullScreenسيعود هذا صحيحًا إذا كان المستخدم في وضع ملء الشاشة.
document.fullScreenElementإرجاع العنصر الموجود حاليًا في وضع ملء الشاشة.
لاحظ أن هذه هي الطرق القياسية ولكن في الوقت الحالي ، ستحتاج إلى بادئات بائع لجعل هذا العمل في Chrome و Firefox و Safari (لا يدعم Internet Explorer و Opera واجهة برمجة التطبيقات هذه في الوقت الحالي).
منذ البداية ، نحتاج إلى معرفة الطريقة التي يتعرف عليها المتصفح ، حيث سننشئ وظيفة ستعثر على الطريقة الصحيحة للمتصفح وتدعوه:
//helper functionfunction fullScreen(element) {if(element.requestFullScreen) {element.requestFullScreen();} else if(element.webkitRequestFullScreen ) {element.webkitRequestFullScreen();} else if(element.mozRequestFullScreen) {element.mozRequestFullScreen();}}كما ترى كل هذه الوظيفة هي معرفة ما إذا كان أي من أساليب requestFullScreen بإرجاع true ومن ثم يقوم باستدعاء الدالة للمتصفح الصحيح باستخدام بادئة البائع الخاصة به.
بعد كل هذا ، كل ما علينا فعله هو استدعاء وظيفة fullScreen مثل:
//for the whole pagevar html = document.documentElement;fullScreen(html); // For a specific element on the pagevar canvas = document.getElementById('mycanvas');fullScreen(canvas);سيؤدي هذا إلى إرسال رسالة مطالبة إلى المستخدم تطلب الإذن بالانتقال إلى وضع ملء الشاشة ، إذا تم قبولها فسوف تختفي جميع أشرطة الأدوات في المتصفح وسيكون الشيء الوحيد على الشاشة هو صفحة الويب المطلوبة أو العنصر المفرد.
تتطلب هذه الطريقة أيضًا بادئات البائعين ، لذا سنستخدم نفس الفكرة الواردة أعلاه وننشئ دالة تحدد البادئة التي يجب استخدامها وفقًا لمتصفح المستخدم.
هناك شيء واحد ستلاحظه هو أن هذه الطريقة لا تحتاج إلى أي عناصر تم تمريرها لأنها بخلاف أسلوب requestFullScreen ، فإنها تنطبق دائمًا على المستند بأكمله.
// the helper functionfunction fullScreenCancel() {if(document.requestFullScreen) {document.requestFullScreen();} else if(document .webkitRequestFullScreen ) {document.webkitRequestFullScreen();} else if(document .mozRequestFullScreen) {document.mozRequestFullScreen();}}//cancel full-screenfullScreenCancel();تم جمع هذه البيانات باستخدام واجهة برمجة تطبيقات جافا سكريبت هذه ، وهي عبارة عن فئة شبه زائفة من CSS تسمى: ملء الشاشة ، ويمكن استخدام هذا الأسلوب لإدراج أي عناصر في صفحة الويب عندما يكون في وضع ملء الشاشة ، وهذا يمكن أن يكون مفيدًا نظرًا لزيادة حجم المتصفح قليلاً عند وضع ملء الشاشة.
/* Changing something in the body */:-webkit-full-screen {font-size: 16px;}:-moz-full-screen {font-size: 16px;}/*Only one element*/:-webkit-full-screen img {width: 100%;height: 100%;}:-moz-full-screen img {width: 100%;height: 100%;}اعلم أنه لا يمكنك فصل بادئات المورّد باستخدام الفواصل لأن المتصفح لن يقرأها:
/* This will not work */:-webkit-full-screen img,:-moz-full-screen img {width: 100%;height: 100%;}لكي يتم تطبيق الأنماط بشكل صحيح ، يجب أن تضع كل بادئة بائع في قالب خاص بها.
واجهة برمجة تطبيقات جافا سكريبت هذه هي واحدة من أقل التطبيقات المعروفة التي يتم شحنها مع HTML5 ، ولكن في رأيي أنها فعالة وسهلة التنفيذ. وتجدر الإشارة إلى أن تجربة المستخدم المحسّنة في التركيز على عنصر واحد ، خاصة بالنسبة إلى الفيديو والصور والألعاب ، تستحق الكثير من الأسطر القليلة من التعليمات البرمجية المعنية.
هل نفذت واجهة برمجة تطبيقات Fullscreen في أي مكان؟ ما هي الاستخدامات التي يمكنك التفكير بها؟ اسمحوا لنا أن نعرف في التعليقات.