ความแตกต่างระหว่าง window.location และ document.location ใน JavaScript คืออะไร

241

ทั้งคู่ควรอ้างอิงวัตถุเดียวกันหรือไม่

javascript window.location

1

สำหรับกรณีการใช้งานที่แสดงความแตกต่างโปรดดูstackoverflow.com/a/12098898/632951

— Pacerier

220

ตาม W3C พวกเขาเหมือนกัน ในความเป็นจริงเพื่อความปลอดภัยของเบราว์เซอร์ข้ามคุณควรใช้มากกว่าwindow.locationdocument.location

ดู: http://www.w3.org/TR/html/browsers.html#dom-location

— ราหุล
แหล่งที่มา

12

downvoted คำตอบที่ขัดแย้ง มันกล้าพูดว่าพวกเขาเหมือนกันแล้วอธิบายความแตกต่างในข้อความที่เบากว่า พวกเขาไม่เหมือนกันอย่างแน่นอน

— danorton

33

C'mon กระตุ้นให้ผู้ลงคะแนนมีความสุขเบาขึ้นเล็กน้อย ส่วนใหญ่พวกเขามีพฤติกรรมคล้ายกันเมื่อพิจารณาถ้ำโดยราหุล อย่าตอกย้ำเขาในความหมาย ฟิลาเดลเฟียสุภาพบุรุษ ฉันคนหนึ่งพบว่าคำตอบของเขาน่าพอใจอย่างเต็มที่ +1 (ของ Christoph ควรเป็นคำตอบที่ได้รับการยอมรับ แต่ราหุลเป็นที่ยอมรับ - อย่างน้อยไม่คุ้มกับการลงคะแนน)

— cssyphus

7

-1 สำหรับการแนะนำแนวทางปฏิบัติที่ดีที่สุด (ใช้งานเสมอwindow.location) โดยไม่ต้องให้เหตุผลใด ๆ หากคุณจะไม่ให้เหตุผลทำไมทุกคนควรใช้คำแนะนำของคุณ? คำตอบของ Christoph นั้นมีประโยชน์มากกว่าในเรื่องนี้

— Mark Amery

+1 แต่เห็นคำตอบของ Phil Hamer และ Christoph ด้านล่างพวกเขาเพิ่มข้อมูลพื้นฐานที่จำเป็นและคำเตือนเพื่อให้เข้าใจปัญหาได้อย่างสมบูรณ์

— Jon z

จริง ๆ แล้วฉันสังเกตเห็นความแตกต่างระหว่างทั้งสองตัวอย่างเช่นถ้าคุณต้องการทำการนำทางไปยังเฟรม sandboxed จากเฟรมเด็กจากนั้นคุณสามารถทำได้เพียงแค่ document.location แต่ไม่ได้มี window.location

— M.Abulsoud

207

วิธีที่เป็นที่ยอมรับในการรับวัตถุตำแหน่งปัจจุบันคือwindow.location(ดูหน้า MSDN นี้ตั้งแต่ปี 1996และW3C ฉบับร่างจากปี 2549 )

เปรียบเทียบสิ่งนี้กับdocument.locationซึ่ง แต่เดิมส่งคืน URL ปัจจุบันเป็นสตริงเท่านั้น (ดูหน้านี้บน MSDN ) น่าจะเป็นที่จะหลีกเลี่ยงความสับสนdocument.locationถูกแทนที่ด้วยdocument.URL(ดูที่นี่ใน MSDN ) ซึ่งเป็นส่วนหนึ่งของDOM ระดับ 1

เท่าที่ฉันรู้เบราว์เซอร์ที่ทันสมัยทั้งหมดdocument.locationจะจับคู่กับwindow.locationแต่ฉันยังคงชอบwindow.locationที่เป็นสิ่งที่ฉันใช้ตั้งแต่ฉันเขียน DHTML ครั้งแรกของฉัน

— คริสโต
แหล่งที่มา

1

ถ้าคุณใช้window.locationมันไม่ถูกต้องหรือที่จะใช้location?

— commonpike

2

@commonpike เป็น - ในบริบทของสคริปต์ใน [อย่างน้อย] เอกสาร HTML วัตถุทั่วโลกที่ตัวแปรที่กำหนดทั้งหมดกลายเป็นคุณสมบัติเป็นwindowวัตถุ ดังนั้นตัวแปรหรือฟังก์ชั่นที่คุณกำหนดที่ระดับบนสุดของสคริปต์ของคุณเป็นคุณสมบัติของวัตถุที่อ้างอิงโดยwindowซึ่งเกิดขึ้นเป็นวัตถุทั่วโลก วัตถุทั่วโลกเป็นนัยเมื่อขาดเช่นwindow.- จึงถูกตีความว่าจะเป็นlocation window.locationCaveats - fe if(an_undefined_variable)จะโยนข้อผิดพลาดหากไม่ได้กำหนดตัวแปร - if(window.an_undefined_variable)จะไม่เกิดขึ้น

