Penerokaan mendalam teknik tutorial API_html5 Sejarah HTML5

Jika penyemak imbas anda tidak menyokong API Sejarah, anda boleh menggunakan history.js sebaliknya.
Gunakan Sejarah

HTML 5 menyediakan dua kaedah baharu:

1. history.pushState(); 2. history.replaceState();

Kedua-dua kaedah membolehkan kami menambah dan mengemas kini sejarah, ia berfungsi sama dan boleh menambah bilangan parameter yang sama. Selain kaedah, terdapat juga acara popstate. Dalam artikel berikut, kami akan memperkenalkan cara menggunakan dan masa untuk menggunakan acara popstate.

Parameter pushState() dan replaceState() adalah sama, dan perihalan parameter adalah seperti berikut:

1. nyatakan: menyimpan rentetan JSON, yang boleh digunakan dalam acara popstate.

2. tajuk: Kebanyakan penyemak imbas tidak menyokong atau mengabaikan parameter ini sekarang. Sebaiknya gunakan null

3. url: Mana-mana URL yang sah, digunakan untuk mengemas kini bar alamat penyemak imbas, tidak kira sama ada URL itu sudah wujud dalam senarai alamat. Lebih-lebih lagi, ia tidak memuatkan semula halaman.

Perbezaan utama antara kedua-dua kaedah ialah: pushState() menambah entri baharu pada timbunan sejarah dan replaceState() menggantikan nilai rekod semasa. Jika anda masih keliru tentang perkara ini, gunakan beberapa contoh untuk menunjukkan perbezaannya.

Katakan kita mempunyai dua blok tindanan, satu berlabel 1 dan satu lagi berlabel 2, dan anda mempunyai blok tindanan ketiga berlabel 3. Apabila pushState() dilaksanakan, blok tindanan 3 akan ditambah pada tindanan sedia ada, jadi tindanan akan mempunyai 3 tindanan blok.

Di bawah senario hipotetikal yang sama, apabila replaceState() dilaksanakan, blok 3 akan diletakkan pada timbunan blok 2. Oleh itu, bilangan rekod sejarah kekal tidak berubah, iaitu pushState() akan menambah bilangan sejarah sebanyak 1.

Keputusan perbandingan adalah seperti berikut:

Pada ketika ini, untuk mengawal sejarah penyemak imbas, kami telah mengabaikan peristiwa pushState() dan replaceState(). Tetapi dengan mengandaikan pelayar mengira banyak rekod buruk, pengguna mungkin dialihkan ke halaman ini, atau mungkin tidak. Dalam kes ini, masalah yang tidak dijangka timbul apabila pengguna menggunakan butang navigasi ke hadapan dan belakang penyemak imbas.

Walaupun apabila kami menggunakan pushState() dan replaceState() untuk pemprosesan, kami menjangkakan peristiwa popstate akan dicetuskan. Tetapi pada hakikatnya, ini tidak berlaku. Sebaliknya, apabila anda menyemak imbas sejarah sesi, sama ada anda mengklik butang ke hadapan atau belakang, atau menggunakan kaedah history.go dan history.back, popstate akan dicetuskan.

　Dalam penyemak imbas WebKit, peristiwa popstate akan dicetuskan selepas acara pemuatan dokumen, tetapi Firefox dan IE tidak mempunyai tingkah laku ini.
Contoh tunjuk cara

HTML:

JavaScript: