مетод requestFullscreen() الخاص بـ API Fullscreen
- الصفحة السابقة fullscreenEnabled()
- الصفحة التالية exitFullscreen()
- العودة إلى الطبقة السابقة واجهة API Fullscreen في JavaScript
التعريف والاستخدام
requestFullscreen() الطريقة لفتح العنصر في الوضع الكامل الشاشة.
إشارة:استخدم طريقة exitFullscreen()إلغاء الوضع الكامل الشاشة.
مثال
مثال 1
عرض عناصر <video> في الوضع الكامل الشاشة:
/* الحصول على العنصر الذي سيتم عرضه في الوضع الكامل الشاشة (في هذا المثال فيديو):*/
var elem = document.getElementById("myvideo");
/* عند تنفيذ دالة openFullscreen()، يفتح الفيديو في الوضع الكامل الشاشة.
لاحظ أننا يجب أن نضم بدائل متصفحات مختلفة لأنها لا تدعم الخاصية requestFullscreen */
function openFullscreen() {
إذا كان elem.requestFullscreen) {
elem.requestFullscreen();
} آخر إذا كان elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} آخر إذا كان elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
مثال 2
لإطلاق صفحة HTML كاملة الشاشة، استخدم document.documentElement بدلاً من document.getElementById("element"). في هذا المثال، استخدمنا أيضًا دالة إغلاق لتغليق الوضع الكامل الشاشة:
/* الحصول على documentElement (<html>) لعرض الصفحة بالشاشة الكاملة */
var elem = document.documentElement;
/* عرض الشاشة الكاملة */
function openFullscreen() {
إذا كان elem.requestFullscreen) {
elem.requestFullscreen();
} آخر إذا كان elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} آخر إذا كان elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
/* إغلاق الشاشة الكاملة */
function closeFullscreen() {
إذا كان document.exitFullscreen) {
document.exitFullscreen();
} آخر إذا كان document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} آخر إذا كان document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
مثال 3
عندما تكون الصفحة في وضع الشاشة الكاملة، يمكنك أيضًا استخدام CSS لتعيين نمط الصفحة:
/* نحو Safari */
-webkit-full-screen {
background-color: yellow;
}
/* نحو IE11 */
-ms-fullscreen {
background-color: yellow;
}
/* نحو معياري */
:fullscreen {
background-color: yellow;
}
النحو
HTMLElementObject.requestFullscreen()
المتغيرات
لا يوجد.
تفاصيل التقنية
| القيمة العائدة: | لا يوجد قيمة عائدة. |
|---|
دعم المتصفح
الرقم في الجدول يشير إلى إصدار المتصفح الأول الذي يدعم هذه الطريقة بشكل كامل.
التعليقات:بعض المتصفحات تحتاج إلى ما قبل الفاصلة المزدوجة المحددة (انظر في البارانtheses):
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 71.0 15.0 (webkit) |
79.0 11.0 (ms) |
64.0 9.0 (moz) |
6.0 (webkit) | 58.0 15.0 (webkit) |
- الصفحة السابقة fullscreenEnabled()
- الصفحة التالية exitFullscreen()
- العودة إلى الطبقة السابقة واجهة API Fullscreen في JavaScript
