Bagaimana untuk Mengesan Acara Sedia DOM dalam Javascript Tanpa Rangka Kerja?

Pengesanan Acara Sedia Javascript DOM Tanpa Rangka Kerja

Dalam Javascript, pembangun sering bergantung pada rangka kerja seperti Prototaip atau jQuery untuk melampirkan fungsi pada acara window.onload untuk melaksanakan tugas tertentu . Walau bagaimanapun, terdapat cara lain untuk mencapai ini tanpa menggunakan rangka kerja ini.

Objek dokumen dalam Javascript mempunyai sifat readyState yang menunjukkan peringkat pemuatan halaman, serupa dengan sifat readyState permintaan AJAX. Sifat readyState boleh mempunyai nilai berikut:

• memuat - Halaman masih dimuatkan dan elemen DOM belum tersedia.
• interaktif - Halaman dimuatkan dan elemen DOM kebanyakannya sedia untuk interaksi, tetapi imej dan sumber lain mungkin masih dimuatkan.
• lengkap - Halaman dimuatkan sepenuhnya dan semua elemen DOM tersedia.

Untuk mengesan apabila DOM sudah sedia , anda boleh menggunakan kod berikut:

<code class="javascript">function fireOnReady() { /* ... */ }
if (document.readyState === 'complete') {
    fireOnReady();
} else {
    document.addEventListener("DOMContentLoaded", fireOnReady);
}</code>

Kod ini menyemak sama ada halaman telah dimuatkan sepenuhnya (readyState 'lengkap') dan melaksanakan fungsi fireOnReady serta-merta. Jika tidak, ia melampirkan panggilan balik pada acara DOMContentLoaded, yang menyala apabila DOM sedia dan melaksanakan fungsi fireOnReady.

Pilihan lain ialah menggunakan sifat isReady yang tidak didokumentasikan jQuery:

<code class="javascript">if($.isReady) {
    // DOM is ready
} else {
    // DOM is not yet ready
}</code>

Walau bagaimanapun, sifat ini tidak didokumenkan dan mungkin dialih keluar dalam versi jQuery akan datang.

Akhirnya, mendengar acara DOMContentLoaded ialah cara yang paling boleh dipercayai untuk mengesan apabila DOM sedia dalam penyemak imbas moden.

Atas ialah kandungan terperinci Bagaimana untuk Mengesan Acara Sedia DOM dalam Javascript Tanpa Rangka Kerja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!