Apa perbedaan antara window.location dan document.location di JavaScript?

Jawaban:

220

Menurut W3C, mereka sama. Pada kenyataannya, untuk keamanan lintas browser, Anda harus menggunakan window.locationdaripada document.location.

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

rahul
sumber
12
Diturunkan. Jawab kontradiktif. Berani mengatakan mereka sama, lalu menjelaskan perbedaan dalam teks yang lebih ringan. Mereka jelas tidak sama.
danorton
33
Ayo pemicu-senang pemilih, meringankan sedikit. Sebagian besar, mereka berperilaku serupa dengan MEMPERTIMBANGKAN CAVEAT YANG DITENTIFIKASI oleh rahul. Jangan paku dia di semantik. Philadelphia kecil, Tuan-tuan. Saya, untuk satu, menemukan jawabannya sepenuhnya memuaskan. +1 (Jawaban Christoph harus diterima, tetapi jawaban rahul dapat diterima - setidaknya, tidak layak untuk down-vote.)
cssyphus
7
-1 untuk merekomendasikan praktik terbaik (selalu menggunakan window.location) tanpa memberikan alasan apa pun untuknya. Jika Anda tidak akan memberikan justifikasi, mengapa orang harus menerima saran Anda? Jawaban Christoph jauh lebih berguna dalam hal ini.
Mark Amery
+1 tetapi juga melihat jawaban oleh Phil Hamer dan Christoph di bawah ini, mereka menambahkan informasi latar belakang penting dan peringatan untuk sepenuhnya memahami masalah ini.
Jon z
Sebenarnya saya melihat perbedaan antara keduanya, Misalnya jika Anda ingin melakukan navigasi ke bingkai kotak pasir dari bingkai anak maka Anda dapat melakukan ini hanya dengan document.location tetapi tidak dengan window.location
M.Abulsoud
207

Cara kanonik untuk mendapatkan objek lokasi saat ini adalah window.location(lihat halaman MSDN ini dari 1996 dan draft W3C dari 2006 ).

Bandingkan ini dengan document.location, yang awalnya hanya mengembalikan URL saat ini sebagai string (lihat halaman ini di MSDN ). Mungkin untuk menghindari kebingungan, document.locationdiganti dengan document.URL(lihat di sini di MSDN ), yang juga merupakan bagian dari DOM Level 1 .

Sejauh yang saya tahu, semua browser modern peta document.locationuntuk window.location, tapi aku masih lebih suka window.locationseperti itulah apa yang telah digunakan sejak saya menulis DHTML pertama saya.

Christoph
sumber
1
jika Anda menggunakan window.location, bukankah sama-sama berlaku untuk hanya menggunakan location?
commonpike
2
@commonpike Ini - dalam konteks skrip di [setidaknya] dokumen HTML, objek global tempat semua variabel yang didefinisikan menjadi properti, adalah windowobjek. Dengan demikian, setiap variabel atau fungsi yang Anda tetapkan di tingkat atas skrip Anda, adalah properti dari objek yang dirujuk oleh window, yang kebetulan merupakan objek global. Objek global tersirat ketika tidak ada suka window.- dengan demikian locationditafsirkan sebagai window.location. Peringatan - fe if(an_undefined_variable)akan membuat kesalahan jika variabel tidak didefinisikan - if(window.an_undefined_variable)tidak akan.
amn
92

window.location adalah baca / tulis pada semua browser yang sesuai.

document.location hanya baca di Internet Explorer (setidaknya), tetapi baca / tulis di browser berbasis Gecko (Firefox, SeaMonkey).

Frédéric Hamidi
sumber
10
Saya tidak dapat mereproduksi klaim yang document.locationhanya baca di IE. Saya dapat berhasil menetapkannya di IE 10, 9, 8 dan 6 (menggunakan VM dari modern.ie ).
Mark Amery
ada komentar console.log(location);? !!
Fr0zenFyr
44

document.locationpada awalnya adalah properti hanya-baca, meskipun browser Gecko memungkinkan Anda untuk menugaskannya juga. Untuk keamanan lintas-browser, gunakan window.locationsaja.

Baca lebih lajut:

document.location

window.location

diEcho
sumber
Saya tidak dapat menemukan jawaban yang jelas kapan harus menggunakannya, lihat jawaban saya di bawah ini
M.Abulsoud
37

Menariknya, jika Anda memiliki bingkai, gambar, atau formulir bernama 'lokasi', maka 'document.location' masing-masing memberikan referensi ke jendela bingkai, gambar, atau formulir, alih-alih objek Lokasi. Rupanya, ini karena document.forms, document.images, dan lookup nama koleksi window.frames mendapat prioritas di atas pemetaan ke window.location.

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

if (document.location.tagName == 'IMG') alert('Hello!')
Phil Hamer
sumber
2
Tidak ada prioritas, hanya ditimpa
Pacerier
7
Tidak, ini tidak ditimpa. Ini dibayangi, jadi Phil benar tentang elemen yang diutamakan selama resolusi properti.
kangax
@ Kangax, Sepertinya Anda benar: jsfiddle.net/uL4ysszr . Tetapi seberapa andal perilaku ini? Apakah cukup lintas-browser?
Pacerier
1
Baru saja menguji ini (Oktober 2016). Tampaknya window.locationdan document.locationtidak dapat dibayangi di Chrome atau Firefox.
Bpk. Llama
1
@ Mr.Llama Anda benar. Tampaknya semua browser modern tidak lagi berperilaku seperti yang saya jelaskan di atas. Tampaknya karena memberi dokumen. Mencari atribut "Unforgeable". Perubahan Chromium yang relevan: src.chromium.org/viewvc/blink?view=revision&revision=189862 Dan bug Firefox: bugzilla.mozilla.org/show_bug.cgi?id=1133760
Phil Hamer
27

Sejauh yang saya tahu, keduanya sama. Untuk keamanan lintas browser, Anda dapat menggunakan window.locationdaripada document.location.

Semua browser modern peta document.locationuntuk window.location, tapi aku masih lebih suka window.locationseperti itulah apa yang telah digunakan sejak saya menulis halaman web pertama saya. ini lebih konsisten.

Anda juga dapat melihat document.location === window.locationpengembalian true, yang mengklarifikasi bahwa keduanya sama.

AlphaMale
sumber
14

document.location === window.location kembali true

juga

document.location.constructor === window.location.constructor adalah true

Catatan: Baru diuji pada, Firefox 3.6, Opera 10 dan IE6

KAMU
sumber
1
@Pacerier Kenapa? Untuk objek, ===dan ==setara.
Mark Amery
4
@MarkAmery, Itu salah dan dapat dengan mudah ditunjukkan: "abc" == new String("abc")kembali truesambil "abc" === new String("abc")kembali false.
Pacerier
7
@ Peracer Oke, izinkan saya menyatakan itu sedikit lebih keras dan kurang ambigu: ketika membandingkan dua objek satu sama lain (bukan hanya objek dengan apa pun), ==dan ===setara. Lihat bagian spesifikasi 11.9.3 dan 11.9.6. Untuk nilai-nilai non-null, non-undefined, non-number, non-bool, non-string dengan tipe yang sama, ==perilaku diatur oleh 11.9.3 bagian 1f, dan ===perilaku oleh 11.9.6 bagian 7, yang secara identik membaca Return truejika x dan y merujuk ke objek yang sama. Kalau tidak, kembalilah false.
Mark Amery
10
@MarkAmery, Tidak ada jaminan bahwa kedua document.locationdan window.locationyang menunjuk ke objek. Anda melewatkan seluruh poin triple sama dengan; menggunakan 2 sama dengan tidak membuktikan bahwa mereka adalah objek yang sama. Kita harus menggunakan 3 sama dengan dan bukan 2 sama dengan karena 2 sama dengan akan memberi kita positif palsu. Pada browser di mana document.location adalah string URL sama dengan window.location.toString(), Kemudian document.location==window.locationakan mengembalikan true sementara document.location===window.locationakan mengembalikan false.
Pacerier
@Pacerier Aha - Akhirnya saya mengerti. Anda cukup benar, setidaknya sejauh document.location === window.locationperbandingan berjalan. Fakta bahwa .constructorperbandingan dilemparkan juga berarti, saya pikir, bahwa jawaban ini masih masuk akal, tetapi menggunakan ===akan menyederhanakan alasannya.
Mark Amery
11

Ya, mereka sama. Ini adalah salah satu dari banyak kebiasaan historis di browser JS API. Coba lakukan:

window.location === document.location
Matthew Flaschen
sumber
8

window.location lebih konsisten dari keduanya, mengingat browser lama.

Dave Ward
sumber
3

Jarang melihat perbedaannya saat ini karena html 5 tidak mendukung frameset lagi. Tetapi kembali pada saat kita memiliki frameset, document.location hanya akan mengarahkan frame di mana kode sedang dieksekusi, dan window.location akan mengarahkan seluruh halaman.

Marquinho Peli
sumber
2

Saya akan katakan window.locationadalah cara yang lebih dapat diandalkan untuk mendapatkan URL saat ini . Berikut ini adalah perbedaan antara window.locationdan document.urlyang muncul di depan dalam salah satu skenario di mana saya menambahkan parameter hash di URL dan membacanya nanti.

Setelah menambahkan parameter hash di URL.

Di browser yang lebih lama, saya tidak bisa mendapatkan parameter hash dari URL dengan menggunakan document.url, tetapi ketika saya gunakan window.locationmaka saya bisa mendapatkan parameter hash dari URL.

Jadi selalu lebih baik digunakan window.location.

azhar_salati
sumber
1
-1. Pertanyaannya bahkan tidak menyebutkan document.URL- ini tentang window.locationdan document.location. Juga, document.urltidak ada = harus huruf besar.
Mark Amery
2

document.location.constructor === window.location.constructoradalah true.

Itu karena benda itu persis sama dengan yang bisa Anda lihat document.location===window.location.

Jadi tidak perlu membandingkan konstruktor atau properti lainnya.

Gene Karasev
sumber
2

Setidaknya di IE, ada sedikit perbedaan pada file lokal:

document.URL akan mengembalikan "file: // C: \ project \ abc \ a.html"

tetapi window.location.href akan mengembalikan "file: /// C: /projects/abc/a.html"

Satu adalah back slash, satu adalah slash ke depan.

Justin
sumber
2

Ya, mereka sama, tapi ....!

window.location tidak berfungsi pada beberapa browser Internet Explorer.

divHelper11
sumber
0

Meskipun sebagian besar orang merekomendasikan di sini, seperti itulah protokol dinamis Google Analytics terlihat seperti untuk waktu yang lama (sebelum mereka pindah dari ga.js ke analytics.js baru-baru ini):

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

Info lebih lanjut: https://developers.google.com/analytics/devguides/collection/gajs/

Di versi baru mereka menggunakan '//' sehingga browser dapat secara otomatis menambahkan protokol:

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

Jadi jika Google lebih memilih document.location ke window.locationketika mereka membutuhkan protokol di JS, saya kira mereka memiliki beberapa alasan untuk itu.

KESELURUHAN : Saya pribadi percaya itu document.locationdan window.locationsama, tetapi jika raksasa dengan statistik terbesar tentang penggunaan browser seperti Google menggunakan document.location , saya sarankan untuk mengikuti mereka.

Kainax
sumber
2
Namun saya tidak mengundurkan diri, mungkin karena ini adalah pertanyaan yang sangat lama dan jawaban Anda tidak memberikan bukti baru atau berharga bahwa yang satu lebih baik daripada yang lain. Atau, bisa jadi karena jawaban Anda menunjukkan kebalikan dari opini publik, terlepas dari jasa yang Anda berikan pada apa yang telah dilakukan Google secara historis. Atau, bisa jadi downvoter hanya tidak suka bagaimana Anda menekankan bagian dari jawaban Anda yang tidak terlalu perlu ditekankan. Bisa jadi apa saja kok. Itulah keindahan dari pemungutan suara anonim di SO.
M.Babcock
0

Sebenarnya saya melihat perbedaan dalam chrome di antara keduanya, Misalnya jika Anda ingin melakukan navigasi ke bingkai kotak pasir dari bingkai anak maka Anda dapat melakukan ini hanya dengan document.location tetapi tidak dengan window.location

M.Abulsoud
sumber