इस पेज का अनुवाद Cloud Translation API से किया गया है.

विंडो मैनेजमेंट एपीआई की मदद से कई डिसप्ले मैनेज करना

कनेक्ट किए गए डिस्प्ले और उन डिस्प्ले के हिसाब से पोज़िशन विंडो के बारे में जानकारी पाएँ.

Thomas Steiner

विंडो मैनेजमेंट एपीआई

विंडो मैनेजमेंट एपीआई से, आपको अपनी मशीन से कनेक्ट किए गए डिसप्ले की गिनती करने और विंडो को खास स्क्रीन पर रखने की सुविधा मिलती है.

इस्तेमाल के सुझाए गए उदाहरण

इस एपीआई का इस्तेमाल करने वाली साइटों के उदाहरण:

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

विंडो मैनेजमेंट एपीआई को इस्तेमाल करने का तरीका

समस्या

विंडो कंट्रोल करने का पुराना तरीका, Window.open(), हमें दूसरी स्क्रीन के बारे में जानकारी नहीं है. इस एपीआई के कुछ आसपेक्ट काफ़ी पुराने लगते हैं, जैसे कि windowFeatures DOMString पैरामीटर, फिर भी पिछले कई सालों में यह हमारे लिए बहुत कारगर साबित हुआ है. विंडो की रैंक तय करने के लिए, left और top (या screenX और screenY) के तौर पर निर्देशांक पास किए जा सकते हैं. साथ ही, पसंद के मुताबिक साइज़ को width और height (या innerWidth और innerHeight के तौर पर) पास किया जा सकता है. उदाहरण के लिए, बाईं ओर से 50 पिक्सल और ऊपर से 50 पिक्सल की 400×300 विंडो को खोलने के लिए, इस कोड का इस्तेमाल किया जा सकता है:

const popup = window.open(
  'https://example.com/',
  'My Popup',
  'left=50,top=50,width=400,height=300',
);

आप window.screen प्रॉपर्टी देखकर मौजूदा स्क्रीन के बारे में जानकारी पा सकते हैं, जो Screen ऑब्जेक्ट दिखाता है. यह मेरे MacBook Pro 13′′ नतीजों से जुड़ा है:

window.screen;
/* Output from my MacBook Pro 13″:
  availHeight: 969
  availLeft: 0
  availTop: 25
  availWidth: 1680
  colorDepth: 30
  height: 1050
  isExtended: true
  onchange: null
  orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
  pixelDepth: 30
  width: 1680
*/

तकनीक के क्षेत्र में काम करने वाले ज़्यादातर लोगों की तरह, मुझे भी नए काम के हिसाब से काम करना पड़ा और अपना निजी होम ऑफ़िस सेट अप करना पड़ा. मेरा, नीचे दी गई फ़ोटो जैसा लग रहा है (अगर आप चाहें, तो मेरे सेटअप के बारे में पूरी जानकारी पढ़ें). मेरे MacBook के बगल में मौजूद iPad को लैपटॉप से Sidecar से कनेक्ट किया गया है, इसलिए जब भी मुझे ज़रूरत हो, मैं iPad को तेज़ी से दूसरी स्क्रीन में बदल सकता हूं.

दो कुर्सियों पर रखी स्कूल बेंच. स्कूल की बेंच के ऊपर जूतों के बॉक्स हैं, जिनके ऊपर एक लैपटॉप और दो iPad हैं. — मल्टी-स्क्रीन सेटअप.

बड़ी स्क्रीन का फ़ायदा लेने के लिए, ऊपर दिए गए कोड सैंपल से पॉप-अप को दूसरी स्क्रीन पर रखा जा सकता है. मैं इसे इस तरह करता हूं:

popup.moveTo(2500, 50);

यह सिर्फ़ एक अनुमान है, क्योंकि दूसरी स्क्रीन के डाइमेंशन को जानने का कोई तरीका नहीं है. window.screen पर मौजूद जानकारी सिर्फ़ बिल्ट-इन स्क्रीन को कवर करती है, iPad स्क्रीन को नहीं. बिल्ट-इन स्क्रीन के width को 1680 पिक्सल के तौर पर रिपोर्ट किया गया था. इसलिए, 2500 पिक्सल में ले जाने से हो सकता है कि यह विंडो को iPad पर ले जाए. ऐसा इसलिए, क्योंकि मुझे पता चला है कि यह मेरे MacBook के दाईं ओर मौजूद है. सामान्य मामले में ऐसा कैसे किया जा सकता है? पता चलता है, अनुमान लगाने से बेहतर तरीका है. इस तरह, Window Management API का इस्तेमाल किया जा सकता है.

सुविधा की पहचान करने की सुविधा

विंडो मैनेजमेंट एपीआई काम करता है या नहीं, यह देखने के लिए इनका इस्तेमाल करें:

if ('getScreenDetails' in window) {
  // The Window Management API is supported.
}

`window-management` की अनुमति

ध्यान दें: window-placement का पुराना नाम अब इस्तेमाल नहीं किया जा सकता.

Window Management API का इस्तेमाल करने से पहले मुझे उपयोगकर्ता से ऐसा करने की अनुमति लेनी होगी. Permissions API का इस्तेमाल करके, window-management की अनुमति के बारे में इस तरह से क्वेरी की जा सकती है:

let granted = false;
try {
  const { state } = await navigator.permissions.query({ name: 'window-management' });
  granted = state === 'granted';
} catch {
  // Nothing.
}

पुराने और नए नाम वाले ब्राउज़र इस्तेमाल करते समय, अनुमति का अनुरोध करते समय डिफ़ेंसिव कोड का इस्तेमाल करना न भूलें, जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है.

async function getWindowManagementPermissionState() {
  let state;
  // The new permission name.
  try {
    ({ state } = await navigator.permissions.query({
      name: "window-management",
    }));
  } catch (err) {
    return `${err.name}: ${err.message}`;
  }
  return state;
}

document.querySelector("button").addEventListener("click", async () => {
  const state = await getWindowManagementPermissionState();
  document.querySelector("pre").textContent = state;
});

ब्राउज़र, एपीआई के नए वर्शन में से किसी भी तरीके का इस्तेमाल पहली बार करने पर, अनुमति के प्रॉम्प्ट को डाइनैमिक तौर पर दिखाने का विकल्प कर सकता है. ज़्यादा जानने के लिए आगे पढ़ें.

`window.screen.isExtended` प्रॉपर्टी

यह पता लगाने के लिए कि मेरे डिवाइस पर एक से ज़्यादा स्क्रीन कनेक्ट हैं या नहीं, मैं window.screen.isExtended प्रॉपर्टी को ऐक्सेस करता/करती हूं. यह true या false दिखाता है. मेरे सेटअप के लिए, यह true दिखाता है.

window.screen.isExtended;
// Returns `true` or `false`.

`getScreenDetails()` तरीका

अब मुझे पता है कि मौजूदा सेटअप मल्टी-स्क्रीन है. इसलिए, मैं Window.getScreenDetails() का इस्तेमाल करके दूसरी स्क्रीन के बारे में ज़्यादा जानकारी पा सकती हूं. इस फ़ंक्शन को कॉल करने पर अनुमति का अनुरोध दिखेगा, जिससे यह पूछा जाएगा कि क्या साइट मेरी स्क्रीन पर खुल सकती है और विंडो को प्लेस कर सकती है. फ़ंक्शन, ऐसा प्रॉमिस दिखाता है जो ScreenDetailed ऑब्जेक्ट से रिज़ॉल्व होता है. कनेक्ट किए गए iPad वाले मेरे MacBook Pro 13 में, इसमें दो ScreenDetailed ऑब्जेक्ट के साथ एक screens फ़ील्ड शामिल है:

await window.getScreenDetails();
/* Output from my MacBook Pro 13″ with the iPad attached:
{
  currentScreen: ScreenDetailed {left: 0, top: 0, isPrimary: true, isInternal: true, devicePixelRatio: 2, …}
  oncurrentscreenchange: null
  onscreenschange: null
  screens: [{
    // The MacBook Pro
    availHeight: 969
    availLeft: 0
    availTop: 25
    availWidth: 1680
    colorDepth: 30
    devicePixelRatio: 2
    height: 1050
    isExtended: true
    isInternal: true
    isPrimary: true
    label: "Built-in Retina Display"
    left: 0
    onchange: null
    orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
    pixelDepth: 30
    top: 0
    width: 1680
  },
  {
    // The iPad
    availHeight: 999
    availLeft: 1680
    availTop: 25
    availWidth: 1366
    colorDepth: 24
    devicePixelRatio: 2
    height: 1024
    isExtended: true
    isInternal: false
    isPrimary: false
    label: "Sidecar Display (AirPlay)"
    left: 1680
    onchange: null
    orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
    pixelDepth: 24
    top: 0
    width: 1366
  }]
}
*/

