كيفية تحقيق الشاشة الكاملة

تعلم كيفية إنشاء نافذة الشاشة الكاملة باستخدام JavaScript.

نافذة الشاشة الكاملة

كيفية عرض العناصر بالشاشة الكاملة باستخدام JavaScript.

انقر على الزر لفتح الفيديو بالشاشة الكاملة:

جربها بنفسك

فيديو الشاشة الكاملة

لفتح العنصر بالشاشة الكاملة، نستخدم element.requestFullscreen() الطريقة:

مثال

<script>
/* الحصول على العنصر الذي سيتم عرضه بالشاشة الكاملة (في هذا المثال فيديو): */
var elem = document.getElementById("myvideo");
/* عند تنفيذ دالة openFullscreen()، افتح الفيديو في الشاشة الكاملة. */
ملاحظة، يجب أن نضم بدائل مسبقة للبrowsers المختلفة لأنها لا تدعم طريقة requestFullscreen */
وظيفة openFullscreen() {
  إذا كان elem.requestFullscreen) {
    elem.requestFullscreen();
  } آخر إذا كان elem.webkitRequestFullscreen) { /* سفاري */
    elem.webkitRequestFullscreen();
  } آخر إذا كان elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
</script>

جربها بنفسك

مستند الشاشة الكاملة

لفتح الصفحة بأكملها في الشاشة الكاملة، استخدم document.documentElement بديلاً عن document.getElementById("element")。

في هذا المثال، نستخدم أيضًا دالة إغلاق لتغليق الشاشة الكاملة：

مثال

<script>
/* الحصول على documentElement (<html>) لعرض الصفحة بالكامل الشاشة */
العدد elem = document.documentElement;
/* عرض الشاشة الكاملة */
وظيفة openFullscreen() {
  إذا كان elem.requestFullscreen) {
    elem.requestFullscreen();
  } آخر إذا كان elem.webkitRequestFullscreen) { /* سفاري */
    elem.webkitRequestFullscreen();
  } آخر إذا كان elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* الخروج من الشاشة الكاملة */
وظيفة closeFullscreen() {
  إذا كان document.exitFullscreen) {
    document.exitFullscreen();
  } آخر إذا كان document.webkitExitFullscreen) { /* سفاري */
    document.webkitExitFullscreen();
  } آخر إذا كان document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script>

عندما تكون الصفحة في نمط الشاشة الكاملة، يمكنك أيضًا استخدام CSS لتحديد نمط الصفحة:

مثال

/* سفاري */
:-webkit-full-screen {
  background-color: yellow;
}
/* IE11 */
:-ms-fullscreen {
  background-color: yellow;
}
/* синтكس المعيارية */
:fullscreen {
  background-color: yellow;
}

جربها بنفسك

الصفحات ذات الصلة

دليل مرجع HTML DOM:طريقة requestFullscreen()

دليل مرجع HTML DOM:طريقة exitFullscreen()

دليل مرجع HTML DOM:طريقة documentElement