Kembalikan metode implementasi di halaman Html5

Saat melihat judul ini, Anda mungkin berpikir apa ini? Sebenarnya yang ingin saya sampaikan adalah ini, simak rekamannya di bawah ini:

Interaksi semacam ini biasa terjadi di halaman H5. Klik pada kota -> munculkan lapisan mengambang pilihan kota -> tekan tombol kembali untuk menutup lapisan mengambang.

Operasi ini dapat dilakukan tanpa mengklik tombol tutup di sudut kiri atas/pojok kanan atas. H5 Fliggy memiliki lapisan pop-up saat bergerak maju, dan lapisan pop-up ditutup saat kembali. Tiket penerbangan Qunar.com H5, hotel Meituan H5).

Karena H5 dioperasikan di ponsel, maka coverage area area pengoperasian jari pada ponsel tersebut sangat kecil, apalagi area dead space (batal/tutup) di pojok kiri atas/pojok kanan atas. Anda pasti pernah mendengar tindakan ini: ketuk untuk kembali. Ini sangat nyaman dan ramah bagi pengguna untuk beroperasi. Setelah memilih kota, tidak perlu mengklik Batal. Cukup klik Kembali di mana ibu jari dapat beroperasi untuk menutup lapisan pop-up.

Karena permintaannya sangat bagus, sebagai pengembang, Anda pasti akan berusaha semaksimal mungkin untuk mengimplementasikan fungsi ini. Anda bahkan tidak perlu mencari di Google, Anda seharusnya bisa memikirkan metode seperti history.back(), history.go(). Namun, memikirkan hal ini tetap tidak ada gunanya. Secara teori, kembali/meneruskan browser/tampilan web memerlukan pemuatan ulang halaman karena URL-nya telah berubah. Jika Anda benar-benar paham tentang aplikasi satu halaman (SPA), atau menggunakan React/Vue, Anda harus tahu bahwa ada yang namanya: routing. Perubahan URL yang mengubah hash dan tidak dapat disegarkan ini adalah fungsi riwayat yang ditambahkan di HTML5.

antarmuka-sejarah

 antarmuka Riwayat { atribut readonly panjang panjang yang tidak ditandatangani; atribut ScrollRestoration scrollRestoration; atribut readonly status apa pun; void go(delta panjang opsional = 0); url = null); void replaceState(data apa pun, judul DOMString, DOMString opsional? url = null);};

1. keadaan dorong
2. replaceState

Ada acara lain

1. di negara bagian pop

pushState, replaceState digunakan untuk mengubah urutan tumpukan riwayat, onpopstate dipicu saat kembali dan bergerak maju.

Hal yang sama juga berlaku untuk implementasi di vue-router (baris 1694)

Setelah kita membahas banyak hal, mari kita lihat cara mengimplementasikan fungsi ini.

Mari kita lihat kompatibilitas pushState dan replaceState

Semuanya berwarna hijau dan terasa jauh lebih aman untuk digunakan.

Ide:

1. PushState menambahkan hash saat mengklik lapisan pop-up
2. Ketika peristiwa onpopstate dipicu saat mengetuk untuk kembali, lapisan popup disembunyikan dan hash diubah.

 <button onclick=city()> Kota</button><br> <button onclick=calendar()> Kalender</button><br> <button onclick=description()> Deskripsi</button> <div id=city class=com style=display: none;> Lapisan pop-up kota simulasi</div> <div id=calendar class=com style=display: none;> Lapisan pop-up kalender simulasi</div> <div id=description class=com style=display: none;> Simulasikan lapisan pop-up deskripsi</div>

 tombol { batas: #0000; warna latar: #f90; } .com { posisi: absolut ; atas: 0; bawah: 0; kanan: 0;

 var cityNode = document.getElementById('city'); var CalendarNode = document.getElementById('calendar'); var DescriptionNode = document.getElementById('description'); ; window.history.pushState({'id':'city'},'','#city') } fungsi kalender() { kalenderNode.style.display = 'blok'; window.history.pushState({'id':'calendar'},'','#calendar') } fungsi deskripsi() { deskripsiNode.style.display = 'blok'; window.history.pushState({'id':'description'},'','#description') } window.addEventListener('popstate', function(e){ // alert('state:' + e.state + ', historyLength:' + history.length); if (e.state && e.state.id === 'city') { history.replaceState('','','#'); cityNode.style.display = 'block'; } else if (e.state && e.state.id === 'calendar') { history.replaceState('','','#'); tampilan = 'blok'; } else if (e.state && e.state.id === 'deskripsi') { history.replaceState('','','#'); DescriptionNode.style.display = 'block'; .style.display = 'tidak ada'; kalenderNode.style.display = 'tidak ada'; deskripsiNode.style.display = 'tidak ada';

Terutama melihat kode JS dan memantau peristiwa maju dan mundur halaman untuk mengontrol riwayat.

Kode sumber di sini

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