244

ฉันเห็นว่าข้อกำหนดเหล่านี้ใช้แทนกันได้เป็นสภาพแวดล้อมทั่วโลกสำหรับ DOM อะไรคือความแตกต่าง (ถ้ามี) และฉันควรใช้แต่ละอันเมื่อใด

javascript

— TimeEmit
แหล่งที่มา

250

Windowเป็นรูทวัตถุหลักของ JavaScript หรือที่เรียกว่าglobal objectในเบราว์เซอร์และยังสามารถใช้เป็นรูทของโมเดลวัตถุเอกสารได้ คุณสามารถเข้าถึงมันเป็นwindow

window.screenหรือเพียงแค่screenเป็นวัตถุข้อมูลขนาดเล็กเกี่ยวกับขนาดหน้าจอทางกายภาพ

window.documentหรือเพียงแค่documentเป็นวัตถุหลักของแบบจำลองวัตถุเอกสารที่มองเห็นได้ (หรือดีกว่า: แสดงผล)

เนื่องจากwindowเป็นวัตถุโกลบอลคุณสามารถอ้างอิงคุณสมบัติใด ๆ ของมันด้วยชื่อคุณสมบัติ - ดังนั้นคุณไม่จำเป็นต้องจดบันทึกwindow.- มันจะถูกคำนวณโดยรันไทม์

— Peter Aron Zentai
แหล่งที่มา

46

เอกสารอาจมีขนาดใหญ่กว่าหน้าต่าง - หน้าต่างเป็นส่วน "มองเห็นได้" ในเบราว์เซอร์ของคุณ

— แมนดี้

1

@ หลายองค์ประกอบ HTML หากไม่ใช่ส่วนหนึ่งของเอกสารจะไม่สามารถมองเห็นได้ คุณสามารถสร้าง iframes ที่มองไม่เห็นหน้าต่างทั้งหมดจนกว่าคุณจะแนบ iframe กับเอกสาร

— Peter Aron Zentai

27

ความคิดเห็นจากสับสน @Mandy windowกับวิวพอร์ต A windowคือวัตถุ JavaScript สำหรับแท็บเบราว์เซอร์หรือ<iframe>(หรือเลิกใช้งาน<frame>) วิวพอร์ตเป็นรูปสี่เหลี่ยมผืนผ้าของการแสดงผลdocumentที่เห็นภายในแท็บหรือกรอบ

— Bennett Brown

2

window.document หรือเอกสารเหมือนกันตลอดเวลา?

— BOZ

2

เนื่องจาก window เป็นวัตถุระดับโลก - คุณสมบัติ / วิธีการทุกอย่างของมันสามารถเข้าถึงได้โดยไม่ต้องเขียน [window] จริง ๆ ดังนั้น window.document สามารถเขียนเป็นเอกสารได้และแน่นอนว่ามันชี้ไปที่สิ่งเดียวกัน - เนื่องจากคุณสมบัติเอง มีการอ้างอิงหลายวิธีเหมือนกัน

— Peter Aron Zentai

102

หน้าต่างเป็นสิ่งแรกที่โหลดเข้าไปในเบราว์เซอร์ วัตถุหน้าต่างนี้มีคุณสมบัติส่วนใหญ่เช่นความยาว, InnerWidth, InnerHeight, ชื่อถ้ามันถูกปิด, ผู้ปกครองและอื่น ๆ

แล้ววัตถุเอกสารล่ะ? วัตถุเอกสารคือ html, aspx, php หรือเอกสารอื่น ๆ ที่จะโหลดลงในเบราว์เซอร์ เอกสารได้รับการโหลดจริงภายในวัตถุหน้าต่างและมีคุณสมบัติเช่นชื่อเรื่อง, URL, คุกกี้, ฯลฯ สิ่งนี้หมายความว่าอะไร? นั่นหมายความว่าถ้าคุณต้องการเข้าถึงคุณสมบัติสำหรับหน้าต่างมันคือ window.property หากเป็นเอกสารมันคือ window.document.property ซึ่งมีให้ใช้งานสั้น ๆ เช่น document.property

