Bagaimanakah JavaScript Dapat Mengesan dan Membalas Perubahan Ketersambungan Internet?

Mengesan Ketersambungan Internet dalam JavaScript: Panduan Komprehensif

Dalam landskap pembangunan web hari ini, memastikan pengalaman pengguna yang mantap dan boleh dipercayai sering bergantung pada pengesanan sama ada sambungan internet di luar talian atau aktif. Nasib baik, JavaScript menawarkan beberapa kaedah untuk mencapai kefungsian kritikal ini.

Memperkenalkan window.navigator.onLine Property

Kebanyakan penyemak imbas utama kini menyokong sifat window.navigator.onLine , nilai Boolean yang menunjukkan keadaan semasa sambungan internet. Akses harta ini untuk menyemak sama ada pengguna disambungkan ke Internet.

console.log('Initially ' + (window.navigator.onLine ? 'on' : 'off') + 'line');

Mendengar untuk Acara Ketersambungan

Penyemak imbas juga menyediakan pendengar acara untuk acara dalam talian dan luar talian , yang mencetuskan apabila status ketersambungan berubah. Dengan mendengar acara ini, anda boleh membalas perubahan dalam masa nyata.

window.addEventListener('online', () => console.log('Became online'));
window.addEventListener('offline', () => console.log('Became offline'));

Mengesahkan Status Ketersambungan dengan Klik

Untuk menunjukkan kaedah ini dalam tindakan , buat butang HTML yang, apabila diklik, menyemak dan memaparkan tetingkap semasa.navigator.onLine nilai:

<button>

document.getElementById('statusCheck').addEventListener('click', () => console.log('window.navigator.onLine is ' + window.navigator.onLine));

Pertimbangan Tambahan

• Disebabkan caching dan soket web, sifat window.navigator.onLine mungkin tidak selalu mencerminkan dengan tepat status ketersambungan sebenar.
• Menggunakan API sebelah pelayan (cth., fetch() API) dan sentiasa memantau respons mereka boleh melengkapkan kaedah pihak klien untuk meningkatkan kebolehpercayaan.

Atas ialah kandungan terperinci Bagaimanakah JavaScript Dapat Mengesan dan Membalas Perubahan Ketersambungan Internet?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!