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

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