Apakah ada cara saya dapat memodifikasi URL halaman saat ini tanpa memuat ulang halaman?
Saya ingin mengakses bagian sebelum # hash jika memungkinkan.
Saya hanya perlu mengubah bagian setelah domain, jadi saya tidak melanggar kebijakan lintas domain.
window.location.href = "www.mysite.com/page2.php"; // Sadly this reloads
history.pushState()
mungkin jawaban yang tepat di sini, dalam situasi ini (tergantung pada keadaan yang tepat ...) kemungkinan menggunakan pengalihan sisi-server (seperti melalui menggunakan direktif RewriteRule dari Apache) adalah sesuatu yang mungkin ingin Anda pertimbangkan, atau setidaknya hati-hati terhadap. Hanya berpikir itu harus disebutkan!Jawaban:
Ini sekarang dapat dilakukan di Chrome, Safari, Firefox 4+, dan Internet Explorer 10pp4 +!
Lihat jawaban pertanyaan ini untuk informasi lebih lanjut: Memperbarui bilah alamat dengan URL baru tanpa hash atau memuat ulang halaman
Contoh:
Anda dapat menggunakan
window.onpopstate
untuk mendeteksi navigasi tombol kembali / maju:Untuk melihat lebih dalam tentang memanipulasi riwayat browser, lihat artikel MDN ini .
sumber
HTML5 memperkenalkan
history.pushState()
danhistory.replaceState()
metode, yang memungkinkan Anda untuk menambah dan memodifikasi entri riwayat.Baca lebih lanjut tentang ini dari sini
sumber
file:///
untuk alasan keamanan, misalnya Firefox 30. Ujilocalhost
denganpython -m SimpleHTTPServer
.Anda juga dapat menggunakan HTML5 replaceState jika Anda ingin mengubah url tetapi tidak ingin menambahkan entri ke riwayat browser:
Ini akan 'merusak' fungsi tombol kembali. Ini mungkin diperlukan dalam beberapa kasus seperti galeri gambar (di mana Anda ingin tombol kembali untuk kembali ke halaman indeks galeri alih-alih bergerak kembali melalui setiap gambar yang Anda lihat) sambil memberikan masing-masing gambar url unik sendiri.
sumber
Ini solusi saya (newUrl adalah URL baru Anda yang ingin Anda ganti dengan yang sekarang):
sumber
CATATAN: Jika Anda bekerja dengan browser HTML5 maka Anda harus mengabaikan jawaban ini. Ini sekarang mungkin seperti yang dapat dilihat pada jawaban lain.
Tidak ada cara untuk memodifikasi URL di browser tanpa memuat ulang halaman. URL tersebut mewakili apa halaman yang terakhir dimuat. Jika Anda mengubahnya (
document.location
) maka itu akan memuat ulang halaman.Salah satu alasan yang jelas adalah, Anda menulis situs
www.mysite.com
yang terlihat seperti halaman login bank. Kemudian Anda mengubah bilah URL browser untuk mengatakanwww.mybank.com
. Pengguna akan sama sekali tidak menyadari bahwa mereka benar-benar melihatwww.mysite.com
.sumber
sumber
Di browser modern dan HTML5 , ada metode yang disebut
pushState
di jendelahistory
. Itu akan mengubah URL dan mendorongnya ke histori tanpa memuat halaman.Anda dapat menggunakannya seperti ini, ini akan mengambil 3 parameter, 1) menyatakan objek 2) judul dan URL):
Ini akan mengubah URL, tetapi tidak memuat ulang halaman. Juga, itu tidak memeriksa apakah halaman itu ada, jadi jika Anda melakukan beberapa kode JavaScript yang bereaksi terhadap URL, Anda dapat bekerja dengan mereka seperti ini.
Juga ada
history.replaceState()
yang melakukan hal yang persis sama, kecuali itu akan mengubah sejarah saat ini daripada membuat yang baru!Anda juga dapat membuat fungsi untuk memeriksa apakah
history.pushState
ada, kemudian melanjutkan dengan yang lain seperti ini:Anda juga dapat mengubah
#
untuk<HTML5 browsers
, yang tidak akan memuat ulang halaman. Itulah cara Angular menggunakan untuk melakukan SPA sesuai dengan ...Mengubahnya
#
cukup mudah, lakukan seperti:Dan Anda dapat mendeteksinya seperti ini:
sumber
window.onhashchange
danwindow.onpopstate
melakukan hal yang sama dalam hal ini?HTML5 replaceState adalah jawabannya, seperti yang telah disebutkan oleh Vivart dan geo1701. Namun itu tidak didukung di semua browser / versi. History.js membungkus fitur status HTML5 dan menyediakan dukungan tambahan untuk browser HTML4.
sumber
Sebelum HTML5 kita dapat menggunakan:
dan:
Metode ini akan memuat ulang halaman Anda, tetapi HTML5 memperkenalkan
history.pushState(page, caption, replace_url)
yang seharusnya tidak memuat ulang halaman Anda.sumber
history.pushState(..)
adalah, bahwa jika Anda ingin mengarahkan ulang ke domain lain, kebijakan lintas domain berlaku. Sementara denganwindow.location.replace(..)
redirect ke domain lain dimungkinkan.Jika yang Anda coba lakukan adalah memungkinkan pengguna untuk menandai / berbagi halaman, dan Anda tidak perlu URL yang tepat, dan Anda tidak menggunakan jangkar hash untuk hal lain, maka Anda dapat melakukannya dalam dua bagian; Anda menggunakan location.hash yang dibahas di atas, dan kemudian menerapkan pemeriksaan pada halaman beranda, untuk mencari URL dengan jangkar hash di dalamnya, dan mengarahkan Anda ke hasil selanjutnya.
Contohnya:
1) Pengguna aktif
www.site.com/section/page/4
2) Pengguna melakukan beberapa tindakan yang mengubah URL menjadi
www.site.com/#/section/page/6
(dengan hash). Katakanlah Anda telah memuat konten yang benar untuk halaman 6 ke dalam halaman, jadi selain dari hash pengguna tidak terlalu terganggu.3) Pengguna meneruskan URL ini ke orang lain, atau menandainya
4) Orang lain, atau pengguna yang sama di kemudian hari, pergi ke
www.site.com/#/section/page/6
5) Kode pada
www.site.com/
pengalihan pengguna kewww.site.com/section/page/6
, menggunakan sesuatu seperti ini:Harapan itu masuk akal! Ini pendekatan yang berguna untuk beberapa situasi.
sumber
Di bawah ini adalah fungsi untuk mengubah URL tanpa memuat ulang halaman. Ini hanya didukung untuk HTML5.
sumber
Setiap perubahan lokasi (baik
window.location
ataudocument.location
) akan menyebabkan permintaan pada URL baru itu, jika Anda tidak hanya mengubah fragmen URL. Jika Anda mengubah URL, Anda mengubah URL.Gunakan teknik penulisan ulang URL sisi-server seperti mod_rewrite Apache jika Anda tidak menyukai URL yang sedang Anda gunakan.
sumber
Anda dapat menambahkan tag jangkar. Saya menggunakan ini di situs saya sehingga saya dapat melacak dengan Google Analytics apa yang orang kunjungi di halaman.
Saya hanya menambahkan tag anchor dan kemudian bagian dari halaman yang ingin saya lacak:
sumber
Seperti yang ditunjukkan oleh Thomas Stjernegaard Jeppesen, Anda dapat menggunakan History.js untuk mengubah parameter URL sementara pengguna menavigasi melalui tautan dan aplikasi Ajax Anda.
Hampir satu tahun telah berlalu sejak jawaban itu, dan History.js tumbuh dan menjadi lebih stabil dan lintas-browser. Sekarang ini dapat digunakan untuk mengelola status riwayat di HTML5-compliant serta di banyak browser HTML4-only. Dalam demo ini, Anda dapat melihat contoh cara kerjanya (serta dapat mencoba fungsi dan batasannya.
Jika Anda memerlukan bantuan dalam cara menggunakan dan mengimplementasikan pustaka ini, saya sarankan Anda untuk melihat kode sumber dari halaman demo: Anda akan melihatnya sangat mudah dilakukan.
Akhirnya, untuk penjelasan komprehensif tentang apa yang bisa menjadi masalah tentang penggunaan hash (dan hashbangs), lihat tautan ini oleh Benjamin Lupton.
sumber
Gunakan
history.pushState()
dari API Sejarah HTML 5.Rujuk ke API Sejarah HTML5 untuk detail lebih lanjut.
sumber
Anda dapat menggunakan fungsi yang indah dan sederhana ini di mana saja di aplikasi Anda.
Anda tidak hanya dapat mengedit URL tetapi Anda dapat memperbarui judul bersamaan dengan itu.
Semua orang cukup membantu.
sumber
window.history.pushState('data', 'Title', '#new_location');