कनेक्ट की गई स्क्रीन के बारे में जानकारी, screens के कलेक्शन में उपलब्ध है. ध्यान दें कि iPad के लिए left की वैल्यू 1680 से कैसे शुरू होती है, जो कि बिल्ट-इन डिसप्ले का width है. इससे मुझे यह तय करने में मदद मिलती है कि स्क्रीन को सही तरीके से कैसे व्यवस्थित किया गया है (एक-दूसरे के बगल में, एक-दूसरे के ऊपर, वगैरह). अब हर स्क्रीन के लिए डेटा भी उपलब्ध है, जिससे यह पता चलता है कि क्या यह isInternal है और क्या यह isPrimary है. ध्यान दें कि पहले से मौजूद स्क्रीन ज़रूरी नहीं है कि वह प्राइमरी स्क्रीन हो.

currentScreen फ़ील्ड, मौजूदा window.screen से जुड़ा एक लाइव ऑब्जेक्ट है. ऑब्जेक्ट को क्रॉस-स्क्रीन विंडो प्लेसमेंट या डिवाइस बदलने पर अपडेट किया जाता है.

ध्यान दें: Chromium का हाल ही में लागू किया गया एपीआई, कम जानकारी वाले प्लेसहोल्डर, जैसे कि "Internal Display 1" के बजाय "Built-in Retina Display" जैसे प्लैटफ़ॉर्म से मिले स्क्रीन लेबल दिखाता है.

`screenschange` इवेंट

अब बस एक चीज़ नहीं मिल रही है, यह पता लगाने का एक तरीका है कि मेरा स्क्रीन सेटअप कब बदल रहा है. एक नया इवेंट, screenschange, बिलकुल ऐसा करता है: जब भी स्क्रीन तारामंडल में बदलाव होता है, तो यह सक्रिय होता है. (ध्यान दें कि इवेंट के नाम में "screen" बहुवचन है.) इसका मतलब है कि जब भी कोई नई स्क्रीन या कोई मौजूदा स्क्रीन (साइडकार के मामले में भौतिक रूप से या वर्चुअल रूप से) प्लग इन या अनप्लग की जाती है, तो इवेंट सक्रिय हो जाता है.

ध्यान रखें कि आपको नई स्क्रीन की जानकारी एसिंक्रोनस रूप से देखने की ज़रूरत होती है. screenschange इवेंट में यह डेटा नहीं मिलता. स्क्रीन की जानकारी देखने के लिए, कैश मेमोरी में सेव Screens इंटरफ़ेस से लाइव ऑब्जेक्ट का इस्तेमाल करें.

const screenDetails = await window.getScreenDetails();
let cachedScreensLength = screenDetails.screens.length;
screenDetails.addEventListener('screenschange', (event) => {
  if (screenDetails.screens.length !== cachedScreensLength) {
    console.log(
      `The screen count changed from ${cachedScreensLength} to ${screenDetails.screens.length}`,
    );
    cachedScreensLength = screenDetails.screens.length;
  }
});

`currentscreenchange` इवेंट

अगर मुझे सिर्फ़ मौजूदा स्क्रीन (यानी लाइव ऑब्जेक्ट की वैल्यू currentScreen) में बदलाव करने हैं, तो मुझे currentscreenchange इवेंट के बारे में जानकारी मिलेगी.

const screenDetails = await window.getScreenDetails();
screenDetails.addEventListener('currentscreenchange', async (event) => {
  const details = screenDetails.currentScreen;
  console.log('The current screen has changed.', event, details);
});

`change` इवेंट

आखिर में, अगर मुझे सिर्फ़ कंक्रीट स्क्रीन में बदलाव करने में दिलचस्पी है, तो मैं उस स्क्रीन के change इवेंट को सुन सकता हूं.

const firstScreen = (await window.getScreenDetails())[0];
firstScreen.addEventListener('change', async (event) => {
  console.log('The first screen has changed.', event, firstScreen);
});

फ़ुलस्क्रीन के नए विकल्प

अब तक, उन एलिमेंट को फ़ुलस्क्रीन मोड में दिखाने का अनुरोध किया जा सकता है जिनके नाम requestFullScreen() रखने का सही तरीका इस्तेमाल किया जाता है. इस तरीके में एक options पैरामीटर होता है, जहां से FullscreenOptions को पास किया जा सकता है. अब तक, उसकी प्रॉपर्टी navigationUI रही है. Window Management API में एक नई screen प्रॉपर्टी जोड़ी गई है. इससे यह तय किया जा सकता है कि किस स्क्रीन पर फ़ुलस्क्रीन व्यू शुरू करना है. उदाहरण के लिए, अगर आपको मुख्य स्क्रीन को फ़ुलस्क्रीन बनाना है:

