Menggunakan JavaScript untuk mengesan status dalam talian/luar talian pengguna: Panduan Praktikal

Dokumen ini bertujuan untuk membantu pemaju menyelesaikan masalah apabila menggunakan JavaScript untuk mengesan status dalam talian/luar talian pengguna. Kami akan menyelam bagaimana untuk mendengar peristiwa dalam talian dan luar talian dengan betul dan memberikan contoh kod yang menunjukkan cara mengemas kini penunjuk status pengguna secara dinamik menggunakan JavaScript dan CSS untuk membina aplikasi web yang lebih responsif dan mesra pengguna.

Dalam pembangunan web, pengesanan masa nyata status pengguna dalam talian/luar talian adalah penting untuk memberikan pengalaman pengguna yang baik. Artikel ini akan membimbing anda tentang cara mendengar acara dalam talian dan luar talian menggunakan JavaScript dan mengemas kini penunjuk status pengguna secara dinamik bersempena dengan CSS.

Dengarkan acara dalam talian dan luar talian

HTML5 menyediakan acara dalam talian dan luar talian yang membolehkan kami mengesan status sambungan rangkaian pengguna. Kita perlu mendengar kedua -dua peristiwa ini di objek tetingkap.

 window.addeventListener ('online', updateOnlinestatus);
window.addeventListener ('offline', updateOnlinestatus);

Fungsi UpdateOnlinestatus akan dipanggil apabila keadaan rangkaian berubah.

Dapatkan status pengguna

Navigator.Online Property boleh digunakan untuk menentukan status sambungan rangkaian semasa. Kembali benar jika penyemak imbas dalam talian, jika tidak, pulih palsu.

 Biarkan keadaan = navigator.online? "Online": "Offline";

Kemas kini Penunjuk Status Pengguna

Untuk memaparkan status dalam talian/luar talian pengguna pada antara muka pengguna, kami boleh menggunakan elemen Div dan mengemas kini gayanya secara dinamik berdasarkan status rangkaian.

Pertama, pastikan HTML anda mengandungi elemen untuk memaparkan status dan memberikan ID unik, seperti user_status.

 <div class="profile_avatar">
    <div class="profile_avatar_holder">
        <img src="https://example.com/profile_image.jpg" alt="">
    </div>
    <div id="user_status" class="user_status"> </div>
</div>

Seterusnya, dapatkan elemen dalam JavaScript dan tulis fungsi UpdateOnlinestatus untuk mengemas kini harta status data.

 const user_status = document.getElementById ("user_status");

fungsi updateOnlinestatus (event) {
  Biarkan keadaan = navigator.online? "Online": "Offline";

  // dataset paling mudah digunakan, ia secara automatik menambahkan atribut ke elemen
  user_status.dataset.status = keadaan;

  Console.log ("Acara:" Event.Type, "Status:" Keadaan);
}

window.addeventListener ('online', updateOnlinestatus);
window.addeventListener ('offline', updateOnlinestatus);

updateOnlinestatus ({}); // Tetapkan status awal

Dalam CSS, kita boleh menggunakan pemilih atribut untuk menukar gaya elemen berdasarkan nilai atribut status data.

 / * ikon status pengguna */
.user_status {
  Kedudukan: Mutlak;
  Kandungan: "";
  Ketinggian: 14px;
  lebar: 14px;
  latar belakang warna: #c0c0c0;
  Bawah: 0;
  Kanan: 0;
  paparan: blok;
  Sempadan: 2.5px pepejal #ffff;
  Radius sempadan: 50%;
}

.user_status [data-status = "online"] {
  latar belakang warna: #38B653;
  Keterlihatan: kelihatan;
}

Kod CSS ini mula-mula mentakrifkan gaya asas kelas user_status, dan kemudian menggunakan pemilih [data-status = "online"] untuk menukar warna latar belakang dan penglihatan elemen apabila nilai atribut status data adalah "dalam talian".

Contoh lengkap

Berikut adalah contoh lengkap yang menunjukkan cara mengesan dan memaparkan status dalam talian/luar talian pengguna menggunakan JavaScript dan CSS.

Html:

 <div class="profile_avatar">
    <div class="profile_avatar_holder">
        <img src="https://example.com/profile_image.jpg" alt="">
    </div>
    <div id="user_status" class="user_status"> </div>
</div>

CSS:

 / * ikon status pengguna */
.user_status {
  Kedudukan: Mutlak;
  Kandungan: "";
  Ketinggian: 14px;
  lebar: 14px;
  latar belakang warna: #c0c0c0;
  Bawah: 0;
  Kanan: 0;
  paparan: blok;
  Sempadan: 2.5px pepejal #ffff;
  Radius sempadan: 50%;
}

.user_status [data-status = "online"] {
  latar belakang warna: #38B653;
  Keterlihatan: kelihatan;
}

JavaScript:

 const user_status = document.getElementById ("user_status");

fungsi updateOnlinestatus (event) {
  Biarkan keadaan = navigator.online? "Online": "Offline";

  // dataset paling mudah digunakan, ia secara automatik menambahkan atribut ke elemen
  user_status.dataset.status = keadaan;

  Console.log ("Acara:" Event.Type, "Status:" Keadaan);
}

window.addeventListener ('online', updateOnlinestatus);
window.addeventListener ('offline', updateOnlinestatus);

updateOnlinestatus ({}); // Tetapkan status awal

Perkara yang perlu diperhatikan

• Harta Navigator.online mungkin tidak selalu tepat. Sebagai contoh, Navigator.online boleh kembali benar walaupun peranti disambungkan ke rangkaian tempatan tetapi tidak dapat mengakses Internet.
• Dalam sesetengah pelayar, acara dalam talian dan luar talian mungkin tidak akan dicetuskan dengan segera.
• Untuk meningkatkan pengalaman pengguna, pertimbangkan untuk memaparkan mesej segera apabila status rangkaian berubah.

Meringkaskan

Dengan mendengar acara dalam talian dan luar talian dan mengemas kini penunjuk status pengguna secara dinamik dengan CSS, kami boleh membina aplikasi web yang lebih responsif dan mesra pengguna. Ingat bahawa Navigator.Online Property mungkin tidak selalu tepat, jadi langkah -langkah tambahan diperlukan untuk memastikan pengalaman pengguna. Gunakan atribut data-* untuk memudahkan perubahan gaya dalam CSS mengikut keadaan, mengelakkan masalah yang disebabkan oleh secara langsung memanipulasi senarai kelas.

Atas ialah kandungan terperinci Menggunakan JavaScript untuk mengesan status dalam talian/luar talian pengguna: Panduan Praktikal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!