फ़ुलस्क्रीन पॉप-अप विंडो के लिए, नया ऑरिजिन ट्रायल

Thomas Steiner

मान लें कि आपको पॉप-अप विंडो को फ़ुल स्क्रीन मोड में खोलना है. अब तक, स्क्रीन के पूरे हिस्से पर दिखने वाली पॉप-अप विंडो खोलने के लिए, दो चरण पूरे करने पड़ते थे:

  1. मुख्य ऐप्लिकेशन विंडो से, window.open() वाला वह तरीका आज़माना जिसके लिए उपयोगकर्ता के जेस्चर की ज़रूरत होती है. जैसे, पॉप-अप विंडो खोलें बटन पर क्लिक करना.
  2. पॉप-अप विंडो से, Element.requestFullscreen() तरीका इस्तेमाल करना. इसके लिए, उपयोगकर्ता को फ़ुलस्क्रीन मोड में जाएं बटन पर क्लिक करना होगा.

अब एक ही चरण में फ़ुलस्क्रीन मोड में पॉप-अप विंडो खोलने के लिए, Chrome 119 (स्टैबल वर्शन रिलीज़ होने की तारीख): 31 अक्टूबर, 2023 से Chrome 122 (स्टैबल वर्शन रिलीज़ होने की तारीख): 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 की वैल्यू है. यह सुविधा, उपयोगकर्ता के सिर्फ़ एक जेस्चर से काम करती है. इसलिए, इसे बटन पर एक क्लिक करके चालू किया जा सकता है.

अन्य स्क्रीन पर फ़ुलस्क्रीन पॉप-अप विंडो खोलना

यह सुविधा, विंडो मैनेजमेंट एपीआई के साथ मिलकर बेहतर तरीके से काम करती है. इसकी मदद से, उन सभी स्क्रीन की जानकारी मिलती है जिन्हें उपयोगकर्ता ने अपने कंप्यूटर से कनेक्ट किया है. उदाहरण के लिए, उपयोगकर्ता की मौजूदा स्क्रीन के अलावा किसी दूसरी स्क्रीन पर फ़ुलस्क्रीन पॉप-अप विंडो खोलने के लिए, आपको पहले दूसरी स्क्रीन ढूंढनी होगी. इसके बाद, उसकी availLeft, availTop, availWidth, और availHeight वैल्यू को windowFeatures स्ट्रिंग की left, top, width, और height वैल्यू में पास करना होगा.


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`);
});

डेमो

डेमो में फ़ुलस्क्रीन पॉप-अप विंडो आज़माएं और सोर्स कोड देखें. फ़ुलस्क्रीन चेकबॉक्स और फ़ुलस्क्रीन पॉप-अप बटन को ज़रूर चुनें. अगर आपके पास अवसर है, तो अपने डिवाइस से जुड़ी कई स्क्रीन पर डेमो चलाकर देखें.

आभार

इस लेख की समीक्षा ब्रैड ट्रिबवासर, हक़ान इस्बिलिरॉग्लू, माइक वाटरमैन, और रेचल एंड्रयू ने की.