try {
  const primaryScreen = (await getScreenDetails()).screens.filter((screen) => screen.isPrimary)[0];
  await document.body.requestFullscreen({ screen: primaryScreen });
} catch (err) {
  console.error(err.name, err.message);
}

पॉलीफ़िल

विंडो मैनेजमेंट एपीआई को पॉलीफ़िल नहीं किया जा सकता, लेकिन इसके आकार को बदला जा सकता है, ताकि आप खास तौर पर नए एपीआई के साथ कोड कर सकें:

if (!('getScreenDetails' in window)) {
  // Returning a one-element array with the current screen,
  // noting that there might be more.
  window.getScreenDetails = async () => [window.screen];
  // Set to `false`, noting that this might be a lie.
  window.screen.isExtended = false;
}

एपीआई के दूसरे पहलुओं यानी कि स्क्रीन में बदलाव के कई इवेंट और FullscreenOptions की screen प्रॉपर्टी को उन ब्राउज़र पर कभी भी सक्रिय नहीं किया जाएगा या बिना अनुमति के अनदेखा किया जाएगा जो काम नहीं करते.

डेमो

अगर आप मेरे जैसे हैं, तो आप अलग-अलग तरह की क्रिप्टो करंसी के डेवलपमेंट पर खास ध्यान दें. (असल में, मुझे इस ग्रह से बहुत प्यार नहीं है, लेकिन इस लेख के फ़ायदे के लिए, बस यह मान लीजिए कि मैंने किया.) अपनी खुद की क्रिप्टो करंसी को ट्रैक करने के लिए, मैंने एक वेब ऐप्लिकेशन डेवलप किया है. इससे मैं अपनी हर स्थिति में, बाज़ार पर नज़र रख सकती हूँ. जैसे, आराम से बैठकर सिंगल-स्क्रीन सेटअप.

बड़े टीवी की स्क्रीन के आखिर में लेखक के पैर कुछ हद तक दिख रहे हैं. स्क्रीन पर, क्रिप्टो करंसी का नकली ट्रेडिंग डेस्क दिख रहा है. — सुकून देने के साथ-साथ बाज़ारों को देखने के लिए.

जहां तक क्रिप्टो करंसी की बात है, तब बाज़ार में किसी भी समय उतार-चढ़ाव हो सकता है. अगर ऐसा होता है, तो मैं तुरंत अपनी डेस्क पर जा सकती हूँ. वहीं, उस डेस्क पर मल्टी-स्क्रीन सेटअप होना चाहिए. किसी भी मुद्रा की विंडो पर क्लिक करके, आपको दूसरी स्क्रीन पर पूरी जानकारी को फ़ुलस्क्रीन व्यू में तुरंत देखा जा सकता है. नीचे पिछली YCY ब्लडबाथ के दौरान ली गई मेरी हाल ही की फ़ोटो दी गई है. इसने मुझे पूरी तरह से परेशान कर दिया और मुझे मेरे चेहरे पर हाथ रखकर छोड़ दिया.

लेखक ने घबराते हुए अपने चेहरे पर हाथ रखा हुआ है और वह नकली क्रिप्टो करंसी ट्रेडिंग डेस्क की ओर घूर रहा है. — पनीकी, YCY खून-खराबा को देखते हुए.

नीचे एम्बेड किए गए डेमो को चलाया जा सकता है या ग्लिच पर इसका सोर्स कोड देखा जा सकता है.

सुरक्षा और अनुमतियां

