Pertanyaan Ubah URL tanpa memuat ulang halaman


Adakah cara saya mengubah URL halaman saat ini tanpa memuat ulang halaman?

Saya ingin mengakses porsinya sebelum # hash jika memungkinkan.

Saya hanya perlu mengubah porsi setelah domain, jadi tidak seperti saya melanggar kebijakan lintas domain.

 window.location.href = "www.mysite.com/page2.php";  // sadly this reloads

1806
2018-05-05 10:54


asal


Jawaban:


Ini sekarang dapat dilakukan di Chrome, Safari, FF4 +, dan IE10pp4 +!

Lihat jawaban pertanyaan ini untuk info lebih lanjut: Memperbarui bilah alamat dengan URL baru tanpa hash atau memuat ulang halaman

Contoh:

 function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

Anda dapat menggunakannya window.onpopstate untuk mendeteksi navigasi tombol kembali / maju:

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

Untuk melihat lebih mendalam tentang memanipulasi riwayat browser, lihat artikel MDN ini.


1628
2017-07-28 15:30



HTML5 memperkenalkan history.pushState() dan history.replaceState() metode, yang memungkinkan Anda untuk menambah dan memodifikasi entri sejarah, masing-masing.

window.history.pushState('page2', 'Title', '/page2.php');

Baca lebih lanjut tentang ini dari sini


381
2017-08-17 13:59



CATATAN: Jika Anda bekerja dengan HTML5 browser maka Anda harus mengabaikan jawaban ini. Ini sekarang mungkin sebagaimana dapat dilihat pada jawaban yang lain.

Tidak ada cara untuk memodifikasi URL di browser tanpa memuat ulang halaman. URL mewakili apa halaman yang dimuat terakhir. Jika Anda mengubahnya (document.location) maka itu akan memuat ulang halaman.

Salah satu alasan yang jelas adalah, Anda menulis sebuah situs di www.mysite.com yang terlihat seperti halaman masuk bank. Kemudian Anda mengubah bilah URL browser untuk mengatakan www.mybank.com. Pengguna akan benar-benar tidak menyadari bahwa mereka benar-benar melihat www.mysite.com.


96
2018-05-05 10:57



Anda juga dapat menggunakan HTML5 gantiState jika Anda ingin mengubah url tetapi tidak ingin menambahkan entri ke riwayat browser:

if (window.history.replaceState) {
   //prevents browser from storing history with each change:
   window.history.replaceState(statedata, title, url);
}

Ini akan 'merusak' fungsi tombol kembali. Ini mungkin diperlukan dalam beberapa contoh seperti galeri gambar (di mana Anda ingin tombol kembali untuk kembali ke halaman indeks galeri alih-alih bergerak kembali melalui masing-masing dan setiap gambar yang Anda lihat) sambil memberikan masing-masing gambar url uniknya sendiri.


93
2017-11-19 10:32



parent.location.hash = "hello";

73
2018-05-13 22:14



Berikut ini solusi saya: (newUrl adalah url baru Anda yang ingin Anda ganti yang sekarang)

history.pushState({}, null, newUrl);

44
2018-06-10 18:25



The HTML5 replaceState adalah jawabannya, sebagaimana telah disebutkan oleh Vivart dan geo1701. Namun itu tidak didukung di semua browser / versi. History.js membungkus fitur negara HTML5 dan memberikan dukungan tambahan untuk browser HTML4.


25
2017-11-21 11:09



Sebelum HTML5 kita bisa menggunakan:

parent.location.hash = "hello";

dan:

window.location.replace("http:www.example.com");

Metode ini akan memuat ulang halaman Anda, tetapi HTML5 memperkenalkan history.pushState(page, caption, replace_url) yang seharusnya tidak memuat ulang halaman Anda.


20
2018-01-24 08:49



Jika yang ingin Anda lakukan adalah mengizinkan pengguna untuk mem-bookmark / berbagi halaman, dan Anda tidak memerlukannya untuk menjadi URL yang tepat, dan Anda tidak menggunakan jangkar hash untuk hal lain, maka Anda dapat melakukan ini dalam dua bagian; Anda menggunakan location.hash yang dibahas di atas, dan kemudian menerapkan pemeriksaan di halaman rumah, untuk mencari URL dengan anchor hash di dalamnya, dan mengarahkan Anda ke hasil berikutnya.

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 halaman, jadi selain dari hash pengguna tidak terlalu terganggu.

3) Pengguna meneruskan URL ini ke orang lain, atau membookmarknya

4) Orang lain, atau pengguna yang sama di kemudian hari, pergi ke www.site.com/#/section/page/6

5) Kode aktif www.site.com/ mengalihkan pengguna ke www.site.com/section/page/6, menggunakan sesuatu seperti ini:

if (window.location.hash.length > 0){ 
   window.location = window.location.hash.substring(1);
}

Semoga itu masuk akal! Ini merupakan pendekatan yang berguna untuk beberapa situasi.


18
2018-04-19 11:43



Setiap perubahan dari lokasi (baik window.location atau document.location) akan menyebabkan permintaan pada URL baru tersebut, 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 suka dengan URL yang Anda gunakan saat ini.


12
2018-05-05 10:58



Anda dapat menambahkan tag anchor. Saya menggunakan ini di situs saya http://www.piano-chords.net/ sehingga saya dapat melacak dengan analitik google apa yang orang kunjungi di halaman. Saya hanya menambahkan tag anchor dan kemudian bagian halaman yang ingin saya lacak.

var trackCode = "/#" + urlencode($("myDiv").text());
window.location.href = "http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);

11
2017-12-13 22:57