ดูเหมือนง่ายพอ แต่จะเกิดอะไรขึ้นเมื่อมีการแนะนำ IFRAME

ดูเพิ่มเติมได้ที่: http://eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/#sthash.CwLGOk9c.dpuf

— Arlan T
แหล่งที่มา

14

ทำให้เข้าใจผิดสำหรับคนที่พยายามเรียนรู้พื้นฐาน: "วัตถุเอกสารคือ html, aspx, php หรือเอกสารอื่น ๆ ที่จะโหลดลงในเบราว์เซอร์" เบราว์เซอร์แสดงผล HTML และ CSS และดำเนินการ JavaScript เบราว์เซอร์จะไม่เห็นไฟล์ที่มีภาษาฝั่งเซิร์ฟเวอร์เช่น PHP

— Bennett Brown

นี่คือจริงๆคำอธิบายที่เป็นประโยชน์ตามด้วยภาพเพื่อความเข้าใจ ..

— Faris Rayhan

49

สั้น ๆ โดยมีรายละเอียดเพิ่มเติมด้านล่าง

window เป็นบริบทการดำเนินการและวัตถุส่วนกลางสำหรับ JavaScript ของบริบทนั้น
document มี DOM เริ่มต้นโดยการแยก HTML
screen อธิบายแบบเต็มจอแสดงผลทางกายภาพ

ดูการอ้างอิงW3CและMozillaสำหรับรายละเอียดเกี่ยวกับวัตถุเหล่านี้ ความสัมพันธ์ขั้นพื้นฐานที่สุดในบรรดาสามแท็บนั้นคือแต่ละแท็บเบราว์เซอร์มีของตัวเองwindowและwindowมีwindow.documentและwindow.screenคุณสมบัติ เบราว์เซอร์ของแท็บwindowเป็นบริบทของโลกดังนั้นdocumentและscreenอ้างถึงและwindow.document window.screenรายละเอียดเพิ่มเติมเกี่ยวกับวัตถุสามอยู่ด้านล่างต่อไปนี้ฟลานาแกน JavaScript: คู่มือการแตกหัก

`window`

แต่ละแท็บเบราว์เซอร์มีwindowวัตถุระดับบนสุดของตัวเอง แต่ละองค์ประกอบ<iframe>(และเลิกใช้งาน<frame>) มีwindowวัตถุของตัวเองเช่นกันซ้อนกันภายในหน้าต่างหลัก แต่ละหน้าต่างเหล่านี้จะได้รับออบเจกต์ร่วมของตัวเอง window.windowอ้างถึงเสมอwindowแต่window.parentและwindow.topอาจอ้างอิงถึงการปิดหน้าต่างให้การเข้าถึงบริบทการดำเนินการอื่น ๆ นอกเหนือจากdocumentและscreenอธิบายด้านล่างwindowคุณสมบัติรวมถึง

setTimeout()และsetInterval()ตัวจัดการเหตุการณ์ที่มีผลผูกพันกับตัวจับเวลา
location ให้ URL ปัจจุบัน
historyด้วยวิธีการback()และforward()ให้ประวัติที่ไม่แน่นอนของแท็บ
navigator อธิบายซอฟต์แวร์เบราว์เซอร์

`document`

แต่ละwindowวัตถุมีdocumentวัตถุที่จะแสดงผล วัตถุเหล่านี้สับสนในส่วนหนึ่งเนื่องจากองค์ประกอบ HTML ถูกเพิ่มไปยังวัตถุทั่วโลกเมื่อกำหนด id ที่ไม่ซ้ำกัน เช่นในตัวอย่าง 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ละเว้นแถบเครื่องมือ

