जावास्क्रिप्ट में विंडो, स्क्रीन और दस्तावेज़ के बीच अंतर क्या है?


244

मैं देख रहा हूं कि ये शब्द DOM के लिए वैश्विक वातावरण के रूप में इस्तेमाल किए जाते हैं। क्या अंतर है (अगर वहाँ एक है) और मुझे हर एक का उपयोग कब करना चाहिए?

जवाबों:


250

Windowglobal objectएक ब्राउज़र में मुख्य जावास्क्रिप्ट ऑब्जेक्ट रूट, उर्फ , भी दस्तावेज़ ऑब्जेक्ट मॉडल के मूल के रूप में माना जा सकता है। आप इसे एक्सेस कर सकते हैंwindow

window.screenया सिर्फ screenभौतिक स्क्रीन आयामों के बारे में एक छोटी जानकारी वस्तु है।

window.documentया बस documentसंभावित वस्तु का मुख्य उद्देश्य है (या बेहतर अभी तक: प्रस्तुत) दस्तावेज़ ऑब्जेक्ट मॉडल / DOM।

चूंकि windowवैश्विक वस्तु है, तो आप इसके किसी भी गुण को केवल संपत्ति के नाम के साथ संदर्भित कर सकते हैं - इसलिए आपको नीचे लिखने की ज़रूरत नहीं है window.- यह रनटाइम द्वारा पता लगाया जाएगा।


46
एक दस्तावेज़ एक खिड़की से बड़ा हो सकता है - खिड़की आपके ब्राउज़र में "दृश्यमान" भाग है।
मैंडी

1
अगर यह दस्तावेज़ का हिस्सा नहीं है तो @Mandy html तत्व दिखाई नहीं देता है। आप iframes बना सकते हैं, जिनकी विंडो पूरी तरह से दिखाई नहीं दे रही है जब तक कि आप iframe को डॉक्यूमेंट में संलग्न नहीं करते हैं
पीटर एरन ज़ेंटाई

27
@Mandy की टिप्पणी व्यूपोर्ट केwindow साथ भ्रमित करती है । A ब्राउज़र टैब या (या पदावनत ) के लिए जावास्क्रिप्ट ऑब्जेक्ट है । व्यूपोर्ट का गाया आयत है टैब या सीमा के भीतर देखा। window<iframe><frame>document
बेनेट ब्राउन

2
window.document या दस्तावेज़ हर समय समान है?
BOZ

2
चूँकि विंडो वैश्विक वस्तु है - इसका प्रत्येक गुण / विधि वास्तव में नीचे लिखे बिना ही पहुँचा जा सकता है [खिड़की।] इसलिए window.document को केवल दस्तावेज़ के रूप में लिखा जा सकता है, और निश्चित रूप से यह बहुत ही चीज़ की ओर इशारा करता है - संपत्ति के रूप में एक ही है कई तरीकों से संदर्भित।
पीटर एरन ज़ेंटई

102

खैर, खिड़की पहली चीज है जो ब्राउज़र में लोड हो जाती है। इस विंडो ऑब्जेक्ट में लंबाई, इनरव्हीड, इनरहाइट, नाम जैसे गुणों का बहुमत है, अगर इसे बंद कर दिया गया है, तो इसके माता-पिता, और बहुत कुछ।

दस्तावेज़ वस्तु के बारे में तब क्या? दस्तावेज़ ऑब्जेक्ट आपका html, aspx, php, या अन्य दस्तावेज़ है जिसे ब्राउज़र में लोड किया जाएगा। दस्तावेज़ वास्तव में विंडो ऑब्जेक्ट के अंदर लोड हो जाता है और इसके पास शीर्षक, URL, कुकी आदि जैसे गुण उपलब्ध हैं, इसका वास्तव में क्या मतलब है? इसका मतलब है कि अगर आप विंडो के लिए किसी प्रॉपर्टी को एक्सेस करना चाहते हैं तो वह है विंडो ।property, अगर यह डॉक्यूमेंट है तो यह window.document.property है जो कि document.property के रूप में भी उपलब्ध है।

डोम

यह काफी सरल लगता है। लेकिन IFRAME शुरू होने के बाद क्या होता है?

iframe


14
मूल बातें सीखने की कोशिश करने वाले किसी व्यक्ति के लिए भ्रामक: "दस्तावेज़ ऑब्जेक्ट आपका html, aspx, php, या अन्य दस्तावेज़ है जो ब्राउज़र में लोड किया जाएगा।" ब्राउज़र HTML और CSS का प्रतिपादन करता है और जावास्क्रिप्ट को क्रियान्वित करता है। PHP जैसी सर्वर-साइड भाषाओं वाली फाइलें ब्राउज़र द्वारा नहीं देखी जाती हैं।
बेनेट ब्राउन

बेहतर समझ के लिए चित्र के बाद यह वास्तव में सहायक व्याख्या है ..
फारिस रेहान

49

संक्षेप में, नीचे और अधिक विवरण के साथ,

  • window उस संदर्भ के जावास्क्रिप्ट के लिए निष्पादन संदर्भ और वैश्विक वस्तु है
  • document HTML को पार्स करके आरंभ किया गया DOM शामिल है
  • screen भौतिक प्रदर्शन की पूर्ण स्क्रीन का वर्णन करता है

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

window

