چگونه می‌توان تمام‌صفحه را اجرا کرد

یادگیری چگونه با استفاده از JavaScript پنجره تمام‌صفحه ایجاد کنید.

پنجره تمام‌صفحه

چگونه می‌توانید با استفاده از JavaScript عناصر را به حالت تمام‌صفحه مشاهده کنید.

برای باز کردن ویدئو به حالت تمام‌صفحه، روی دکمه کلیک کنید:

آزمایش کنید

ویدئو تمام‌صفحه

برای باز کردن عنصر به حالت تمام‌صفحه، ما از element.requestFullscreen() روش:

مثال

<script>
/* عناصری که باید به حالت تمام‌صفحه نمایش داده شوند را دریافت می‌کنیم (در این مثال ویدئو): */
var elem = document.getElementById("myvideo");
/* هنگام اجرای تابع openFullscreen()، ویدئو را به حالت تمام‌صفحه باز می‌کنیم.
توجه داشته باشید که باید پیشوند‌های مختلف برای مرورگرهای مختلف را شامل شویم، زیرا آنها هنوز از روش requestFullscreen پشتیبانی نمی‌کنند */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
</script>

آزمایش کنید

دокумент تمام‌صفحه

برای باز کردن تمام صفحه وب‌سایت به حالت تمام‌صفحه، لطفاً از document.documentElement به جای document.getElementById("element")。

در این مثال، ما همچنین از یک تابع بسته‌بندی برای خروج از حالت تمام‌صفحه استفاده می‌کنیم:

مثال

<script>
/* دریافت documentElement (<html>) برای نمایش صفحه به صورت کامل‌نما */
var elem = document.documentElement;
/* مشاهده کامل‌نما */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* خروج از حالت کامل‌نما */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script>

وقتی که صفحه در حالت کامل‌نماست، شما همچنین می‌توانید از CSS برای تنظیم استایل صفحه استفاده کنید:

مثال

/* Safari */
:-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