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

Thomas Steiner

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

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

يتوفّر الآن إصدار تجريبي من الإصدار الأول متاح من الإصدار 119 من Chrome (تاريخ الإصدار الثابت): 31 تشرين الأول (أكتوبر) 2023 إلى الإصدار 122 من Chrome (تاريخ الإصدار الثابت): 31 تشرين الأول (أكتوبر) 2023 لفتح النوافذ المنبثقة في وضع ملء الشاشة بخطوة واحدة فقط. انقر على تسجيل في فتح النوافذ المنبثقة كنوافذ ملء الشاشة الصفحة المقصودة لتجربة الإصدار الأصلي للاشتراك. بالإضافة إلى الفترة التجريبية الأصلية، يمكنك أيضًا إجراء الاختبار على الجهاز فقط من خلال ضبط العلامة 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`);
});

عرض توضيحي

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

الشكر والتقدير

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