Cara mengubah sejarah penyemak imbas dalam aplikasi HTML5 dan JavaScript kompleks

3Tidakkah anda suka tajuk Snappy?! Pertimbangkan aplikasi yang canggih seperti klien webmail. Pada dasarnya, ia adalah program JavaScript yang kompleks yang dijalankan pada halaman HTML tunggal. Pengguna memuat URL dan dibentangkan dengan senarai e -mel. Mereka mengklik tajuk dan kandungan e -mel diambil menggunakan AJAX dan dipaparkan. Mereka kini mahu kembali ke senarai e -mel; Apa yang mereka buat?… ... Klik butang belakang penyemak imbas. Bang. Permohonan ditutup dan kembali ke halaman yang mereka lihat sebelum mengakses permohonan. Atau, jika tab penyemak imbas baru, butang belakang dilumpuhkan dan tidak boleh diklik. Oleh itu, kita mempunyai masalah. Pelanggan webmail kami tidak menyokong kawalan pelayar yang kebanyakan pengguna memahami. Ada penyelesaian. Ada yang melibatkan perubahan tanda hash (#name) dalam URL supaya keadaan dapat dikekalkan. Ia tidak sempurna, tetapi berfungsi dalam semua pelayar. Nasib baik, masalah ini telah ditangani dengan sejarah html5.pushstate dan sejarah.Replacestate Kaedah bersempena dengan acara Window.onpopstate. Cuba sejarah.pushstate () halaman demonstrasi ... Teknik ini mudah menyegarkan:

1. Apabila keadaan berubah, mis. Pengguna membuka e -mel, History.PushState () diluluskan maklumat negeri dan dilaksanakan. Ini membolehkan butang belakang tetapi - yang penting - tidak memindahkan pengguna dari halaman.
2. anda boleh menjalankan sejarah.pushstate () seberapa banyak yang diperlukan, atau mengubah keadaan semasa menggunakan sejarah.replacestate ().
3. Apabila pengguna mengklik kembali (atau ke hadapan), acara window.onpopstate dipecat. Fungsi pengendali boleh mengambil keadaan yang berkaitan dan memaparkan skrin yang sesuai.

Kelemahan? Lupakan keserasian iaitu V10 tiba. Sekiranya anda perlu menyokong IE9 dan ke bawah, terdapat beberapa shims termasuk sejarah.js dan html5-history-api . Mari tulis beberapa kod. Anggapkan anda baru saja memaparkan hasil permintaan Ajax:

// Ajax request
...
// display result
...

// modify history
history.pushState(obj, title, url);

Di mana:

• OBJ adalah objek JavaScript. Anda boleh menggunakannya untuk mengekalkan maklumat negeri, mis. {"Lihat": "EmailContent", "Item": 123};
tajuk adalah tajuk pilihan
URL adalah URL pilihan. URL boleh menjadi apa -apa - penyemak imbas tidak akan melompat ke halaman itu, tetapi
• boleh jika pengguna memuat semula halaman atau memulakan semula penyemak imbas mereka. Dalam kebanyakan kes, anda akan mahu menggunakan parameter atau nama hash, mis. ? Lihat = EmailContent & Item = 123; Permohonan anda boleh menganalisis nilai-nilai ini pada permulaan dan kembali ke tempat yang sama.
History.ReplaceState () mempunyai argumen yang sama dan hanya digunakan jika anda ingin menggantikan keadaan semasa dengan yang baru. Anda kini memerlukan fungsi pengendali yang berjalan apabila kebakaran acara PopState Window berikutan butang belakang atau seterusnya penyemak imbas yang diklik:

Lokasi URL boleh ditentukan dengan document.location (document.location.search and document.location.hash Kembalikan parameter dan nama hash masing -masing). Objek keadaan bersejarah yang ditetapkan oleh pushstate () atau penggantian () diperolehi dari harta benda objek acara. Anda boleh menggunakan maklumat untuk memaparkan skrin yang sesuai. Cuba sejarah.pushstate () halaman demonstrasi ... Klik butang Sejarah.Pushstate beberapa kali kemudian tekan kembali untuk melihat apa yang berlaku dalam log. Sangat berguna. Pernahkah anda menghadapi masalah butang balik dan seterusnya dalam aplikasi web anda?

// Ajax request
...
// display result
...

// modify history
history.pushState(obj, title, url);

Soalan Lazim (Soalan Lazim) Mengenai Sejarah JavaScript Pushstate

Apakah fungsi utama sejarah JavaScript Pushstate? Ia adalah sebahagian daripada API Sejarah dan ia membolehkan anda menambah entri sejarah. Ini amat berguna apabila anda ingin membuat aplikasi satu halaman yang boleh mengubah URL tanpa memuatkan semula halaman. Ia membantu dalam mengekalkan pengalaman pengguna dan keadaan aplikasi walaupun pengguna menavigasi melalui butang ke hadapan dan belakang penyemak imbas. Dengan mengambil tiga parameter: objek negara, tajuk (yang kini diabaikan oleh kebanyakan pelayar), dan URL. Apabila kaedah pushstate dipanggil, ia mewujudkan entri sejarah baru dalam timbunan sejarah penyemak imbas. Kemasukan baru ini dikaitkan dengan objek dan URL negeri yang ditentukan. Apabila pengguna menavigasi ke entri baru ini, acara PopState dipecat, dan objek Negeri diserahkan kembali ke aplikasi. Pushstate sejarah disokong secara meluas dalam semua pelayar moden. Walau bagaimanapun, ia tidak disokong dalam versi Internet Explorer 9 dan terdahulu. Oleh itu, jika anda sedang membangunkan aplikasi untuk penyemak imbas yang lebih tua, anda mungkin perlu menggunakan polyfill atau sandaran ke URL berasaskan hash.

Apakah perbezaan antara kaedah pushstate dan penggantian dalam JavaScript? Perbezaan utama di antara mereka ialah Pushstate mencipta entri sejarah baru dan menambahkannya ke timbunan sejarah, sementara penggantian mengubah entri sejarah semasa tanpa menambahkan yang baru ke timbunan. Dalam JavaScript?

Acara popstate dipecat apabila perubahan sejarah aktif berubah. Jika kemasukan sejarah dibuat oleh Pushstate, objek negara yang dikaitkan dengan entri itu diluluskan kembali ke permohonan. Anda boleh mengendalikan acara PopState dengan menambahkan pendengar acara ke objek tetingkap dan menentukan fungsi yang akan dilaksanakan apabila acara itu dipecat. > Objek Negeri adalah objek JavaScript yang berkaitan dengan entri sejarah. Objek ini boleh mengandungi apa -apa jenis data yang anda ingin kaitkan dengan entri sejarah. Apabila pengguna menavigasi ke entri sejarah, objek negeri diluluskan kembali ke aplikasi, yang membolehkan anda memulihkan keadaan aplikasi. 🎜>

Ya, salah satu kelebihan utama menggunakan sejarah JavaScript Pushstate ialah ia membolehkan anda menukar URL tanpa memuatkan semula halaman. Ini amat berguna apabila anda ingin membuat aplikasi satu halaman yang boleh mengubah URL untuk mencerminkan keadaan semasa aplikasi. >

Dalam aplikasi satu halaman, sejarah JavaScript Pushstate memainkan peranan penting dalam mengekalkan pengalaman pengguna. Ia membolehkan anda menukar URL untuk mencerminkan keadaan semasa permohonan tanpa memuatkan semula halaman. Ini bermakna pengguna boleh menavigasi aplikasi menggunakan butang ke hadapan dan belakang penyemak imbas tanpa kehilangan keadaan aplikasi. Gunakan JavaScript History Pushstate untuk mewujudkan sistem navigasi dengan menambahkan entri sejarah untuk setiap tindakan navigasi. Apabila pengguna menavigasi ke entri sejarah, anda boleh menggunakan objek negeri yang berkaitan dengan entri tersebut untuk memulihkan keadaan permohonan. Ini membolehkan anda membuat pengalaman navigasi yang lancar tanpa memuatkan semula halaman. Ia mempunyai beberapa batasan. Sebagai contoh, ia tidak disokong dalam versi Internet Explorer 9 dan terdahulu. Juga, ia hanya boleh menambah entri sejarah untuk asal yang sama, yang bermaksud anda tidak boleh menggunakannya untuk menambah entri sejarah untuk domain yang berbeza.

Atas ialah kandungan terperinci Cara mengubah sejarah penyemak imbas dalam aplikasi HTML5 dan JavaScript kompleks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!