Contoh penggunaan fitur baru HTML5 untuk memantau kunci pengembalian Aplikasi apa pun dengan mudah

Saat ini, h5 memiliki banyak fitur baru, tag baru, spesifikasi baru, dll., dan terus ditingkatkan. Dukungan dari vendor browser besar juga cukup kuat. Sebagai front-end programmer, menurut saya kita tetap perlu memperhatikan secara aktif dan berani mempraktikkannya. Selanjutnya, saya akan berbagi dengan Anda fitur baru h5 yang sangat berguna (saat ini tidak terlalu baru), yang dapat dengan mudah memantau kunci pengembalian Aplikasi apa pun, termasuk kunci pengembalian fisik di mesin Android, sehingga dapat bertemu lebih jauh. kebutuhan dalam pengembangan proyek.

Sekitar setengah tahun yang lalu, saya menerima permintaan dari PM untuk menggunakan h5 murni untuk merealisasikan pemutaran, jeda, dan dimulainya kembali multi-audio. Halaman tersebut ditempatkan di Aplikasi Panduan Tes Mengemudi, dan tidak ada interaksi dengan klien, jadi js yang berhubungan dengan klien tidak perlu direferensikan. Tampaknya persyaratan ini cukup sederhana, meskipun saya belum pernah membuat persyaratan serupa sebelumnya. Apa pun yang terjadi, singsingkan lengan baju Anda dan lakukan. Perjalanan pembelajaran dimulai.

Jadi mengapa saya harus memantaunya? Saya perlu menekankannya lagi dan lagi. Baik itu WeChat, QQ, App, atau browser di ponsel Apple, jika menyangkut audio dan video, sistem akan secara otomatis menjeda pemutaran saat ini ketika kembali ke halaman sebelumnya, tetapi tidak semua ponsel Android dapat melakukan ini. Jadi kita harus menyesuaikan sendiri pemantauannya. Banyak teman mungkin pertama kali memikirkan Baidu, dan jawabannya tidak lebih dari ini

 pushHistory(); window.addEventListener(popstate, function(e) { alert(Saya mendengarkan acara tombol kembali browser);//Menerapkan fungsi Anda sendiri sesuai dengan kebutuhan Anda}, function pushHistory() { var state = { judul: judul, url: # }; window.history.pushState(negara bagian, judul, # });

Apakah itu terlihat familier? Namun, persyaratan utama tidak dapat direalisasikan dengan sempurna. Saat itu saya sedang memutar otak untuk mengetahui apa gunanya kode ini. Baru setelah saya dibimbing oleh seorang teman baik saya menyalin kode ini.

 var HiddenProperty = 'tersembunyi' dalam dokumen ? 'tersembunyi' : 'webkitHidden' dalam dokumen ? 'webkitHidden' : 'mozHidden' dalam dokumen ? );var onVisibilityChange = function(){ if (!document[hiddenProperty]) { console.log('Halaman tidak aktif'); }else{ console.log('Halaman diaktifkan') }}document.addEventListener(visibilityChangeEvent, onVisibilityChange);

Semua masalah terpecahkan.

Pemahaman pribadi saya tentang prinsip kode ini adalah melakukan operasi terkait dengan menentukan apakah pengguna sedang menjelajahi halaman saat ini.

Ini adalah tautan terkait MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/hidden

Ini bukan berarti Anda benar-benar dapat memantau tombol kembali yang ada di dalam aplikasi melalui JS, atau bahkan tombol kembali fisik di Android, tetapi Anda dapat dengan cepat mewujudkan kebutuhan Anda dengan mengubah pemikiran Anda. Semoga fitur ini dapat membantu Anda.

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