14
تشکر

معرفی API تمام صفحه (full screen) در HTML5

Full screen api

Full screen api

با استفاده از API تمام صفحه یا Full screen در HTML5 میتوانید سایت یا حتی عنصری مشخص را به صورت تمام صفحه به کاربر نمایش دهید. اینکار مخصوصاً در موبایل ها برای ایجاد تمرکز بیشتر کاربر، بر روی سایت، یا عنصر مربوطه، بسیار خوب است.

در این مطلب قرار است با این API و نحوه کار آن آشنا شویم.

در ادامه مطلب همراه ما باشید…

ایجاد تمام صفحه (Fullscreen)

با استفاده از متد requestFullscreen میتوان درخواست ایجاد full screen را به مرورگر داد.

نکته: اگر شما میخواهید کل document را در مروگرهای بر پایه Webkit و Blink به صورت تمام صفحه درآورید، برای به مشکل برنخوردن، باید عناصر document را انتخاب کنید. مانند کد زیر:

document.documentElement.requestFullscreen();

requestfullscreen حتماً باید در اثر رفتار مستقیم کاربر مانند کلیک کردن یا فشردن کلیدی انجام شود. برای مثال شما نمیتوانید کد درخواست full screen را در ابتدای صفحه بگذارید که زمانی که صفحه لود شد به صورت خودکار تمام صفحه شود. این کار برای جلوگیری از تمام صفحه شدن تبلیغات در سایت ها است.

کد بالا، کد استاندارد W3 است. هر مروگر از پیشوند مخصوص خود برای این متد استفاده میکند.

element.webkitRequestFullscreen(); // Chrome, Opera & Safari (WebKit)
element.mozRequestFullScreen(); // Firefox (Gecko)
element.msRequestFullscreen(); // Internet Explorer (Trident)

برای راحتی کار یک تابع مانند زیر میسازیم. هر زمان که خواستیم عنصری را به صورت full screen نمایش دهیم، کافیست عنصر را به عنوان پارامتر به این تابع بدهیم.

function requestFullScreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  } else {
    // Fallback
    console.log('Fullscreen API is not supported.');
  }
};

خارج شدن از تمام صفحه

برای خارج شدن از تمام صفحه باید متد exitFullscreen را از شی document فراخوانی کنیم.

document.exitFullscreen();

دوباره، این متد هم در مروگرهای مختلف دارای پیشوند مخصوص خود است. مرورگر فایرفاکس حتی در این مورد نام متد را هم عوض کرده و آن را mozCancelFullScreen گذاشته است.

document.webkitExitFullscreen(); // Chrome, Opera & Safari
document.mozCancelFullScreen(); // Firefox
document.msExitFullscreen(); // Internet Explorer

در اینجا هم ما یک تابع برای خارج شدن از تمام صفحه مینویسیم.

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  } else {
    // Fallback
    console.log('Fullscreen API is not supported.');
  }
};

خواص مرتبط document

علاوه بر متدهای requestfullscreen و exitFullscreen، دو خاصیت به نام های fullscreenEnabled و fullscreenElement هم وجود دارند.

fullscreenEnabled

این خاصیت دارای مقدار boolean است. و اگر true باشد به این معناست که مرورگر قابلیت این را دارد که عناصر را به صورت تمام صفحه دربیاورد.

document.fullscreenEnabled;
document.webkitFullscreenEnabled; // Chrome, Opera & Safari
document.mozFullScreenEnabled; // Firefox
document.msFullscreenEnabled; // Internet Explorer

fullscreenElement

این خاصیت عنصری که در حال حاضر در حالت full screen قرار دارد را به صورت html بر میگرداند.

document.fullscreenElement;
document.webkitFullscreenElement; // Chrome, Opera & Safari
document.mozFullScreenElement; // Firefox
document.msFullscreenElement; // Internet Explorer

استایل دهی به عناصر در حالت تمام صفحه

برای استایل دادن به عناصر در حالت تمام صفحه از شبه کلاس fullscreen: استفاده میکنیم. که مشابه شبه کلاس‌های hover: یا focus: است.

/* W3C Standard */
selector:fullscreen {

}
/* Webkit (Chrome, Opera & Safari) */
selector:-webkit-full-screen {

}

/* Gecko (Firefox) */
selector:-moz-full-screen {

}

/* Trident (Internet Explorer) */
selector:-ms-fullscreen {

}

مثال و دمو

برای مثال ما یک عنصر video داریم و میخواهیم وقتی کاربر بر روی دکمه مربوطه کلیک کرد، این عنصر به صورت تمام صفحه دربیاید.

var video = document.getElementById('video');
var button = document.getElementById('btn');

با استفاده از تابعی که در ابتدای مطلب نوشتیم، اینکار را انجام میدهیم.

button.addEventListener('click', function(e) {
    requestFullScreen(video);
});

مشاهده دمو

مشاهده پشتیبانی مرورگرها

  • mgh می‌گه:

    جالبه ها!


  • نظرات این مطلب بسته است.