— พฤศจิกายน

92

window.locationอ่าน / เขียนบนเบราว์เซอร์ที่เข้ากันได้ทั้งหมด

document.locationเป็นแบบอ่านอย่างเดียวใน Internet Explorer (อย่างน้อย) แต่อ่าน / เขียนในเบราว์เซอร์ที่ใช้ Gecko (Firefox, SeaMonkey)

— Frédéric Hamidi
แหล่งที่มา

10

ฉันไม่สามารถสร้างการอ้างสิทธิ์ที่document.locationอ่านได้อย่างเดียวใน IE ฉันสามารถกำหนดให้สำเร็จใน IE 10, 9, 8 และ 6 (โดยใช้ VM จากmodern.ie )

— Mark Amery

ความคิดเห็นใด ๆ ในconsole.log(location);? !!

— Fr0zenFyr

44

document.locationเดิมเป็นคุณสมบัติแบบอ่านอย่างเดียว แต่เบราว์เซอร์ Geckoช่วยให้คุณสามารถกำหนดได้ เพื่อความปลอดภัยข้ามเบราว์เซอร์ให้ใช้window.locationแทน

อ่านเพิ่มเติม:

document.location

window.location

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

ฉันไม่สามารถหาคำตอบที่ชัดเจนเมื่อใช้ใด ๆ ของพวกเขาดูที่คำตอบของฉันด้านล่าง

— M.Abulsoud

37

น่าสนใจถ้าคุณมีเฟรมรูปภาพหรือฟอร์มชื่อ 'ตำแหน่งที่ตั้ง' ดังนั้น 'document.location' จะให้การอ้างอิงไปยังหน้าต่างเฟรมรูปภาพหรือฟอร์มตามลำดับแทนที่จะเป็นวัตถุตำแหน่ง เห็นได้ชัดว่านี่เป็นเพราะการค้นหาชื่อคอลเล็กชัน document.forms, document.images และ window.frames มีความสำคัญมากกว่าการแมปไปยัง window.location

<img name='location' src='location.png'>

if (document.location.tagName == 'IMG') alert('Hello!')

— Phil Hamer
แหล่งที่มา

2

ไม่มีความสำคัญเป็นเพียงเขียนทับ

— Pacerier

7

ไม่มันไม่ถูกเขียนทับ มันเป็นเงาดังนั้นฟิลจึงถูกต้องเกี่ยวกับองค์ประกอบที่มีความสำคัญในระหว่างการแก้ไขคุณสมบัติ

— kangax

@kangax, ดูเหมือนว่าคุณมีสิทธิ: jsfiddle.net/uL4ysszr แต่พฤติกรรมนี้น่าเชื่อถือเพียงใด ข้ามเบราว์เซอร์เพียงพอหรือไม่

— Pacerier

1

เพิ่งทดสอบสิ่งนี้ (ตุลาคม 2559) ปรากฏว่าwindow.locationและdocument.locationไม่สามารถแรเงาใน Chrome หรือ Firefox

— Mr. Llama

1

@ Mr.Llama คุณพูดถูก ปรากฏว่าเบราว์เซอร์สมัยใหม่ทั้งหมดไม่ทำงานในลักษณะที่ฉันอธิบายไว้ข้างต้นอีกต่อไป ดูเหมือนว่าจะเกิดจากการให้ document.location แอตทริบิวต์ "Unforgeable" การเปลี่ยนแปลง Chromium ที่เกี่ยวข้อง: src.chromium.org/viewvc/blink?view=revision&revision=189862และข้อบกพร่องของ Firefox: bugzilla.mozilla.org/show_bug.cgi?id=1133760

— Phil Hamer

27

เท่าที่ฉันรู้ทั้งสองเหมือนกัน เพื่อความปลอดภัยของเบราว์เซอร์ข้ามคุณสามารถใช้มากกว่าwindow.locationdocument.location

เบราว์เซอร์ที่ทันสมัยทั้งหมดแมปdocument.locationกับwindow.locationแต่ฉันยังคงชอบwindow.locationที่เป็นสิ่งที่ฉันใช้ตั้งแต่ฉันเขียนหน้าแรก มันสอดคล้องกันมากขึ้น

