مرحلة التجربة والتقييم الجديدة للنوافذ المنبثقة بملء الشاشة

Thomas Steiner

تخيل أنك تريد فتح نافذة منبثقة في وضع ملء الشاشة. حتى الآن، تتكون فتح نافذة نافذة منبثقة بملء الشاشة من خطوتين:

  1. من نافذة التطبيق الرئيسية، يتم استدعاء الإجراء window.open() الذي يتطلّب إيماءة المستخدم، مثل النقر على زر فتح نافذة نافذة منبثقة.
  2. من النافذة المنبثقة، استدعاء طريقة Element.requestFullscreen()، والتي تتطلّب أيضًا إيماءة مستخدم، مثل النقر على زر دخول وضع ملء الشاشة.

تتوفّر الآن نسخة تجريبية من المصدر جديدة تعمل من Chrome 119 (التاريخ الثابت): من 31 تشرين الأول (أكتوبر) 2023 إلى Chrome 122 (التاريخ الثابت): 31 تشرين الأول (أكتوبر) 2023 لفتح النوافذ المنبثقة في وضع ملء الشاشة بخطوة واحدة فقط. انقر على Register (تسجيل) في الصفحة المقصودة لتجربة فتح النوافذ المنبثقة كنوافذ بملء الشاشة للاشتراك. بالإضافة إلى مرحلة التجربة والتقييم، يمكنك أيضًا إجراء اختبار محلي من خلال ضبط العلامة chrome://flags/#fullscreen-popup-windows على مفعّلة.

فتح النوافذ المنبثقة بملء الشاشة في الشاشة الحالية

لا يُسمح باستخدام هذه الميزة الجديدة إلّا بعد الحصول على إذن 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`);
});

الخصائص الديموغرافية

جرِّب النوافذ المنبثقة بملء الشاشة في العرض التوضيحي واعرض رمز المصدر. احرص على وضع علامة في مربّع الاختيار ملء الشاشة وزر النافذة المنبثقة بملء الشاشة، وإذا سنحت لك الفرصة، شاهِد الإصدار التجريبي مع توصيل عدة شاشات بجهازك.

شكر وتقدير

راجع هذه المقالة براد تريبواسر وهاكان إسبيليروغلو ومايك واسرمان وراشيل أندرو.