نسخه آزمایشی جدید برای پنجره های تمام صفحه بازشو

توماس اشتاینر

تصور کنید می خواهید یک پنجره بازشو در حالت تمام صفحه باز کنید. تا به حال، باز کردن یک پنجره تمام صفحه شامل دو مرحله بود:

  1. از پنجره اصلی برنامه، فراخوانی متد window.open() که به یک حرکت کاربر مانند کلیک بر روی دکمه Open popup window نیاز دارد.
  2. از پنجره بازشو، فراخوانی متد Element.requestFullscreen() ، که به همین ترتیب به یک حرکت کاربر مانند کلیک بر روی دکمه Enter mode fullscreen نیاز دارد.

اکنون نسخه آزمایشی مبدأ جدیدی وجود دارد که از Chrome 119 (تاریخ پایدار) اجرا می‌شود: 31 اکتبر 2023 تا Chrome 122 (تاریخ پایدار): 31 اکتبر 2023 برای باز کردن پنجره‌های بازشو در حالت تمام صفحه تنها با یک مرحله. برای ثبت نام، روی ثبت نام در صفحه فرود باز کردن پنجره‌های تمام‌صفحه اولیه آزمایشی کلیک کنید. به غیر از آزمایش اولیه، می‌توانید با تنظیم پرچم chrome://flags/#fullscreen-popup-windows روی Enabled، به صورت محلی نیز آزمایش کنید.

باز کردن پنجره های تمام صفحه بازشو در صفحه فعلی

این ویژگی جدید در پشت مجوز window-management قرار دارد. هنگامی که کاربر مجوز را صادر کرد، می توانید مانند مثال زیر یک پنجره تمام صفحه باز کنید.

document.querySelector('.fullscreen-popoup-button').addEventListener('click', async (e) => {
  if ((await navigator.permissions.query({name: 'window-management'})).state !== 'granted') {
    // Permission not granted. Call `window.getScreenDetails()` to prompt.
    await window.getScreenDetails();
  }
  // Permission granted. Open the fullscreen popup window.
  window.open('https://example.com/popup.html', '_blank', 'popup,fullscreen');
});

در خط آخر نمونه کد، اولین پارامتر url است که در پنجره بازشو باز می شود. پارامتر دوم target با مقدار ویژه _blank است. سومین پارامتر مربوط به windowFeatures است، یک رشته جدا شده با کاما با مقدار popup برای باز کردن یک پنجره بازشو و مقدار جدید fullscreen برای باز کردن پنجره بازشو در حالت تمام صفحه. این فقط با یک حرکت کاربر کار می کند، بنابراین با یک کلیک بر روی یک دکمه می توان آن را فعال کرد.

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

این ویژگی واقعاً در ترکیب با Window Management API می درخشد که به شما امکان می دهد اطلاعاتی در مورد تمام صفحه هایی که کاربر به رایانه خود متصل کرده است به دست آورید. برای مثال، برای باز کردن یک پنجره تمام صفحه در صفحه دیگری غیر از صفحه فعلی کاربر، باید ابتدا صفحه دیگر را پیدا کنید و سپس مقادیر availLeft ، availTop ، availWidth و availHeight آن را به left ، top ، width و height مربوطه منتقل کنید. مقادیر رشته windowFeatures .


document.querySelector('.fullscreen-popoup-button-other-screen').addEventListener('click', async (e) => {
  const screenDetails = await window.getScreenDetails();
  ​​const otherScreen = screenDetails.screens.find(s => s !== screenDetails.currentScreen);
  window.open('https://example.com/popup.html', '_blank', `left=${otherScreen.availLeft},` +
      `top=${otherScreen.availTop},` +
      `width=${otherScreen.availWidth},` +
      `height=${otherScreen.availHeight},` +
      `fullscreen`);
});

نسخه ی نمایشی

پنجره های تمام صفحه بازشو را در دمو امتحان کنید و کد منبع را مشاهده کنید . مطمئن شوید که چک باکس تمام صفحه و دکمه بازشو تمام صفحه را علامت بزنید، و اگر فرصت دارید، با نمایشگرهای متعدد متصل به دستگاه خود، با نسخه نمایشی بازی کنید.

قدردانی ها

این مقاله توسط Brad Triebwasser , Hakan Isbiliroglu , Mike Wasserman و Rachel Andrew بررسی شده است .