คุณยังสามารถเห็นdocument.location === window.locationผลตอบแทนtrueซึ่งชี้แจงว่าทั้งสองเหมือนกัน

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

14

document.location === window.location ผลตอบแทน true

ด้วย

document.location.constructor === window.location.constructor คือ true

หมายเหตุ: เพิ่งทดสอบกับ, Firefox 3.6, Opera 10 และ IE6

— คุณ
แหล่งที่มา

1

@Pierier ทำไม? สำหรับวัตถุ===และ==เทียบเท่า

— Mark Amery

4

@MarkAmery นั่นคือผิดและสามารถแสดงให้เห็นได้อย่างง่ายดาย: "abc" == new String("abc")ผลตอบแทนtrueในขณะที่ผลตอบแทน"abc" === new String("abc") false

— Pacerier

7

@Pacerier เอาล่ะผมขอบอกว่าค่อนข้างเข้มงวดและคลุมเครือเล็กน้อย: เมื่อเปรียบเทียบวัตถุสองชิ้นกับแต่ละอื่น ๆ (แทนที่จะเป็นเพียงวัตถุที่มีอะไร) ==และ===เทียบเท่า ดูข้อมูลจำเพาะส่วนที่ 11.9.3 และ 11.9.6 สำหรับค่าที่ไม่ใช่ค่า Null, ไม่ใช่ค่ากำหนด, ไม่ใช่ตัวเลข, ไม่ใช่บูล, ไม่ใช่ค่าสตริงที่มีชนิดเดียวกัน==พฤติกรรมจะถูกควบคุมโดย 11.9.3 ส่วนที่ 1f และ===พฤติกรรมตาม 11.9.6 ส่วนที่ 7 ซึ่งอ่านค่าส่งคืนtrueหาก x และ y หมายถึงวัตถุเดียวกัน falseมิฉะนั้นกลับ

— Mark Amery

10

@MarkAmery, ไม่มีการรับประกันว่าทั้งสองไม่เป็นdocument.locationและwindow.locationจะชี้ไปที่วัตถุ คุณพลาดจุดรวมของสามเท่ากับ ใช้ 2 เท่ากับไม่ได้พิสูจน์ว่าพวกเขาเป็น obj เดียวกัน เราควรใช้ 3 เท่ากับและไม่เท่ากับ 2 เพราะ 2 เท่ากับจะให้ค่าบวกเท็จ บนเบราว์เซอร์โดย document.location เป็นสตริง URL เท่ากับwindow.location.toString()จากนั้นdocument.location==window.locationจะคืนค่าจริงขณะที่document.location===window.locationจะคืนค่าเท็จ

— Pacerier

@Pacerier Aha - ฉันได้รับมันในที่สุด คุณค่อนข้างถูกต้องอย่างน้อยที่สุดก็ถึงการdocument.location === window.locationเปรียบเทียบ ความจริงที่ว่าการ.constructorเปรียบเทียบถูกโยนด้วยวิธีที่มากเกินไปฉันคิดว่าคำตอบนี้ยังคงฟังดูดี แต่การใช้===จะทำให้การใช้เหตุผลง่ายขึ้น

— Mark Amery

11

ใช่พวกเขาเหมือนกัน มันเป็นหนึ่งในเรื่องราวที่ผ่านมามากมายใน JS API ของเบราว์เซอร์ ลองทำ:

window.location === document.location

— Matthew Flaschen
แหล่งที่มา

8

window.location มีความสอดคล้องที่น่าเชื่อถือมากขึ้นในสองเรื่องนี้โดยพิจารณาจากเบราว์เซอร์รุ่นเก่า

— Dave Ward
แหล่งที่มา

3

ทุกวันนี้ยากที่จะเห็นความแตกต่างเนื่องจาก html 5 ไม่รองรับเฟรมเซตอีกต่อไป แต่เมื่อถึงเวลาที่เรามี frameset, document.location จะเปลี่ยนเส้นทางเฉพาะเฟรมที่โค้ดถูกประมวลผลและ window.location จะเปลี่ยนเส้นทางหน้าทั้งหมด

— Marquinho Peli
แหล่งที่มา

2

ฉันจะบอกว่า window.locationเป็นวิธีที่น่าเชื่อถือมากขึ้นในการได้รับในปัจจุบันURL ต่อไปนี้เป็นความแตกต่างระหว่างwindow.locationและdocument.urlที่มาก่อนหนึ่งในสถานการณ์ที่ฉันได้ต่อท้ายพารามิเตอร์แฮชใน URL และอ่านในภายหลัง

