Fungsi ini telah dijelaskan secara singkat sebelumnya. Kali ini, kami akan menjelaskan prinsip -prinsip dan masalah yang ada secara rinci (karena menggunakan API baru HTML5, ada masalah kompatibilitas, sehingga disarankan agar terminal seluler menggunakan metode ini).
Deskripsi Fungsi:
Buat halaman tab baru di browser dan tentukan URL. Setelah halaman web dimuat, klik tidak diperbolehkan untuk kembali di bawah proses normal. Karena tidak ada riwayat yang relevan dari halaman tab saat ini, tidak ada catatan yang dapat dikembalikan.
Menanggapi permintaan pelanggan, dalam hal ini, tambahkan tautan (seperti beranda) ke catatan sejarahnya, sehingga pada halaman yang baru dibuka, klik untuk kembali, Anda dapat melompat ke beranda, memungkinkan pengguna untuk melihat berbagai fungsi sistem dan mempromosikan platform.
1. Poin -poin penting pengetahuan
Html5 memperkenalkan metode history.pushState () dan history.replaceState (), yang memungkinkan Anda untuk menambah dan memodifikasi item entri riwayat dengan item. Metode -metode ini dapat bekerja sama dengan acara Window.onpopstate.
Kasus:
Asumsikan http://mozilla.org/foo.html akan menjalankan kode JavaScript berikut:
Salinan kode adalah sebagai berikut: var stateobj = {foo: "bar"}; history.pushstate (Stateobj, "halaman 2", "bar.html");
Ini akan membuat bilah alamat browser menunjukkan http://mozilla.org/bar.html , tetapi halaman bar.html tidak akan memuat atau memeriksa apakah bar.html ada.
Misalkan pengguna sekarang menavigasi ke http://google.com dan kemudian mengklik tombol kembali. Pada saat ini, bilah alamat akan menampilkan http://mozilla.org/bar.html , dan halaman akan memicu acara popstate. Objek negara dalam acara tersebut berisi salinan StateObj. Halaman ini terlihat seperti foo.html, meskipun konten halaman dapat dimodifikasi dalam acara popstate.
Jika kita mengklik tombol kembali lagi, URL akan berubah kembali ke dokumen http://mozilla.org/foo.html untuk memicu acara popstate lain, kali ini objek status nol. Fallback juga tidak akan mengubah konten dokumen.
metode pushstate ()
PushState () memiliki tiga parameter: objek negara, judul (yang akan diabaikan sekarang), dan alamat URL opsional. Mari kita periksa detail dari ketiga parameter ini secara terpisah:
Objek Negara - Objek JavaScript yang terkait dengan entri riwayat baru yang dibuat dengan metode PushState (). Setiap kali pengguna menavigasi ke keadaan yang baru dibuat, acara popstate dipicu, dan properti negara dari objek acara berisi salinan objek negara dari entri sejarah.
Objek serial apa pun dapat diperlakukan sebagai objek negara. Karena browser Firefox menyimpan objek negara ke hard disk pengguna, sehingga mereka dapat dipulihkan setelah pengguna memulai kembali browser, kami secara paksa membatasi ukuran objek negara menjadi 640K. Jika Anda melewati objek negara yang melebihi batas ini ke metode pushstate (), metode ini akan melempar pengecualian. Jika Anda perlu menyimpan data dalam jumlah besar, disarankan untuk menggunakan Sesi Sesi atau LocalStorage.
Judul - Browser Firefox saat ini mengabaikan parameter ini, meskipun dapat digunakan di masa depan. Mempertimbangkan bahwa metode ini dapat dimodifikasi di masa depan, akan lebih aman untuk melewati string kosong. Atau, Anda juga dapat melewati judul pendek yang menunjukkan status yang akan Anda masukkan.
Alamat (URL) - Alamat entri sejarah baru. Browser tidak memuat alamat setelah memanggil metode pushstate (), tetapi setelah itu, ia mungkin berusaha memuat, seperti pengguna memulai kembali browser. URL baru belum tentu merupakan jalan mutlak; Jika itu adalah jalur relatif, itu akan didasarkan pada URL saat ini; URL yang diteruskan harus sama dengan URL saat ini, jika tidak, pushstate () akan melempar pengecualian. Parameter ini opsional; Jika tidak ditentukan, itu adalah URL dokumen saat ini.
Catatan: Di Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / Seamonkey 2.1) ke Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / Seamonkey 2.2), objek yang dilewatkan diserialisasi menggunakan JSON. Dimulai dengan Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / Seamonkey 2.3), objek diserialisasi menggunakan algoritma salinan terstruktur. Ini akan memungkinkan lebih banyak jenis objek untuk dilewatkan dengan aman.
Dalam arti tertentu, memanggil pushstate () sedikit mirip dengan pengaturan window.location = '#foo', dan mereka semua membuat dan mengaktifkan entri sejarah baru dalam dokumen saat ini. Tapi pushstate () memiliki keunggulannya sendiri:
1. URL baru dapat berupa URL homolog. Sebaliknya, saat menggunakan metode window.location, hanya memodifikasi hash dapat memastikan bahwa ia tetap dalam dokumen yang sama.
2. Putuskan apakah akan memodifikasi URL sesuai dengan kebutuhan pribadi Anda. Sebaliknya, atur window.location = '#foo' dan buat riwayat baru hanya jika nilai hash saat ini tidak foo.
3. Anda dapat menambahkan data abstrak ke entri riwayat baru. Jika Anda menggunakan metode berbasis hash, Anda hanya dapat mentranskode data yang relevan menjadi string yang sangat singkat.
Perhatikan bahwa metode pushstate () tidak akan pernah memicu acara hashchange, bahkan jika alamat baru hanya mengubah hash.
Acara Popstate
Acara popstate dipicu setiap kali sejarah yang diaktifkan berubah. Jika entri riwayat yang diaktifkan dibuat oleh PushState atau dipengaruhi oleh metode penggantian, atribut status acara PopState akan berisi salinan objek status sejarah.
Metode penggantian ()
Operasi history.replaceState () mirip dengan history.pushState (), kecuali bahwa metode penggantian () akan memodifikasi entri riwayat saat ini alih -alih membuat entri baru.
Ketika Anda ingin memperbarui objek status atau URL dari entri riwayat saat ini sebagai respons terhadap tindakan tertentu oleh pengguna, menggunakan metode penggantian () sangat cocok.
2. Ide Implementasi
1. Gunakan acara PopState untuk mendengarkan dan mengembalikan acara.
2. Ketika acara dipicu, tentukan apakah ada halaman untuk mengembalikan riwayat halaman saat ini.
3. Jika tidak ada halaman yang dapat dikembalikan, dua catatan dimasukkan:
1) Halaman lompatan yang ditentukan.
2) Catatan kosong. (Buat halaman saat ini tidak berubah)
Metode implementasi
// Kembali ke halaman beranda tanpa halaman sebelum mengembalikan fungsi pushhistory () {if (history.length <2) {var state = {title: "index", url: getHttpprefix + "index.html"}; window.history.pushstate (state, "index", location.href); state = {title: "index", url: ""}; window.history.pushstate (state, "index", ""); } //lll("history.state " + history.state) //console.log(history.state)}Tentukan jumlah catatan dalam sejarah saat ini. Karena browser akan secara otomatis mendorong catatan saat halaman dimuat. Jadi kita perlu menentukan apakah panjangnya kurang dari 2.
Objek negara yang diisi adalah untuk mendapatkan tautan URL yang sesuai.
Catatan:
Saya memasukkan URL lompatan ke objek negara bagian untuk pushstate pertama untuk memfasilitasi operasi lompatan. Parameter kedua tidak memiliki signifikansi praktis, karena browser saat ini pada dasarnya tidak menerapkan parameter ini.
Parameter ketiga akan menggantikan tautan di bilah alamat saat ini, tetapi halaman tidak akan melompat. ;
setTimeout (function () {pushhistory () window.addeventListener ("popstate", function (e) {lll ("PopState"+window.history.state) if (window.history.state! = null && windower.history.state.url! = "") {location.href = window = histate.state.url! 300);Kode ini ditempatkan dalam acara yang siap di halaman, dengan penundaan 300 milidetik untuk menguntungkan operasi dan mencegah konflik dengan acara pop sistem.
Untuk menentukan apakah sejarah memiliki objek negara, hanya catatan yang memenuhi persyaratan kami akan memiliki objek negara yang kami tambahkan, sehingga operasi lompatan halaman dapat dilakukan berdasarkan poin ini.
Ini akan mencapai efek yang kita inginkan.
4. Tulis di akhir
kekurangan:
1. Jelas, sebagaimana disebutkan di awal. Hanya cocok untuk browser yang mendukung HTML5.
2. Karena dua catatan dimasukkan, pengembalian terminal seluler seperti WeChat membutuhkan dua klik untuk kembali sebelum meluncurkan halaman dan kembali ke jendela obrolan WeChat, yang memiliki pengalaman pengguna yang buruk.
Meringkaskan:
Metode ini pasti dapat dioptimalkan dan ditingkatkan, tetapi kekuatan saya tidak cukup untuk disempurnakan dengan tingkat kesempurnaan.
Saya berharap teman -teman yang membaca artikel ini bisa mendapatkan inspirasi, atau ada cara yang lebih baik untuk mencapainya.