प्रत्येक जावास्क्रिप्ट वातावरण में एक वैश्विक वस्तु. वैश्विक दायरे में बनाए गए कोई भी चर वास्तव में इस वस्तु के गुण हैं, और कोई भी कार्य इसके तरीके हैं। एक ब्राउज़र वातावरण में वैश्विक वस्तु है window ऑब्जेक्ट, जो एक वेब पेज वाली ब्राउज़र विंडो का प्रतिनिधित्व करता है।

इस लेख में, हम विंडो ऑब्जेक्ट के कुछ महत्वपूर्ण उपयोगों को कवर करेंगे:

यह पोस्ट मेरे प्रसिद्ध पाठ्यक्रम से अनुकूलित है: जावास्क्रिप्ट: नौसिखिया से निंजा।

ब्राउज़र ऑब्जेक्ट मॉडल

ब्राउज़र ऑब्जेक्ट मॉडल (या संक्षेप में बीओएम) गुणों और विधियों का एक संग्रह है जिसमें ब्राउज़र और कंप्यूटर स्क्रीन के बारे में जानकारी होती है। उदाहरण के लिए, हम यह पता लगा सकते हैं कि किसी पृष्ठ को देखने के लिए किस ब्राउज़र का उपयोग किया जा रहा है (हालांकि, यह विधि अविश्वसनीय है)। हम उस स्क्रीन के आयामों का भी पता लगा सकते हैं जिस पर इसे देखा जाता है, और वर्तमान पृष्ठ से पहले कौन से पृष्ठ देखे गए हैं। यदि आप अपने उपयोगकर्ताओं को परेशान कर रहे हैं, तो इसका उपयोग पॉप-अप विंडो बनाने के संदिग्ध अभ्यास के लिए भी किया जा सकता है।

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

BOM केवल एक ब्राउज़र वातावरण में समझ में आता है

याद रखें कि जावास्क्रिप्ट को विभिन्न वातावरणों में चलाया जा सकता है। बीओएम केवल ब्राउज़र वातावरण में समझ में आता है। इसका अर्थ है कि अन्य परिवेशों (जैसे Node.js) में संभवतः a . नहीं होगा window वस्तु, हालांकि उनके पास अभी भी एक वैश्विक वस्तु होगी; उदाहरण के लिए, Node.js में एक वस्तु है जिसे कहा जाता है global.

यदि आप वैश्विक वस्तु का नाम नहीं जानते हैं, तो आप इसे कीवर्ड का उपयोग करके भी देख सकते हैं this वैश्विक दायरे में। निम्नलिखित कोड चर निर्दिष्ट करने का एक त्वरित तरीका प्रदान करता है global वैश्विक वस्तु के लिए:

const global = this;

वैश्विक हो रहा

वैश्विक चर वे चर हैं जो बिना उपयोग किए बनाए जाते हैं const, let या var खोजशब्द। वैश्विक चर कार्यक्रम के सभी भागों में पहुँचा जा सकता है।

वैश्विक चर एक वैश्विक वस्तु के वास्तविक गुण हैं। एक ब्राउज़र वातावरण में, वैश्विक वस्तु है window वस्तु। इसका मतलब है कि बनाया गया कोई भी वैश्विक चर वास्तव में की एक संपत्ति है window वस्तु, जैसा कि नीचे दिए गए उदाहरण में देखा जा सकता है:

x = 6;  
>> 6
window.x 
>> 6

>> true

सामान्य तौर पर, आपको का उपयोग किए बिना वैश्विक चर का उल्लेख करना चाहिए window वस्तु; यह कम टाइपिंग है और आपका कोड वातावरण के बीच अधिक पोर्टेबल होगा। एक अपवाद यह है कि यदि आपको यह जांचने की आवश्यकता है कि वैश्विक चर परिभाषित किया गया है या नहीं। उदाहरण के लिए, निम्न कोड एक संदर्भ त्रुटि फेंक देगा यदि x परिभाषित नहीं किया गया है:

if (x) 
    

हालाँकि, यदि चर को की संपत्ति के रूप में एक्सेस किया जाता है window ऑब्जेक्ट, तो कोड अभी भी काम करेगा, जैसे window.x बस वापस आ जाएगा falseजिसका अर्थ है कि कोड के ब्लॉक का मूल्यांकन नहीं किया जाएगा:

if (window.x) 
    

कुछ फ़ंक्शन जो हम पहले ही प्राप्त कर चुके हैं, जैसे parseInt() तथा isNaN()वास्तव में वैश्विक वस्तु के तरीके हैं, जो एक ब्राउज़र वातावरण में उन्हें के तरीके बनाता है window वस्तु:

