نسخة الكود كما يلي:
// الحكم على المتصفحات المختلفة وابحث عن الطريقة الصحيحة
وظيفة showfullscreen (العنصر) {
if (element.requestfullScreen) {
element.requestfullScreen () ؛
} آخر إذا (element.mozrequestfullscreen) {
element.mozrequestfullScreen () ؛
} آخر إذا (element.webkitRequestfullScreen) {
element.WebKitRequestfullScreen () ؛
} آخر إذا (element.msRequestfullScreen) {
element.msRequestfullScreen () ؛
}
}
// ابدأ ملء الشاشة!
SPONFULLSCREEN (document.documentElement) ؛
SPONDFLELSCREEN (document.getElementByid ("VideoElement") ؛
اتصل بأسلوب ملء الشاشة على عناصر الصفحة التي تريد عرضها في ملء الشاشة ، وستصبح نافذة المتصفح ملء الشاشة ، لكن المستخدم سيطلب أولاً المستخدم للسماح بوضع الشاشة. كن على دراية بأن المستخدمين من المحتمل أن يرفضوا وضع ملء الشاشة. إذا قام المستخدم بتشغيل وضع ملء الشاشة ، فسيتم إخفاء شريط أدوات المستعرض وقوائم زر أخرى وستغطي صفحتك الشاشة بأكملها.
الخروج من وضع ملء الشاشة
ستؤدي طريقة ExitfullScreen هذه (والتي تتطلب أيضًا بادئة المتصفح) إلى خروج المتصفح من وضع ملء الشاشة وتصبح الوضع العادي.
نسخة الكود كما يلي:
// تحديد نوع المتصفح
وظيفة exitfullscreen () {
if (document.exitfullScreen) {
document.exitfullScreen () ؛
} آخر if (document.mozcancelfullscreen) {
document.mozcancelfullScreen () ؛
} آخر إذا (document.webkitexitfullscreen) {
document.webkitexitfullScreen () ؛
}
}
// الخروج من وضع ملء الشاشة!
ExitfullScreen () ؛
تجدر الإشارة إلى أنه لا يمكن استدعاء exitfullscreen إلا من قِبل كائن المستند ، بدلاً من الكائن الذي تم تمريره عند بدء تشغيل الشاشة بملء الكامل.
خصائص وأحداث شاشة ملء الشاشة
لسوء الحظ ، تتطلب خصائص شاشة ملء الشاشة والأساليب ذات الصلة للأحداث أيضًا بادئة المتصفح ، لكنني أعتقد أن هذا لن يكون مطلوبًا قريبًا.
1.document.fullScreenElement: عنصر صفحة الويب بملء الشاشة.
2.document.fullScreenAblabled: يحدد ما إذا كان حاليًا في ملء الشاشة.
سيتم تشغيل حدث ملء الشحن عند بدء تشغيل أو خروج شاشة ملء:
نسخة الكود كما يلي:
var fullscreenelement = document.fullScreenElement || document.mozfullscreelement ||
var fullscreenabled = document.fullScreenable
لا يزال بإمكانك بادئة هذا الحدث باستخدام الطريقة المذكورة أعلاه لنوع المتصفح.
ملء الشاشة CSS
توفر المتصفحات المختلفة قاعدة نمط CSS مفيدة للغاية في وضع ملء الشاشة:
انسخ الرمز كما يلي ::-webkit-full-screen {
/* ملكيات */
}
: -moz-full-screen {
/* ملكيات */
}
: -ms-fulllscreen {
/* ملكيات */
}
: شاشة كاملة { / *pre-spec * /
/* ملكيات */
}
: FullScreen { / * spec * /
/* ملكيات */
}
/ * عناصر أعمق */
: -webkit-full-screen video {
العرض: 100 ٪ ؛
الارتفاع: 100 ٪
}
/* تصميم الخلفية*/
:: خلفية {
/* ملكيات */
}
::-MS-Backdrop {
/* ملكيات */
}
في بعض الحالات ، هناك بعض المشكلات في أنماط WebKit ، ومن الأفضل أن تبقي هذه الأنماط بسيطة.
واجهات برمجة التطبيقات على الشاشة الكاملة هذه بسيطة للغاية ومفيدة للغاية. في المرة الأولى التي رأيت فيها واجهة برمجة التطبيقات هذه في عرض MDN's Bananabread ، كانت لعبة إطلاق نار تصادف أن تكون على شاشة كاملة ، والتي استخدمت الحدث للاستماع إلى اكتشاف الحالة على الشاشة بالكامل. تذكر واجهات برمجة التطبيقات المفيدة هذه ، يمكنك التقاطها عندما تحتاج إليها.