कनेक्ट किए गए डिस्प्ले और उन डिस्प्ले के हिसाब से पोज़िशन विंडो के बारे में जानकारी पाएँ.
विंडो मैनेजमेंट एपीआई
विंडो मैनेजमेंट एपीआई से, आपको अपनी मशीन से कनेक्ट किए गए डिसप्ले की गिनती करने और विंडो को खास स्क्रीन पर रखने की सुविधा मिलती है.
इस्तेमाल के सुझाए गए उदाहरण
इस एपीआई का इस्तेमाल करने वाली साइटों के उदाहरण:
- एक से ज़्यादा विंडो वाले ग्राफ़िक्स एडिटर टूल 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 को तेज़ी से दूसरी स्क्रीन में बदल सकता हूं.
बड़ी स्क्रीन का फ़ायदा लेने के लिए, ऊपर दिए गए कोड सैंपल से पॉप-अप को दूसरी स्क्रीन पर रखा जा सकता है. मैं इसे इस तरह करता हूं:
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 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
से जुड़ा एक लाइव ऑब्जेक्ट है. ऑब्जेक्ट को क्रॉस-स्क्रीन विंडो प्लेसमेंट
या डिवाइस बदलने पर अपडेट किया जाता है.
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 ब्लडबाथ के दौरान ली गई मेरी हाल ही की फ़ोटो दी गई है. इसने मुझे पूरी तरह से परेशान कर दिया और मुझे मेरे चेहरे पर हाथ रखकर छोड़ दिया.
नीचे एम्बेड किए गए डेमो को चलाया जा सकता है या ग्लिच पर इसका सोर्स कोड देखा जा सकता है.
सुरक्षा और अनुमतियां
Chrome टीम ने बेहतर वेब प्लैटफ़ॉर्म सुविधाओं का ऐक्सेस कंट्रोल करना में बताए गए मुख्य सिद्धांतों का इस्तेमाल करके, विंडो मैनेजमेंट एपीआई को डिज़ाइन और लागू किया है. इसमें उपयोगकर्ता कंट्रोल, पारदर्शिता, और एल्गोरिदम की जानकारी भी शामिल है. Window Management API, डिवाइस से कनेक्ट की गई स्क्रीन के बारे में नई जानकारी दिखाता है. इससे उपयोगकर्ताओं, खास तौर पर उन लोगों के लिए फ़िंगरप्रिंट की सुविधा वाली स्क्रीन बढ़ती है जिनके डिवाइस से एक से ज़्यादा स्क्रीन लगातार कनेक्ट रहती हैं. निजता की इस चिंता को कम करने के लिए, एक्सपोज़्ड स्क्रीन प्रॉपर्टी, प्लेसमेंट के इस्तेमाल के सामान्य उदाहरणों के लिए ज़रूरी कम से कम सीमा तक सीमित हैं. मल्टी-स्क्रीन जानकारी पाने और विंडो को दूसरी स्क्रीन पर रखने के लिए, साइटों के लिए उपयोगकर्ता की अनुमति ज़रूरी है. Chromium ज़्यादा जानकारी वाले स्क्रीन लेबल दिखाता है, लेकिन ब्राउज़र अपने हिसाब से, कम जानकारी देने वाला (या खाली लेबल) भी दिखा सकते हैं.
उपयोगकर्ता कंट्रोल
उपयोगकर्ता के पास अपने सेटअप की जानकारी शेयर करने का पूरा कंट्रोल होता है. उपयोगकर्ता, अनुमति के प्रॉम्प्ट को स्वीकार या अस्वीकार कर सकते हैं. साथ ही, ब्राउज़र में साइट की जानकारी वाली सुविधा के ज़रिए, पहले दी गई अनुमति को वापस ले सकते हैं.
एंटरप्राइज़ के लिए कंट्रोल
Chrome Enterprise के उपयोगकर्ता, विंडो मैनेजमेंट एपीआई के कई पहलुओं को कंट्रोल कर सकते हैं. इनके बारे में ऐटॉमिक पॉलिसी ग्रुप की सेटिंग के सेक्शन में बताया गया है.
पारदर्शिता
विंडो मैनेजमेंट एपीआई का इस्तेमाल करने की अनुमति दी गई है या नहीं, यह जानकारी ब्राउज़र की साइट की जानकारी में दिखती है. साथ ही, इसके लिए अनुमतियां एपीआई की मदद से क्वेरी भी की जा सकती है.
अनुमति का बने रहना
ब्राउज़र अनुमति देता रहता है. ब्राउज़र की साइट की जानकारी का इस्तेमाल करके इस अनुमति को वापस लिया जा सकता है.
सुझाव/राय दें या शिकायत करें
Chrome टीम, Window Management API के साथ आपके अनुभवों के बारे में जानना चाहती है.
हमें इस एपीआई के डिज़ाइन के बारे में बताएं
क्या एपीआई में ऐसा कुछ है जो आपकी उम्मीद के मुताबिक काम नहीं करता? या ऐसा नहीं है कि अपना आइडिया लागू करने के लिए, ऐसे तरीके या प्रॉपर्टी मौजूद नहीं हैं जिनकी ज़रूरत आपको है? क्या सुरक्षा मॉडल के बारे में आपका कोई सवाल या टिप्पणी है?
- इससे जुड़े GitHub रेपो के बारे में कोई खास जानकारी फ़ाइल करें या किसी मौजूदा समस्या में अपने विचार जोड़ें.
लागू करने से जुड़ी समस्या की शिकायत करें
क्या आपको Chrome को लागू करने में कोई गड़बड़ी मिली? या क्या इसे लागू करने की प्रक्रिया खास जानकारी से अलग है?
- new.crbug.com पर गड़बड़ी की शिकायत करें. जितना हो सके ज़्यादा से ज़्यादा जानकारी दें, पेज को फिर से बनाने के आसान निर्देश दें और कॉम्पोनेंट बॉक्स में
Blink>Screen>MultiScreen
डालें. Glitch का इस्तेमाल करके, तुरंत और आसान तरीकों को शेयर किया जा सकता है.
एपीआई के साथ काम करता है
क्या आपको विंडो मैनेजमेंट एपीआई का इस्तेमाल करना है? आपकी सार्वजनिक मदद से Chrome की टीम को सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, इससे दूसरे ब्राउज़र वेंडर को पता चलता है कि उनकी मदद करना कितना ज़रूरी है.
- WICG चर्चा थ्रेड पर बताएं कि आपको इसे कैसे इस्तेमाल करना है.
- हैशटैग
#WindowManagement
का इस्तेमाल करके @ChromiumDev को एक ट्वीट भेजें और हमें बताएं कि आप उसका इस्तेमाल कहां और कैसे कर रहे हैं. - अन्य ब्राउज़र वेंडर से एपीआई लागू करने के लिए कहें.
मददगार लिंक
- खास जानकारी वाला ड्राफ़्ट
- सार्वजनिक तौर पर जानकारी देने वाला वीडियो
- विंडो मैनेजमेंट एपीआई का डेमो | विंडो मैनेजमेंट एपीआई का डेमो सोर्स
- Chromium ट्रैकिंग की गड़बड़ी
- ChromeStatus.com एंट्री
- ब्लिंक कॉम्पोनेंट:
Blink>Screen>MultiScreen
- टैग की समीक्षा
- प्रयोग करने की इच्छा
स्वीकार हैं
विंडो मैनेजमेंट एपीआई की खास जानकारी में, विक्टर कॉस्टन, जोशुआ बेल, और माइक वासरमैन ने बदलाव किया था. इस एपीआई को माइक वासरमैन और एड्रियन वॉकर ने लागू किया. इस लेख की समीक्षा जो मेडली, फ़्रैंसुआ ब्यूफ़ोर्ट, और कायस बास्क्स ने की है. इन फ़ोटो के लिए, लॉरा टॉरेंट पुग को धन्यवाद.