Chrome टीम ने बेहतर वेब प्लैटफ़ॉर्म सुविधाओं का ऐक्सेस कंट्रोल करना में बताए गए मुख्य सिद्धांतों का इस्तेमाल करके, विंडो मैनेजमेंट एपीआई को डिज़ाइन और लागू किया है. इसमें उपयोगकर्ता कंट्रोल, पारदर्शिता, और एल्गोरिदम की जानकारी भी शामिल है. Window Management API, डिवाइस से कनेक्ट की गई स्क्रीन के बारे में नई जानकारी दिखाता है. इससे उपयोगकर्ताओं, खास तौर पर उन लोगों के लिए फ़िंगरप्रिंट की सुविधा वाली स्क्रीन बढ़ती है जिनके डिवाइस से एक से ज़्यादा स्क्रीन लगातार कनेक्ट रहती हैं. निजता की इस चिंता को कम करने के लिए, एक्सपोज़्ड स्क्रीन प्रॉपर्टी, प्लेसमेंट के इस्तेमाल के सामान्य उदाहरणों के लिए ज़रूरी कम से कम सीमा तक सीमित हैं. मल्टी-स्क्रीन जानकारी पाने और विंडो को दूसरी स्क्रीन पर रखने के लिए, साइटों के लिए उपयोगकर्ता की अनुमति ज़रूरी है. Chromium ज़्यादा जानकारी वाले स्क्रीन लेबल दिखाता है, लेकिन ब्राउज़र अपने हिसाब से, कम जानकारी देने वाला (या खाली लेबल) भी दिखा सकते हैं.

उपयोगकर्ता कंट्रोल

उपयोगकर्ता के पास अपने सेटअप की जानकारी शेयर करने का पूरा कंट्रोल होता है. उपयोगकर्ता, अनुमति के प्रॉम्प्ट को स्वीकार या अस्वीकार कर सकते हैं. साथ ही, ब्राउज़र में साइट की जानकारी वाली सुविधा के ज़रिए, पहले दी गई अनुमति को वापस ले सकते हैं.

एंटरप्राइज़ के लिए कंट्रोल

Chrome Enterprise के उपयोगकर्ता, विंडो मैनेजमेंट एपीआई के कई पहलुओं को कंट्रोल कर सकते हैं. इनके बारे में ऐटॉमिक पॉलिसी ग्रुप की सेटिंग के सेक्शन में बताया गया है.

पारदर्शिता

विंडो मैनेजमेंट एपीआई का इस्तेमाल करने की अनुमति दी गई है या नहीं, यह जानकारी ब्राउज़र की साइट की जानकारी में दिखती है. साथ ही, इसके लिए अनुमतियां एपीआई की मदद से क्वेरी भी की जा सकती है.

अनुमति का बने रहना

ब्राउज़र अनुमति देता रहता है. ब्राउज़र की साइट की जानकारी का इस्तेमाल करके इस अनुमति को वापस लिया जा सकता है.

सुझाव/राय दें या शिकायत करें

Chrome टीम, Window Management API के साथ आपके अनुभवों के बारे में जानना चाहती है.

हमें इस एपीआई के डिज़ाइन के बारे में बताएं

क्या एपीआई में ऐसा कुछ है जो आपकी उम्मीद के मुताबिक काम नहीं करता? या ऐसा नहीं है कि अपना आइडिया लागू करने के लिए, ऐसे तरीके या प्रॉपर्टी मौजूद नहीं हैं जिनकी ज़रूरत आपको है? क्या सुरक्षा मॉडल के बारे में आपका कोई सवाल या टिप्पणी है?

इससे जुड़े GitHub रेपो के बारे में कोई खास जानकारी फ़ाइल करें या किसी मौजूदा समस्या में अपने विचार जोड़ें.

लागू करने से जुड़ी समस्या की शिकायत करें

क्या आपको Chrome को लागू करने में कोई गड़बड़ी मिली? या क्या इसे लागू करने की प्रक्रिया खास जानकारी से अलग है?

new.crbug.com पर गड़बड़ी की शिकायत करें. जितना हो सके ज़्यादा से ज़्यादा जानकारी दें, पेज को फिर से बनाने के आसान निर्देश दें और कॉम्पोनेंट बॉक्स में Blink>Screen>MultiScreen डालें. Glitch का इस्तेमाल करके, तुरंत और आसान तरीकों को शेयर किया जा सकता है.

एपीआई के साथ काम करता है

क्या आपको विंडो मैनेजमेंट एपीआई का इस्तेमाल करना है? आपकी सार्वजनिक मदद से Chrome की टीम को सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, इससे दूसरे ब्राउज़र वेंडर को पता चलता है कि उनकी मदद करना कितना ज़रूरी है.

WICG चर्चा थ्रेड पर बताएं कि आपको इसे कैसे इस्तेमाल करना है.
हैशटैग #WindowManagement का इस्तेमाल करके @ChromiumDev को एक ट्वीट भेजें और हमें बताएं कि आप उसका इस्तेमाल कहां और कैसे कर रहे हैं.
अन्य ब्राउज़र वेंडर से एपीआई लागू करने के लिए कहें.

मददगार लिंक

स्वीकार हैं

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