HTML5 Riwayat API mengimplementasikan lompatan bebas refresh

Suatu ketika ketika saya berada di **. Com, saya menemukan bahwa efek animasi dari login dan pendaftaran sangat indah, tetapi yang mengejutkan saya adalah bahwa halaman itu benar -benar tidak dapat mencapai lompatan penyegaran. Saya meninjau pengetahuan front-end yang saya pelajari, dan tampaknya tidak ada teknologi untuk mencapai ini. Jadi saya mencari di Baidu dan mengetahui bahwa ini awalnya dicapai dengan menggunakan API sejarah di HTML5.

Suatu ketika ketika saya berada di **. Com, saya menemukan bahwa efek animasi dari login dan pendaftaran sangat cantik, tetapi yang mengejutkan saya adalah bahwa halaman tersebut benar-benar dapat mencapai lompatan bebas refresh (revisi, Anda dapat mencapai tempat ini ketika menonton efek ini: GitHub atau FM). Saya meninjau pengetahuan front-end yang saya pelajari, dan tampaknya tidak ada teknologi yang dapat mencapai ini. Jadi saya menemukan bahwa ini awalnya dicapai dengan menggunakan API sejarah di HTML5, tetapi tidak pernah berguna. Teknologi ini tidak diterapkan sampai blog direvisi.

1. Menambahkan fungsi menambahkan item dalam riwayat browser melalui JS.

2. Tampilkan URL di bilah alamat browser yang diubah tanpa menyegarkan halaman.

3. Menambahkan acara yang dipecat ketika pengguna mengklik tombol kembali browser.

Melalui tiga titik di atas, dimungkinkan untuk secara dinamis mengubah URL di bilah alamat browser tanpa menyegarkan halaman dan menampilkan konten halaman secara dinamis.

Misalnya: Ketika konten halaman A dan halaman B berbeda, sebelum html5, jika Anda beralih dari halaman A ke halaman B, Anda perlu beralih dari halaman A ke halaman B di browser, atau, jika Anda perlu memiliki fungsi tombol kembali, Anda dapat menambahkan #xxxx ke alamat URL untuk mewujudkan fungsi belakang. Sekarang di HTML5, Anda dapat mengimplementasikan pemrosesan berikut melalui API Sejarah:

1. Minta data B di halaman A dengan mengirim permintaan AJAX.

2. Muat informasi yang sesuai melalui JS di halaman A ke lokasi yang sesuai.

3. Beralih dari alamat URL halaman A ke alamat URL halaman B di bilah alamat browser melalui API riwayat tanpa menyegarkan halaman.

1. Panjang Jumlah istilah dalam sejarah. Sejarah yang dapat dikelola JavaScript terbatas pada kisaran yang dapat dicapai dengan menggunakan tombol ke depan dan belakang browser. Properti ini mengembalikan jumlah jumlah alamat yang terkandung di bawah dua tombol maju dan belakang.

1. Kembali () Kembali, yang setara dengan menekan tombol belakang.

2. Forward () Maju setara dengan menekan tombol maju.

3.go () penggunaan: history.go (x); Pergi ke alamat yang ditentukan dalam lingkup sejarah. Jika x <0, lalu kembali alamat x, jika x> 0, maka teruskan alamat x, jika x == 0, lalu segarkan halaman yang sekarang terbuka. history.go (0) setara dengan lokasi.reload ().

1. History.pushstate (data, judul [, url]): Tambahkan catatan ke bagian atas tumpukan sejarah; Data akan dilewati sebagai parameter ketika acara OnpopState dipicu; Judul adalah judul halaman, dan semua browser saat ini akan mengabaikan parameter ini; URL adalah alamat halaman, opsional, dan standarnya adalah alamat halaman saat ini.

2. History.replacestate (data, judul [, url]): Ubah sejarah saat ini, parameternya sama seperti di atas.

3. History.State: Digunakan untuk menyimpan data data dari metode di atas. Izin baca dan tulis dari berbagai browser berbeda.

4. Acara PopState: Acara ini dipicu ketika pengguna mengklik tombol belakang atau maju dari browser. Nilai properti negara dari objek acara yang memicu acara tersebut dibaca dalam fungsi penanganan acara. Nilai properti ini adalah nilai parameter pertama yang digunakan saat mengeksekusi metode pushstate, yang menyimpan objek yang ditambahkan ke riwayat browser secara serempak.

Sejauh ini, browser mendukung API sejarah di html5 oleh IE10, firefox4 atau di atas, krom 8 atau lebih, safari5 atau lebih tinggi.