Memperbarui bilah alamat dengan URL baru tanpa hash atau memuat ulang halaman

645

Saya juga bermimpi tentang chrome (saluran dev) menerapkan cara untuk memperbarui bilah alamat melalui javascript (path, bukan domain) tanpa memuat ulang halaman atau mereka benar-benar telah melakukan ini.

Namun, saya tidak dapat menemukan artikel yang saya pikir saya baca.

Apakah saya gila atau ada cara untuk melakukan ini (di Chrome)?

ps Saya tidak berbicara tentang window.location.hash, et al. Jika jawaban di atas ada , jawaban untuk pertanyaan ini tidak benar.

javascript ajax google-chrome David Murdoch
sumber
3
Kemungkinan rangkap dari Ubah URL tanpa memuat ulang halaman
Tobias Kienzler
1
@tobiaskienzler Ketika pertanyaan itu awalnya ditanyakan kembali pada tahun 2009, itu tidak mungkin.
David Murdoch
3
Tentu saja tidak. Tapi sekarang, pertanyaannya sama. Sayang sekali bahwa yang lain memiliki jawaban usang diterima (oleh Anda, saya perhatikan) ... Anda tahu apa? Mari kita tutup sebaliknya, tidak ada yang mengatakan "asli" harus lebih tua, sebenarnya ada preseden
Tobias Kienzler
@tobiaskienzler, pertanyaan lain tidak memiliki jawaban yang diterima usang.
David Murdoch
2
@TobiasKienzler ini pertanyaan 6 tahun, mengapa Anda harus repot dengan pertanyaan ini? Nikmati saja jawaban yang menakjubkan dan terapkan pada aplikasi Anda. Selama 6 tahun ribuan pengguna SO setuju bahwa ini adalah pertanyaan yang luar biasa, silakan biarkan apa adanya.
Imam Assidiqqi

Jawaban:

876

Anda sekarang dapat melakukan ini di sebagian besar browser "modern"!

Berikut adalah artikel asli yang saya baca (diposting 10 Juli 2010): HTML5: Mengubah URL browser tanpa halaman yang menyegarkan .

Untuk melihat lebih dalam tentang pushState / replaceState / popstate (alias API Riwayat HTML5) lihat dokumen MDN .

TL; DR, Anda dapat melakukan ini:

window.history.pushState("object or string", "Title", "/new-url");

Lihat jawaban saya untuk Memodifikasi URL tanpa memuat ulang halaman untuk cara dasar.

David Murdoch
sumber
3
Ah, fungsinya ada di WebKit dan mendarat beberapa bulan yang lalu < bugs.webkit.org/show_bug.cgi?id=36152 >. Temuan yang bagus!
tertua anak laki
6
ini sekarang digunakan oleh github, sementara navigasi pohon
Valerij
1
@Vprimachenko: Yup. Dan mereka memecah tombol punggungku sesekali.
David Murdoch
Ini sekarang dapat dilakukan di Chrome, Safari, FF4 +, dan IE10pp3 +! (Dari jawaban David Murdoch ke stackoverflow.com/questions/824349/… )
Zach Lysobey
11
Protip: Anda dapat menggunakan jalur relatif dengan fungsi-fungsi ini juga (misalnya ../new-urlatau ../../new-url. Mereka tampaknya melakukan apa yang Anda harapkan di Chrome setidaknya.
Mahn
157

Mengubah hanya apa setelah hash - browser lama

document.location.hash = 'lookAtMeNow';

Mengubah URL lengkap. Chrome, Firefox, IE10 +

history.pushState('data to be passed', 'Title of the page', '/test');

Di atas akan menambah entri baru ke riwayat sehingga Anda dapat menekan tombol Kembali untuk pergi ke keadaan sebelumnya. Untuk mengubah URL di tempat tanpa menambahkan entri baru ke riwayat gunakan

history.replaceState('data to be passed', 'Title of the page', '/test');

Coba jalankan ini di konsol sekarang!

Pawel
sumber
13
replaceStatepersis apa yang saya butuhkan, terima kasih untuk memperluas tanggapan asli.
Choylton B. Higginbottom
'domain dan protokolnya harus sama dengan yang asli!' ini mencegah beberapa situs penangkapan ikan untuk mengubah url bilah alamat.
Rick
3
Anda tidak boleh memberikan URL absolut ke fungsi ini. Jika Anda melakukannya, kemungkinan besar Anda harus membuatnya secara dinamis dari skema, host, dan port saat ini - yang merupakan pekerjaan yang banyak ketika Anda bisa menjadikannya sebagai URL relatif ("foo.html" atau bahkan "/foo.html ") dan biarkan browser membereskannya.
DimeCadmium
1
@DimeCadmium penyederhanaan yang bagus. Diperbarui.
Pawel
history.replaceStatetambahkan ke sejarah di ff 66.0b1
azzamsa
33

Pembaruan untuk jawaban Davids bahkan mendeteksi browser yang tidak mendukung pushstate:

if (history.pushState) {
  window.history.pushState("object or string", "Title", "/new-url");
} else {
  document.location.href = "/new-url";
}
metamagikum
sumber
9
document.location.href memuat kembali halaman
paullb
1 
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?foo=bar';
window.history.pushState({path:newurl},'',newurl);
Kevin Mendez
sumber
3
Sementara potongan kode ini dapat menyelesaikan pertanyaan, termasuk penjelasan sangat membantu untuk meningkatkan kualitas posting Anda. Ingatlah bahwa Anda menjawab pertanyaan untuk pembaca di masa depan, dan orang-orang itu mungkin tidak tahu alasan untuk saran kode Anda.
MaxiMouse
@MaxiMouse terima kasih atas saran Anda, saya akan mengingatnya.
Kevin Mendez