JS membezakan sama ada halaman penyemak imbas dikemas kini atau kemahiran closed_javascript

Pembangun web sering menghadapi pelbagai permintaan daripada pengurus produk semasa pembangunan sistem Sudah tentu, kebanyakan daripada mereka membantu untuk pengalaman produk, seperti menyegarkan halaman, ke hadapan dan ke belakang, dan menutup penyemak imbas yang kami sebutkan hari ini. untuk mengelakkan salah operasi pengguna, kotak gesaan pengesahan sekunder perlu diberikan. Saya percaya semua orang sudah biasa dengan ini dengan menggunakan mekanisme acara BOM yang disediakan oleh pelayar . Jika pengurus produk Adalah difahami untuk menaikkan permintaan sedemikian, tetapi ia memerlukan lebih daripada ini...

Sebagai contoh, semasa salah satu pembangunan projek kami, pengurus produk mencadangkan "pelan penambahbaikan" untuk pelaksanaan kami:

Kotak timbul anda terlalu hodoh dan tidak sepadan dengan gaya keseluruhan sistem. Tidakkah kami boleh menggunakan Dialog dalam perpustakaan komponen kami sendiri? Soalan yang sangat bagus...saya cuma nak cakap, awak boleh bangun...

Salinan yang dipaparkan dalam tab muat semula dan tutup anda adalah sama. Gesaan muat semula ialah XXX dan gesaan SSS digesa semasa menutup, supaya pengguna boleh menjadi lebih jelas. Nah, memandangkan pengalaman pengguna, ia sangat bagus, saya masih ingin mengatakan, anda boleh... Malah, penyemak imbas itu sendiri telah memperlakukannya secara berbeza apabila ia ditutup dan disegarkan mereka. Sesetengah bahagian tidak boleh memaparkan penulisan salinan yang berbeza, sudah tentu, terdapat beberapa kaedah penggodaman, tetapi sukar untuk menyesuaikan diri dengan berbilang penyemak imbas, dan mekanisme pelaksanaan dalaman untuk menutup tab dan menyegarkan akan berbeza dalam setiap penyemak imbas;

Setiap kali anda log masuk, mengapa anda perlu menangguhkan 10 saat sebelum membenarkan ejen log masuk ke sistem telefon (kami adalah sistem perkhidmatan pelanggan)? Bolehkah anda mengalih keluar sekatan ini? Kami juga ingin mengalih keluarnya, tetapi daftar masuk dan daftar keluar yang kerap pada sistem telefon akan menyebabkan masalah Jika pengguna menyegarkan penyemak imbas dan mendaftar masuk semula, jika selang masa sangat singkat, sistem telefon akan rosak untuk mengelakkan masalah ini, kami menambah Kami telah mengatasi had ini, tetapi jika kita memikirkannya semula, kita boleh memasukkan topik yang kita bincangkan hari ini;

Bezakan antara menyegarkan dan menutup tab Kami tidak dapat membezakan antara menyegarkan atau menutup tab berdasarkan peristiwa penyemak imbas, dan kemudian melakukan tindakan yang berbeza sebelum tindakan yang sepadan dicetuskan Walau bagaimanapun, mengenai perkara ketiga yang dibangkitkan oleh produk di atas, kami sebenarnya boleh mempertimbangkan untuk mengoptimumkannya, iaitu, hanya Terdapat kelewatan 10 saat apabila menyegarkan tidak akan ada kelewatan apabila log masuk semula atau selepas menutup tab untuk seketika;

Sebenarnya sangat mudah untuk melakukan ini Anda boleh menggunakan mekanisme storan setempat penyemak imbas, seperti kuki, LocalStorage, dll. SessionStorage tidak boleh digunakan di sini kerana cache akan menjadi tidak sah selepas sesi ini tamat menambah bilangan bait kuki, jumlah penghantaran rangkaian yang sepadan dalam setiap permintaan akan meningkat Oleh itu, kami menggunakan Penyimpanan Tempatan adalah sangat mudah Rangka kerja bahagian hadapan yang kami gunakan adalah AngularJS, seperti berikut:

Fungsi utama kod di atas ialah selepas memasuki sistem, ia akan pergi ke LocalStorage terlebih dahulu untuk mendapatkan masa apabila ia terakhir dikeluarkan, dan kemudian dapatkan masa semasa, dan tolak dua kali jika nilainya kurang daripada 10 saat, kami fikir ia adalah penyegaran Jika nilai lebih besar daripada 10 saat, kami fikir ia adalah tab rapat atau log masuk baharu, dan kemudian kami boleh melakukan kaedah yang berbeza untuk memberikan perkhidmatan pelanggan pengalaman yang lebih baik 'Tidak perlu menunggu 10 saat setiap kali untuk log masuk ke dalam sistem telefon , RD mesti secara beransur-ansur memupuk pengalaman pengguna seperti ini terlebih dahulu berfikir, walaupun ia boleh meningkatkan kecekapan perkhidmatan pelanggan sedikit Setiap tempat bernilai masa kita untuk mengoptimumkan

const MAX_WAIT_TIME = 10;
const currentDate = new Date().getTime();
const lastestLeaveTime = parseInt(this.$window.localStorage.getItem('lastestLeaveTime'), 10) || currentDate;
this.secondCounter = Math.max(MAX_WAIT_TIME - Math.ceil((currentDate - lastestLeaveTime) / 1000), 0);
if (this.secondCounter > 0) {
this.logoutTimeInterval = this.$interval(()=> {
this.secondCounter--;
this.$scope.$digest();
}, 1000, this.secondCounter, false).then(() => {
this.updateByStatus(this.AvayaService.status.OFFLINE);
});
} else {
this.updateByStatus(this.AvayaService.status.OFFLINE);
}

Izinkan saya menyiarkan kod keluar yang berkaitan di bawah saya terlupa untuk menyebutnya sebelum ini Tidak kira ia menyegarkan atau menutup tab, selagi halaman itu dimusnahkan, kami akan melakukan operasi log keluar dari sistem telefon. jadi setiap kali kami masuk, kami perlu Daftar masuk semula;

Kami juga mungkin melihat beberapa masalah, iaitu menyegarkan, menutup halaman, memajukan dan menyandarkan, anda perlu melompat keluar dari kotak pengesahan sekunder lalai penyemak imbas, tetapi apabila pengguna mengklik butang keluar sistem, Dialog dalam dia perpustakaan komponen sendiri mesti muncul kedua-duanya Kod khusus adalah seperti berikut:

//刷新页面或者关闭页面
$window.onbeforeunload = () => {
return '操作将会导致页面数据清空，请谨慎操作...';
};
//每次页面unload时，设置LocalStorage时间；
$window.onunload = () => {
$window.localStorage.setItem('lastestLeaveTime', new Date().getTime());
};

Di atas adalah keseluruhan kandungan JS yang diperkenalkan oleh editor untuk membezakan sama ada halaman penyemak imbas dimuat semula atau ditutup. Saya harap ia akan membantu semua orang!