Mari kita bahas secara singkat tentang penggunaan pushState dan replaceState di H5

HTML5 memperkenalkan metode history.pushState() dan history.replaceState(), yang masing-masing dapat menambah dan mengubah entri riwayat. Metode ini biasanya digunakan bersama dengan window.onpopstate.

Misalkan kode JavaScript berikut dijalankan di http://mozilla.org/foo.html:

 var stateObj = { foo: bar };history.pushState(stateObj, halaman 2, bar.html);

Ini akan menyebabkan bilah alamat browser membaca http://mozilla.org/bar.html, tetapi tidak akan menyebabkan browser memuat bar.html atau bahkan memeriksa apakah bar.html ada.

Misalkan sekarang pengguna mengunjungi http://google.com dan mengklik tombol kembali. Saat ini, bilah alamat akan menampilkan http://mozilla.org/bar.html, dan halaman tersebut akan memicu peristiwa popstate. Status objek peristiwa berisi salinan stateObj. Halamannya sendiri sama dengan foo.html, meskipun isinya dapat diubah dalam acara popstate.

Jika kita mengklik tombol kembali lagi, URL halaman akan berubah menjadi http://mozilla.org/foo.html, dan dokumen objek dokumen akan memicu event popstate lainnya. Kali ini objek status objek event adalah null. Sama halnya di sini, pengembalian tidak mengubah isi dokumen. Meskipun dokumen dapat berubah isinya saat menerima acara popstate, namun isinya akan tetap konsisten dengan presentasi sebelumnya.

pushState() mengambil tiga parameter: objek status, judul (saat ini diabaikan), dan (opsional) URL. Mari kita jelaskan ketiga parameter ini secara detail:

Objek Status — Status objek status adalah objek JavaScript yang membuat entri riwayat baru melalui pushState(). Setiap kali pengguna bernavigasi ke keadaan baru, peristiwa popstate diaktifkan, dan properti keadaan peristiwa tersebut berisi salinan objek keadaan entri riwayat.

title — Parameter ini saat ini diabaikan, namun dapat digunakan di masa mendatang. Melewati string kosong aman di sini, tetapi tidak aman di masa depan. Alternatifnya, Anda dapat memberikan judul singkat untuk status lompatan.

URL — Parameter ini menentukan catatan URL historis baru. Perhatikan bahwa browser tidak akan memuat URL ini segera setelah memanggil pushState(), namun mungkin memuat URL ini dalam keadaan tertentu nanti, misalnya saat pengguna membuka kembali browser. URL baru tidak harus berupa jalur absolut. Jika URL baru adalah jalur relatif, maka URL tersebut akan dianggap relatif terhadap URL saat ini. URL baru harus memiliki asal yang sama dengan URL saat ini, jika tidak, pushState() akan memunculkan pengecualian. Parameter ini bersifat opsional dan default untuk URL saat ini.

Dalam arti tertentu, memanggil pushState() mirip dengan menyetel window.location = #foo, keduanya akan membuat dan mengaktifkan catatan riwayat baru di halaman saat ini. Tapi pushState() memiliki keuntungan sebagai berikut:

URL baru dapat berupa URL apa pun yang memiliki asal yang sama dengan URL saat ini. Dan pengaturan window.location hanya menyimpan file yang sama jika Anda hanya mengubah nilai hash.

Jika diinginkan, catatan sejarah dapat dibuat tanpa mengubah URL. Pengaturan window.location = #foo; akan membuat entri riwayat baru hanya jika hash saat ini bukan #foo.

Kita dapat mengaitkan data arbitrer dengan item riwayat baru. Dengan metode berbasis nilai hash, semua data yang relevan harus dikodekan ke dalam string pendek.

Penggunaan history.replaceState() sangat mirip dengan history.pushState(). Perbedaannya adalah replaceState() memodifikasi item riwayat saat ini alih-alih membuat yang baru.

Setiap kali entri riwayat aktif berubah, peristiwa popstate dipicu pada objek jendela yang sesuai. Jika entri riwayat yang aktif saat ini dibuat dengan metode history.pushState(), atau diubah dengan metode history.replaceState(), properti status dari objek peristiwa popstate berisi salinan objek status dari entri riwayat ini.

Kita juga bisa mendapatkan state langsung pada objek history, sebagai berikut:

 var keadaan saat ini = sejarah.negara;

Perlu dicatat bahwa memanggil history.pushState() atau history.replaceState() tidak akan memicu peristiwa popstate. Peristiwa opstate hanya akan dipicu berdasarkan tindakan tertentu pada browser, seperti mengklik tombol kembali dan maju (atau memanggil metode history.back(), history.forward(), dan history.go() dalam JavaScript).

Jika alamat halaman web saat ini adalah http://example.com/example.html, jalankan kode berikut:

 window.onpopstate = function(event) { alert(location: + document.location + , state: + JSON.stringify(event.state));};//Mengikat fungsi pemrosesan peristiwa. , title 1, ?page=1); //Tambahkan dan aktifkan entri riwayat http://example.com/example.html?page=1, indeks entrinya adalah 1history.pushState({page: 2}, title 2, ?page=2); //Tambahkan dan aktifkan entri riwayat http://example.com/example.html?page=2, indeks entrinya adalah 2history.replaceState({page: 3}, title 3, ? page=3); //Ubah entri riwayat yang saat ini diaktifkan http://ex..?page=2 menjadi http://ex..?page=3, dan indeks entrinya adalah 3history.back(); Lokasi munculan: http://example.com/example.html?page=1, nyatakan: {page:1}history.back(); // Lokasi pop-up: http://example.com/example.html, nyatakan: nullhistory.go(2); // Lokasi pop-up: http://example.com/example.html?page=3, status: {page:3}

Wang Er menggunakan pushState() terutama karena dapat memantau peristiwa pengembalian di browser. Ini juga berlaku di terminal seluler.

 <body> <div>window.onpopstate bisa memantau kejadian kunci pengembalian</div> <script> history.pushState({}, ); window.onpopstate = function(event) { //Di sini Anda bisa memantau kejadian kembalinya browser dan lakukan apa yang ingin Anda lakukan, //Misalnya: melompat ke halaman web lain location.href = https://www.baidu.com };

Tentu saja, Anda juga dapat menggunakan window.onhashchange untuk memantau event return di browser. Silakan merujuk ke kode berikut (dapat dijalankan langsung):

 <body> <div>window.onhashchange dapat memantau peristiwa kunci pengembalian</div> <script> setTimeout(()=>{ location.hash=a },100); fungsi(acara) { lokasi.href = https://www.baidu.com;

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.