หลังจากเพิ่มพารามิเตอร์แฮใน URL

ในเบราว์เซอร์รุ่นเก่าฉันไม่สามารถรับพารามิเตอร์แฮชจาก URL โดยใช้document.urlแต่เมื่อฉันใช้window.locationแล้วฉันก็สามารถรับพารามิเตอร์แฮชได้จาก URL

window.locationดังนั้นก็มักจะดีกว่าที่จะใช้

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

1

-1 คำถามที่ไม่ได้พูดถึงdocument.URL- มันเป็นเรื่องเกี่ยวกับและwindow.location document.locationยังdocument.urlไม่มีอยู่ = ควรเป็นตัวพิมพ์ใหญ่

— Mark Amery

2

document.location.constructor === window.location.constructor คือ trueเป็น

เป็นเพราะมันเป็นวัตถุเดียวกับที่คุณเห็น document.location===window.locationก็เพราะมันเป็นเหมือนวัตถุเดียวกันในขณะที่คุณสามารถดูได้จาก

ดังนั้นไม่จำเป็นต้องเปรียบเทียบคอนสตรัคเตอร์หรือคุณสมบัติอื่นใด

— ยีน Karasev
แหล่งที่มา

2

อย่างน้อยใน IE มันมีความแตกต่างเล็กน้อยในไฟล์ในเครื่อง:

document.URL จะส่งคืน "ไฟล์: // C: \ projects \ abc \ a.html"

แต่ window.location.href จะส่งคืน "file: /// C: /projects/abc/a.html"

หนึ่งคือแบ็กสแลช, หนึ่งคือฟอร์เวิร์ดสแลช

— จัสติน
แหล่งที่มา

2

ใช่พวกมันเหมือนกัน แต่ .... !

window.location ไม่ทำงานบนเบราว์เซอร์ Internet Explorer บางตัว

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

0

แม้จะมีผู้คนส่วนใหญ่แนะนำที่นี่ แต่เป็นวิธีที่โพรโทคอลไดนามิกของGoogle Analyticsดูเหมือนเป็นเวลานาน (ก่อนที่พวกเขาจะย้ายจาก ga.js ไปยัง analytics.js เมื่อเร็ว ๆ นี้):

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

ข้อมูลเพิ่มเติม: https://developers.google.com/analytics/devguides/collection/gajs/

ในเวอร์ชันใหม่พวกเขาใช้ '//' เพื่อให้เบราว์เซอร์สามารถเพิ่มโปรโตคอลโดยอัตโนมัติ:

'//www.google-analytics.com/analytics.js'

ดังนั้นหากGoogleชอบdocument.locationไปwindow.locationเมื่อพวกเขาต้องการโปรโตคอลใน JS ผมคิดว่าพวกเขามีเหตุผลบางอย่างที่

โดยรวมแล้ว : โดยส่วนตัวแล้วฉันเชื่ออย่างนั้นdocument.locationและwindow.locationเหมือนกัน แต่ถ้ายักษ์ที่มีสถิติมากที่สุดเกี่ยวกับการใช้งานเบราว์เซอร์เช่นGoogleโดยใช้document.locationฉันแนะนำให้ติดตามพวกเขา

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

2

ฉันไม่ได้ลงคะแนนอย่างไรก็ตามอาจเป็นเพราะนี่เป็นคำถามที่เก่ามากและคำตอบของคุณไม่ได้ให้หลักฐานใหม่หรือมีค่าใด ๆ ที่ดีกว่าอีกคำถามหนึ่ง หรืออาจเป็นเพราะคำตอบของคุณแนะนำตรงข้ามกับความคิดเห็นสาธารณะไม่ว่าคุณจะทำบุญในสิ่งที่ Google ทำมาในอดีต หรืออาจเป็นได้ว่าผู้ลงคะแนนเสียงไม่ชอบวิธีที่คุณให้ความสำคัญกับส่วนของคำตอบที่ไม่จำเป็นต้องเน้น อาจเป็นอะไรก็ได้จริงๆ นั่นคือความงามของการลงคะแนนแบบไม่ระบุชื่อใน SO

— M.Babcock

0

จริง ๆ แล้วฉันสังเกตเห็นความแตกต่างของโครเมี่ยมระหว่างทั้งสองตัวอย่างเช่นถ้าคุณต้องการทำการนำทางไปยังเฟรม sandboxed จากเฟรมลูกคุณสามารถทำได้เพียงแค่ใช้ document.location แต่ไม่ใช่กับ window.location

— M.Abulsoud
แหล่งที่มา