प्रत्येक ब्राउज़र टैब का अपना शीर्ष-स्तरीय windowऑब्जेक्ट होता है। प्रत्येक <iframe>(पदावनत <frame>) तत्व की अपनी windowवस्तु भी होती है, जो एक मूल विंडो के भीतर होती है। इन खिड़कियों में से प्रत्येक को अपनी अलग वैश्विक वस्तु मिलती है। window.windowहमेशा के लिए संदर्भित करता windowहै, लेकिन window.parentऔर window.topenclosing खिड़कियां, अन्य निष्पादन संदर्भों का उपयोग करने देने का उल्लेख हो सकता है। नीचे वर्णित documentऔर इसके अलावा screen, windowगुणों में शामिल हैं

  • setTimeout()और setInterval()एक टाइमर के लिए बाध्यकारी घटना संचालकों
  • location वर्तमान URL दे रहा है
  • historyविधियों के साथ back()और forward()टैब का पारस्परिक इतिहास दे रहा है
  • navigator ब्राउज़र सॉफ़्टवेयर का वर्णन करना

document

प्रत्येक windowवस्तु को documentप्रदान की जाने वाली वस्तु है। ये ऑब्जेक्ट भाग में भ्रमित हो जाते हैं क्योंकि HTML तत्वों को एक अद्वितीय आईडी असाइन किए जाने पर वैश्विक ऑब्जेक्ट में जोड़ा जाता है। जैसे, HTML स्निपेट में

<body>
  <p id="holyCow"> This is the first paragraph.</p>
</body>

पैरा तत्व को निम्नलिखित में से किसी के द्वारा संदर्भित किया जा सकता है:

  • window.holyCow या window["holyCow"]
  • document.getElementById("holyCow")
  • document.body.firstChild
  • document.body.children[0]

screen

windowवस्तु भी एक है screenशारीरिक प्रदर्शन का वर्णन गुणों के साथ वस्तु:

  • स्क्रीन गुण widthऔर heightपूर्ण स्क्रीन हैं

  • स्क्रीन गुण availWidthऔर availHeightटूलबार को छोड़ दें

प्रस्तुत दस्तावेज़ को प्रदर्शित करने वाली स्क्रीन का एक भाग जावास्क्रिप्ट में व्यूपोर्ट है, जो संभावित रूप से भ्रमित करने वाला है क्योंकि हम ऑपरेटिंग सिस्टम के साथ बातचीत के बारे में बात करते समय स्क्रीन के एक एप्लिकेशन के हिस्से को विंडो कहते हैं। getBoundingClientRect()किसी भी विधि documentतत्व के साथ एक वस्तु वापस आ जाएगी top, left, bottom, और rightव्यूपोर्ट में तत्व के स्थान का वर्णन गुण।


window.onloadदस्तावेज़ ऑब्जेक्ट का उपयोग करने के लिए एक समान निर्देश है ?
फिलिप्पाट्टान्टो


48

windowवास्तविक वैश्विक वस्तु है।

screenस्क्रीन है, यह उपयोगकर्ता के प्रदर्शन के बारे में गुण होते हैं।

वह जगह documentहै जहाँ DOM है।


11
documentयह भी हो सकता है window.document, screenहो सकता है window.screen, और windowहो सकता है window.window(या window.window.window) :-P
रॉकेट Hazmat

6
@PeterAronZentai: ऐसा इसलिए windowहै क्योंकि यह एक वैश्विक चर है, जो इसे वैश्विक windowवस्तु का गुण बनाता है । :-)
रॉकेट हज़मत

1
मुझे अजाक्स द्वारा एक नया पृष्ठ खोलने की आवश्यकता है, मैं पूरे वर्तमान पृष्ठ को नए के साथ बदलना चाहता हूं। क्या मुझे $ (दस्तावेज़) .लोड (पृष्ठ) का उपयोग करना चाहिए; या $ (विंडो) .लोड (पेज); ?
मार्टिन ए जे

11

windowताकि आप कॉल कर सकते हैं, सब कुछ होता है window.screenऔर window.documentउन तत्वों को प्राप्त करने के लिए। इस फिडेल को देखें, प्रत्येक वस्तु की सामग्री को सुंदर-छपाई: http://jsfiddle.net/JKirchartz/82rZu/

आप फायरबग / डेव टूल्स में ऑब्जेक्ट की सामग्री को इस तरह भी देख सकते हैं:

console.dir(window);
console.dir(document);
console.dir(screen);

windowसब कुछ की जड़ है, screenबस स्क्रीन आयाम है, और documentशीर्ष DOM ऑब्जेक्ट है। तो आप इसे windowसुपर की तरह होने के बारे में सोच सकते हैं document...


1

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

दस्तावेज़ ऑब्जेक्ट आपका html, aspx, php, या अन्य दस्तावेज़ है जिसे ब्राउज़र में लोड किया जाएगा। दस्तावेज़ वास्तव में विंडो ऑब्जेक्ट के अंदर लोड हो जाता है और इसमें शीर्षक, URL, कुकी आदि जैसे गुण उपलब्ध होते हैं, इसका वास्तव में क्या मतलब है? इसका मतलब है कि अगर आप विंडो के लिए किसी प्रॉपर्टी को एक्सेस करना चाहते हैं तो वह है विंडो ।property, अगर यह डॉक्यूमेंट है तो यह window.document.property है जो कि document.property के रूप में भी उपलब्ध है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.