चरों की तरह, उन तक पहुंच को छोड़ देना प्रथागत है window वस्तु।

संवाद

ब्राउज़रों में संवाद उत्पन्न करने वाले तीन कार्य हैं: alert(), confirm() तथा prompt(). ये ईसीएमएस्क्रिप्ट मानक का हिस्सा नहीं हैं, हालांकि सभी प्रमुख ब्राउज़र इनका समर्थन करते हैं window वस्तु।

window.alert() विधि प्रोग्राम के निष्पादन को रोक देगी और एक संवाद बॉक्स में एक संदेश प्रदर्शित करेगी। संदेश विधि के तर्क के रूप में प्रदान किया जाता है, और undefined हमेशा लौटाया जाता है:

window.alert('Hello');
>> undefined

window.confirm() विधि प्रोग्राम के निष्पादन को रोक देगी और एक पुष्टिकरण संवाद प्रदर्शित करेगी जो एक तर्क के रूप में प्रदान किए गए संदेश को दिखाता है, और ओके या रद्द का विकल्प देता है। यह के बूलियन मान लौटाता है true यदि उपयोगकर्ता ठीक क्लिक करता है, और false यदि उपयोगकर्ता रद्द करें क्लिक करता है:

window.confirm('Do you wish to continue?');
>> undefined

window.prompt() विधि कार्यक्रम के निष्पादन को रोक देगी। यह एक संवाद प्रदर्शित करता है जो एक तर्क के रूप में प्रदान किया गया संदेश दिखाता है, साथ ही एक इनपुट फ़ील्ड जो उपयोगकर्ता को टेक्स्ट दर्ज करने की अनुमति देता है। जब उपयोगकर्ता ओके पर क्लिक करता है तो यह टेक्स्ट एक स्ट्रिंग के रूप में वापस आ जाता है। यदि उपयोगकर्ता रद्द करें क्लिक करता है, null लौटा दिया गया है:

window.prompt('Please enter your name:');

विंडो डायलॉग्स का सावधानी से उपयोग करें

यह फिर से दोहराने लायक है कि ये विधियां किसी प्रोग्राम के निष्पादन को उसके ट्रैक में रोक देंगी। इसका मतलब यह है कि जब तक उपयोगकर्ता क्लिक नहीं करता, तब तक सब कुछ उस बिंदु पर प्रसंस्करण बंद कर देगा जिसे विधि कहा जाता है ठीक है या रद्द करना. यह समस्या पैदा कर सकता है यदि प्रोग्राम को उसी समय कुछ और संसाधित करने की आवश्यकता है या प्रोग्राम कॉलबैक फ़ंक्शन की प्रतीक्षा कर रहा है।

ऐसे कुछ अवसर होते हैं जब इस कार्यक्षमता का उपयोग एक लाभ के रूप में किया जा सकता है, उदाहरण के लिए, a window.confirm() संवाद का उपयोग अंतिम जांच के रूप में यह देखने के लिए किया जा सकता है कि कोई उपयोगकर्ता किसी संसाधन को हटाना चाहता है या नहीं। यह प्रोग्राम को आगे बढ़ने और संसाधन को हटाने से रोकेगा जबकि उपयोगकर्ता यह तय करता है कि क्या करना है।

यह भी ध्यान में रखने योग्य है कि अधिकांश ब्राउज़र उपयोगकर्ताओं को किसी भी संवाद को बार-बार प्रदर्शित होने से अक्षम करने की अनुमति देते हैं, जिसका अर्थ है कि वे एक ऐसी सुविधा नहीं हैं जिस पर भरोसा किया जाना चाहिए।

ब्राउज़र जानकारी

window ऑब्जेक्ट में कई गुण और विधियाँ हैं जो उपयोगकर्ता के ब्राउज़र के बारे में जानकारी प्रदान करती हैं।

नेविगेटर ऑब्जेक्ट के साथ ब्राउज़र की जानकारी प्राप्त करें

window वस्तु में एक है navigator संपत्ति का संदर्भ देता है Navigator वस्तु। Navigator ऑब्जेक्ट में उपयोग किए जा रहे ब्राउज़र के बारे में जानकारी होती है। इसका userAgent संपत्ति उपयोग किए जा रहे ब्राउज़र और ऑपरेटिंग सिस्टम के बारे में जानकारी लौटाएगी। उदाहरण के लिए, यदि मैं कोड की निम्न पंक्ति चलाता हूं, तो यह दर्शाता है कि मैं मैक ओएस पर सफारी संस्करण 10 का उपयोग कर रहा हूं:

window.navigator.userAgent
>>"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/602.4.8 (KHTML, like Gecko) Version/10.0.3 Safari/602.4.8"

हालांकि, इस जानकारी पर भरोसा न करें, क्योंकि इसे एक उपयोगकर्ता द्वारा एक अलग ब्राउज़र के रूप में छिपाने के लिए संशोधित किया जा सकता है। लौटाए गए स्ट्रिंग का कोई मतलब निकालना भी मुश्किल हो सकता है, क्योंकि सभी ब्राउज़र कुछ हद तक दूसरों के होने का दिखावा करते हैं। उदाहरण के लिए, प्रत्येक ब्राउज़र में “मोज़िला” स्ट्रिंग शामिल होगी userAgent संपत्ति, विरासती नेटस्केप संगतता के कारणों के लिए। userAgent संपत्ति को आधिकारिक विनिर्देश से हटा दिया गया है, लेकिन यह सभी प्रमुख ब्राउज़रों में अच्छी तरह से समर्थित है।

URL विवरण प्राप्त करें: पथ, प्रोटोकॉल, पोर्ट आदि।

window.location संपत्ति एक वस्तु है जिसमें वर्तमान पृष्ठ के URL के बारे में जानकारी होती है। इसमें कई गुण हैं जो URL के विभिन्न अंशों के बारे में जानकारी प्रदान करते हैं।

href संपत्ति एक स्ट्रिंग के रूप में पूरा URL लौटाती है:

window.location.href
>> "

यह संपत्ति (और साथ ही इस खंड में अधिकांश अन्य) एक पढ़ने/लिखने वाली संपत्ति है, जिसका अर्थ है कि इसे असाइनमेंट द्वारा भी बदला जा सकता है। यदि ऐसा किया जाता है, तो नई संपत्ति का उपयोग करके पृष्ठ को पुनः लोड किया जाएगा। उदाहरण के लिए, ब्राउज़र कंसोल में निम्न पंक्ति दर्ज करने से पेज साइटपॉइंट होमपेज पर रीडायरेक्ट हो जाएगा:

window.location.href = '
>> "

protocol संपत्ति इस्तेमाल किए गए प्रोटोकॉल का वर्णन करने वाली एक स्ट्रिंग लौटाती है (जैसे http, https, pop2, ftp आदि।)। ध्यान दें कि एक बृहदान्त्र है (:) अतं मै:

window.location.protocol
>> "https:"

host संपत्ति वर्तमान URL के डोमेन का वर्णन करने वाली एक स्ट्रिंग लौटाती है तथा पोर्ट नंबर (यदि डिफ़ॉल्ट पोर्ट 80 का उपयोग किया जाता है तो इसे अक्सर छोड़ दिया जाता है):

window.location.host
>> "www.sitepoint.com"

hostname संपत्ति वर्तमान URL के डोमेन का वर्णन करने वाली एक स्ट्रिंग लौटाती है:

window.location.hostname
>> "www.sitepoint.com"

port संपत्ति पोर्ट नंबर का वर्णन करने वाली एक स्ट्रिंग लौटाती है, हालांकि यह एक खाली स्ट्रिंग लौटाएगी यदि पोर्ट स्पष्ट रूप से URL में नहीं बताया गया है:

window.location.port
>> ""

pathname संपत्ति उस पथ की एक स्ट्रिंग लौटाती है जो डोमेन का अनुसरण करती है:

window.location.pathname
>> "/premium/books/javascript-novice-to-ninja-2nd-edition/"

search संपत्ति एक स्ट्रिंग लौटाती है जो “?” से शुरू होती है क्वेरी स्ट्रिंग पैरामीटर के बाद। यदि कोई क्वेरी स्ट्रिंग पैरामीटर नहीं है तो यह एक खाली स्ट्रिंग देता है। जब मैं साइटपॉइंट पर “डैरेन जोन्स” खोजता हूं तो मुझे यही मिलता है:

window.location.search
>> "?q=darren%20jones&firstSearch=true"

hash संपत्ति एक स्ट्रिंग लौटाती है जो “#” से शुरू होती है और उसके बाद खंड पहचानकर्ता होती है। यदि कोई खंड पहचानकर्ता नहीं है तो यह एक खाली स्ट्रिंग देता है:

window.location.hash
>> ""

origin संपत्ति एक स्ट्रिंग लौटाती है जो प्रोटोकॉल और डोमेन दिखाती है जहां से वर्तमान पृष्ठ उत्पन्न हुआ है। यह गुण केवल पढ़ने के लिए है, इसलिए इसे बदला नहीं जा सकता:

window.location.origin
>> "

window.location ऑब्जेक्ट में निम्नलिखित विधियाँ भी हैं:

• reload() विधि का उपयोग वर्तमान पृष्ठ को पुनः लोड करने के लिए बाध्य करने के लिए किया जा सकता है। यदि इसे का पैरामीटर दिया गया है trueयह कैश्ड पृष्ठ का उपयोग करने के बजाय ब्राउज़र को सर्वर से पृष्ठ को पुनः लोड करने के लिए बाध्य करेगा।
• assign() पैरामीटर के रूप में प्रदान किए गए URL से किसी अन्य संसाधन को लोड करने के लिए विधि का उपयोग किया जा सकता है, उदाहरण के लिए:

window.location.assign(')

• replace() विधि लगभग समान है assign() विधि, वर्तमान पृष्ठ को छोड़कर सत्र इतिहास में संग्रहीत नहीं की जाएगी, इसलिए उपयोगकर्ता बैक बटन का उपयोग करके उस पर वापस नेविगेट करने में असमर्थ होगा।
• toString() विधि संपूर्ण URL वाली एक स्ट्रिंग लौटाती है:

window.location.toString();
>> "

ब्राउज़र इतिहास

window.history संपत्ति का उपयोग वर्तमान ब्राउज़र सत्र में पहले देखे गए किसी भी पृष्ठ के बारे में जानकारी तक पहुँचने के लिए किया जा सकता है। इसे नए HTML5 इतिहास API के साथ भ्रमित करने से बचें। (विवरण के लिए पोस्ट देखें।)

window.history.length संपत्ति दिखाती है कि वर्तमान पृष्ठ पर पहुंचने से पहले कितने पृष्ठ देखे गए हैं।

window.history.go() विधि का उपयोग किसी विशिष्ट पृष्ठ पर जाने के लिए किया जा सकता है, जहां 0 वर्तमान पृष्ठ है:

window.history.go(1); 
window.history.go(0); 
window.history.go(-1); 

वहाँ भी हैं window.history.forward() तथा window.history.back() वे विधियाँ जिनका उपयोग क्रमशः एक पृष्ठ द्वारा आगे और पीछे नेविगेट करने के लिए किया जा सकता है, ठीक वैसे ही जैसे ब्राउज़र के आगे और पीछे के बटनों का उपयोग करना।

विंडोज़ को नियंत्रित करना

का उपयोग करके एक नई विंडो खोली जा सकती है window.open() तरीका। यह पृष्ठ के यूआरएल को इसके पहले पैरामीटर के रूप में खोला जाता है, विंडो शीर्षक इसके दूसरे पैरामीटर के रूप में, और तीसरे पैरामीटर के रूप में विशेषताओं की एक सूची लेता है। इसे एक चर को भी सौंपा जा सकता है, इसलिए विंडो को बाद में कोड में संदर्भित किया जा सकता है:

const popup = window.open('https://sitepoint.com','SitePoint','width=700,height=700,resizable=yes');

close() विधि का उपयोग विंडो को बंद करने के लिए किया जा सकता है, यह मानते हुए कि आपके पास इसका संदर्भ है:

popup.close();

का उपयोग करके एक विंडो को स्थानांतरित करना भी संभव है window.moveTo() तरीका। यह दो पैरामीटर लेता है जो स्क्रीन के एक्स और वाई निर्देशांक हैं जिन्हें विंडो में ले जाया जाना है:

window.moveTo(0,0); 

आप का उपयोग करके एक विंडो का आकार बदल सकते हैं window.resizeTo() तरीका। यह दो पैरामीटर लेता है जो आकार बदलने वाली विंडो के आयामों की चौड़ाई और ऊंचाई निर्दिष्ट करता है:

window.resizeTo(600,400);

कष्टप्रद पॉपअप

जावास्क्रिप्ट को खराब नाम देने के लिए ये विधियां काफी हद तक जिम्मेदार थीं, क्योंकि इनका उपयोग कष्टप्रद पॉप-अप विंडो बनाने के लिए किया जाता था जिसमें आमतौर पर घुसपैठ वाले विज्ञापन होते थे। उपयोगकर्ता की विंडो का आकार बदलने या स्थानांतरित करने के लिए उपयोगिता के दृष्टिकोण से यह भी एक बुरा विचार है।

कई ब्राउज़र पॉप-अप विंडो को ब्लॉक कर देते हैं और कुछ मामलों में इनमें से कुछ विधियों को कॉल करने की अनुमति नहीं देते हैं। उदाहरण के लिए, यदि एक से अधिक टैब खुले हैं, तो आप विंडो का आकार नहीं बदल सकते। आप उस विंडो को स्थानांतरित या उसका आकार भी नहीं बदल सकते हैं जिसका उपयोग करके नहीं बनाया गया था window.open().

यह दुर्लभ है कि इनमें से किसी भी तरीके का उपयोग करना समझदारी होगी, इसलिए उनका उपयोग करने से पहले बहुत सावधानी से सोचें। लगभग हमेशा एक बेहतर विकल्प होगा, और एक निंजा प्रोग्रामर इसे खोजने का प्रयास करेगा।

स्क्रीन जानकारी

window.screen ऑब्जेक्ट में उस स्क्रीन के बारे में जानकारी होती है जिस पर ब्राउज़र प्रदर्शित होता है। आप पिक्सेल में स्क्रीन की ऊंचाई और चौड़ाई का पता लगा सकते हैं height तथा width गुण क्रमशः:

window.screen.height
>> 1024
window.screen.width
>> 1280

availHeight तथा availWidth किसी भी ऑपरेटिंग सिस्टम मेनू को छोड़कर, स्क्रीन की ऊंचाई और चौड़ाई को खोजने के लिए इस्तेमाल किया जा सकता है:

window.screen.availWidth
>> 1280
window.screen.availHeight
>> 995

colorDepth संपत्ति का उपयोग उपयोगकर्ता के मॉनिटर की रंग बिट गहराई को खोजने के लिए किया जा सकता है, हालांकि उपयोगकर्ता आंकड़े एकत्र करने के अलावा ऐसा करने के लिए कुछ उपयोग मामले हैं:

window.screen.colorDepth;
>> 24

मोबाइल पर अधिक उपयोगी

मोबाइल उपकरणों के लिए स्क्रीन ऑब्जेक्ट का अधिक उपयोग होता है। यह आपको डिवाइस की स्क्रीन को बंद करने, इसके अभिविन्यास में बदलाव का पता लगाने या इसे एक विशिष्ट अभिविन्यास में लॉक करने जैसे काम करने की भी अनुमति देता है।

देखभाल के साथ प्रयोग करें

पिछले अनुभाग में शामिल कई विधियों और गुणों का दुरुपयोग अतीत में संदिग्ध गतिविधियों जैसे उपयोगकर्ता-एजेंट को सूँघने, या स्क्रीन आयामों का पता लगाने के लिए किया गया था ताकि यह तय किया जा सके कि कुछ तत्वों को प्रदर्शित करना है या नहीं। इन प्रथाओं को (शुक्र है) अब मीडिया के प्रश्नों और फीचर डिटेक्शन जैसे बेहतर अभ्यासों से हटा दिया गया है, जिसे अगले अध्याय में शामिल किया गया है।

दस्तावेज़ वस्तु

प्रत्येक window वस्तु में a . है document वस्तु। इस ऑब्जेक्ट में गुण और विधियाँ हैं जो उस पृष्ठ से संबंधित हैं जो विंडो में लोड किया गया है। अध्याय 6 में, हमने दस्तावेज़ ऑब्जेक्ट मॉडल और पृष्ठ पर वस्तुओं में हेरफेर करने के लिए उपयोग किए जाने वाले गुणों और विधियों को कवर किया है। document ऑब्जेक्ट में कुछ अन्य विधियां हैं जो देखने लायक हैं।

document.write()

write() विधि केवल पृष्ठ पर पाठ की एक स्ट्रिंग लिखती है। यदि कोई पृष्ठ पहले ही लोड हो चुका है, तो यह वर्तमान दस्तावेज़ को पूरी तरह से बदल देगा:

document.write('Hello, world!');

यह पूरे दस्तावेज़ को स्ट्रिंग से बदल देगा Hello, world!. HTML को स्ट्रिंग में शामिल करना संभव है और यह DOM ट्री का हिस्सा बन जाएगा। उदाहरण के लिए, कोड का निम्न भाग एक बना देगा

टैग नोड और एक चाइल्ड टेक्स्ट नोड:

document.write('
Hello, world!
');

document.write() विधि का उपयोग किसी दस्तावेज़ के अंदर भी किया जा सकता है

का उपयोग document.write() इस पर भारी नाराजगी है क्योंकि इसे केवल HTML दस्तावेज़ के भीतर जावास्क्रिप्ट को मिलाकर वास्तविक रूप से उपयोग किया जा सकता है। इसके अभी भी कुछ अत्यंत दुर्लभ वैध उपयोग हैं, लेकिन एक निंजा प्रोग्रामर को शायद ही कभी इसका उपयोग करने की आवश्यकता होगी।