ส่วนของหน้าจอที่แสดงเอกสารที่ถูกเรนเดอร์คือวิวพอร์ตใน JavaScript ซึ่งอาจเกิดความสับสนเนื่องจากเราเรียกส่วนหน้าต่างของหน้าจอแอปพลิเคชันเมื่อพูดถึงการโต้ตอบกับระบบปฏิบัติการ getBoundingClientRect()วิธีการใด ๆdocumentองค์ประกอบที่จะกลับมาพร้อมกับวัตถุtop, left, bottomและrightคุณสมบัติอธิบายสถานที่ตั้งขององค์ประกอบในวิวพอร์ต

— เบนเน็ตต์บราวน์
แหล่งที่มา

มีคำสั่งเทียบเท่ากับการwindow.onloadใช้วัตถุเอกสารหรือไม่

— FilipeCanatto

@FilipeCanatto ดูstackoverflow.com/questions/588040/…

— Bennett Brown

48

windowเป็นวัตถุที่ทั่วโลกที่เกิดขึ้นจริง

screenเป็นหน้าจอมันมีคุณสมบัติเกี่ยวกับการแสดงของผู้ใช้

ที่documentเป็นที่ DOM คือ

— Niet the Dark Absolute
แหล่งที่มา

11

documentนอกจากนี้ยังสามารถwindow.document, screenสามารถwindow.screenและwindowสามารถwindow.window(หรือwindow.window.window) :-P

— จรวดวัตถุอันตราย

6

@PeterAronZentai: นั่นเป็นเพราะwindowตัวแปรทั่วโลกซึ่งทำให้ทรัพย์สินของwindowวัตถุทั่วโลก :-)

— Rocket Hazmat

1

ฉันต้องเปิดหน้าใหม่โดย ajax ฉันต้องการแทนที่หน้าปัจจุบันทั้งหมดด้วยหน้าใหม่ ฉันควรใช้ $ (เอกสาร). load (หน้า); หรือ $ (หน้าต่าง) .load (หน้า); ?

— มาร์ติน AJ

11

windowมีทุกอย่างเพื่อให้คุณสามารถโทรwindow.screenและwindow.documentที่จะได้รับองค์ประกอบเหล่านั้น ตรวจสอบซอนี้ค่อนข้างพิมพ์เนื้อหาของแต่ละวัตถุ: http://jsfiddle.net/JKirchartz/82rZu/

คุณยังสามารถดูเนื้อหาของวัตถุในเครื่องมือ firebug / dev ดังนี้:

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

windowเป็นรากของทุกสิ่งscreenเพียงแค่มีขนาดหน้าจอและdocumentเป็นวัตถุ DOM ด้านบน เพื่อให้คุณสามารถคิดว่ามันเป็นwindowเหมือนซุปเปอร์document...

— JKirchartz
แหล่งที่มา

1

หน้าต่างเป็นสิ่งแรกที่โหลดเข้าสู่เบราว์เซอร์ วัตถุหน้าต่างนี้มีคุณสมบัติส่วนใหญ่เช่นความยาว, InnerWidth, InnerHeight, ชื่อ, ถ้ามันถูกปิด, พาเรนต์และอื่น ๆ

วัตถุเอกสารคือ html, aspx, php หรือเอกสารอื่น ๆ ที่จะโหลดลงในเบราว์เซอร์ เอกสารได้รับการโหลดจริงภายในวัตถุหน้าต่างและมีคุณสมบัติที่สามารถใช้ได้เช่นชื่อเรื่อง, URL, คุกกี้, ฯลฯ สิ่งนี้หมายความว่าอะไร? นั่นหมายความว่าถ้าคุณต้องการเข้าถึงคุณสมบัติสำหรับหน้าต่างมันคือ window.property ถ้ามันเป็นเอกสารมันคือ window.document.property ซึ่งมีให้ใช้งานสั้น ๆ ว่า document.property

ดูเพิ่มเติมได้ที่: http://eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/#sthash.CVkTMIL7.dpuf

— Manjunath Raddi
แหล่งที่มา

ความแตกต่างระหว่างหน้าต่างหน้าจอและเอกสารใน Javascript คืออะไร

window

document

screen

`window`

`document`

`screen`