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

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 है. यह सिर्फ़ एक उपयोगकर्ता जेस्चर के साथ काम करता है, इसलिए इसे एक बटन पर एक क्लिक से चालू किया जा सकता है.

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

यह सुविधा Window Management API के साथ मिलकर काम करती है. इससे आपको उन सभी स्क्रीन के बारे में जानकारी मिल सकती है जिन्हें उपयोगकर्ता ने अपने कंप्यूटर से कनेक्ट किया है. उदाहरण के लिए, उपयोगकर्ता की मौजूदा स्क्रीन के बजाय किसी दूसरी स्क्रीन पर फ़ुलस्क्रीन पॉप-अप विंडो खोलने के लिए, आपको सबसे पहले दूसरी स्क्रीन ढूंढनी होगी. इसके बाद, आपको उसके 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`);
});

डेमो

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

स्वीकार हैं

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