Javascript: Mengatur location.href versus lokasi

311

Kapan Anda akan mengatur locationke string URL versus pengaturan location.href?

location = "http://www.stackoverflow.com";

vs.

location.href = "http://www.stackoverflow.com";

Referensi Jaringan Pengembang Mozilla

javascript tdk masuk akal
sumber
6
pengaturan location.hrefsurel gagal karena kebijakan asal-sama: javascript.info/tutorial/…
Taha Jahangir
Juga, replacedan assign: stackoverflow.com/q/1865837/632951 , stackoverflow.com/q/7703689/632951 , stackoverflow.com/q/10302905/632951
Pacerier
1
Saya memiliki aplikasi Angular 4 yang menggunakan TypeScript 2.6.2. window.location hanya baca dan saya hanya dapat menetapkan menggunakan window.location.href (dalam konteks panggilan balik dari langganan bersudut), tanpa kesalahan kompilator yang ditata ulang - mungkin itu semacam kompatibilitas JavaScript 1.0 atau hal yang terkait dengan penanganan asinkron. . Pada dasarnya window.location.href tampaknya menjadi satu-satunya hal yang selalu berhasil.
Chris Halcrow

Jawaban:

261

Anda mungkin mengatur locationlangsung karena sedikit lebih pendek. Jika Anda mencoba untuk menjadi singkat, Anda biasanya dapat menghilangkannya window.juga.

Penugasan URL untuk keduanya location.hrefdan locationdidefinisikan untuk bekerja di JavaScript 1.0, kembali di Netscape 2, dan telah diterapkan di setiap browser sejak saat itu. Jadi pilihlah dan gunakan yang paling jelas menurut Anda.

bobince
sumber
9
Seperti disebutkan oleh @SwissMister dalam jawaban di bawah ini, tampaknya window.location.href agak diperlakukan seperti permintaan XHR. Jika dipecat dari dalam panggilan balik sukses XHR, window.location.href akan diperlakukan sebagai XHR sementara window.location mengemulasi mengklik tautan.
Akshay Raje
147

Bahkan jika keduanya berfungsi, saya akan menggunakan yang terakhir. locationadalah objek, dan menetapkan string ke objek tidak menjadi pertanda baik untuk keterbacaan atau pemeliharaan.

psikotik
sumber
60
Saat menerapkan integrasi PayPal yang kompleks, saya menemukan alasan yang sangat kuat untuk digunakan window.location: tidak diperlukanSAME ORIGIN .
Swiss Mister
4
Mungkin hanya saya tetapi location = 'http://www.example.com'tampaknya sangat mudah dibaca. Meskipun demikian, sebagai kasus khusus. Itu kompatibel ke belakang dan akan tetap kompatibel di masa mendatang.
Alex W
10
Jika window.location adalah sebuah objek, menugaskan sebuah string padanya akan menimpanya dengan sebuah string. Sebenarnya window.location adalah properti yang memiliki metode pengambil dan penyetel. Saat Anda mengaturnya, sebuah string diharapkan dan objek Lokasi global diperbarui oleh setter. Ketika Anda mendapatkannya, objek Lokasi global dikembalikan.
JukkaP
64

Seperti yang telah dikatakan, locationadalah sebuah objek . Tetapi orang itu menyarankan untuk menggunakan keduanya. Tapi, Anda akan lebih baik menggunakan .hrefversi ini.

Objek memiliki properti default yang, jika tidak ditentukan, diasumsikan. Dalam kasus locationobjek, ia memiliki properti yang disebut .href. Dan dengan tidak menentukan properti APA SAJA selama penugasan, itu akan menganggap "href" secara default.

Ini semua baik-baik saja sampai versi model objek yang lebih baru berubah dan tidak ada lagi properti default, atau properti default diubah. Kemudian program Anda rusak secara tak terduga.

Jika Anda maksud href, Anda harus menentukan href.

Kirby L. Wallace
sumber
13
Penjelasan yang baik, lebih baik dari sekedar komentar umum tentang keterbacaan atau pemeliharaan. Pada kenyataannya dalam kasus khusus ini model objek tidak akan berubah, karena setengah dari web akan berhenti - karena itu gunakanlah ... tidak masalah yang mana
Neromancer
71
Ini kedengarannya bagus tetapi tidak sepenuhnya benar. Tidak ada konsep properti default di DOM atau JavaScript pada umumnya. Menetapkan string untuk locationberfungsi karena properti didefinisikan memiliki perilaku penugasan khusus ini di JavaScript 1.0 dan sejak itu setiap browser menerapkannya. HTML5 sekarang membutuhkannya. Jadi sementara itu mungkin lebih cantik atau lebih konsisten untuk ditugaskan .href, tidak ada keuntungan kompatibilitas mundur atau maju untuk melakukannya.
bobince
6
jumlah kecantikan.
Tom Andersen
4
window.location = urllebih cantik
Eric Muyser
21
location = urllebih manis
gratis
20

Beberapa tahun yang lalu, locationtidak bekerja untuk saya di IE dan location.href(dan keduanya bekerja di browser lain). Sejak itu saya selalu menggunakan location.hrefdan tidak pernah mengalami kesulitan lagi. Saya tidak ingat versi IE yang mana.

Dovev Hefetz
sumber
42
Mungkin salah satu versi IE di mana ia melakukan kesalahan dan setiap browser lain melakukannya dengan benar. ;-)
Shawn D.
9
di strict modechrome akan melempar pengecualian jika Anda mencoba untuk menetapkan langsung locationjuga, jadi saya selalu menggunakanlocation.href
Hashbrown
9
"satu" versi IE?
Lpc_dark
@Shawn D. Browser melakukan sesuatu dengan benar? Kapan itu terjadi! : D
user2173353
15

Hanya untuk memperjelas, Anda tidak bisa melakukannya location.split('#'), locationadalah objek, bukan string. Tetapi yang bisa Anda lakukan location.href.split('#');karena location.hrefmerupakan string.

Chadams
sumber
3
Komentar Anda benar, tetapi Anda berbicara tentang mendapatkan atribut href, string, dari objek lokasi. Semua diskusi lainnya berhubungan dengan menetapkan nilai, bukan membaca nilai. Tapi maksud Anda benar. Perbedaannya adalah bahwa href adalah string sedangkan lokasi adalah objek.
Phil DD
15

Namun, ada satu perbedaan yang perlu diingat.

Katakanlah Anda ingin membuat beberapa URL menggunakan URL saat ini. Kode berikut sebenarnya akan mengarahkan Anda, karena itu tidak memanggil String.replacetetapi Location.replace:

nextUrl = window.location.replace('/step1', '/step2');

Kode berikut berfungsi:

// cast to string
nextUrl = (window.location+'').replace('/step1', '/step2');

// href property
nextUrl = window.location.href.replace('/step1', '/step2');
Gras Double
sumber
3

Dengan menggunakan naskah window.location.hrefsebagai window.locationsecara teknis obyek yang berisi:

Properties
hash 
host 
hostname
href    <--- you need this
pathname (relative to the host)
port 
protocol 
search

Pengaturan window.locationakan menghasilkan kesalahan tipe, sedangkan window.location.hreftipe string.

Sumber

Biru
sumber