Pertanyaan javascript: cara menulis $ (dokumen) .Sudah seperti acara tanpa jquery


dalam jquery $ (document) .ready (function) atau $ (function), bagaimana saya bisa melakukan hal yang sama tanpa jquery, dan saya butuh browser compatiable, dan memungkinkan untuk melampirkan lebih dari satu fungsi.

Catatan: dom ready! = Window onload


32
2017-10-21 15:26


asal


Jawaban:


Ini adalah cara jQuery membungkus fungsi yang Anda cari - snippet tidak memerlukan jQuery, dan kompatibel lintas-browser. Saya telah mengganti semua panggilan ke jQuery.ready () dengan yourcallback - yang perlu Anda definisikan.

Apa yang terjadi di sini:

  • pertama, fungsinya DOMContentLoaded didefinisikan, yang akan digunakan ketika peristiwa DOMContentLoaded diaktifkan - ini memastikan bahwa callback hanya dipanggil satu kali.
  • cek apakah dokumen sudah dimuat - jika ya, aktifkan callback segera
  • jika tidak mengendus untuk fitur (document.addEventListener / document.attachEvent) dan mengikat callback ke sana (berbeda untuk IE dan browser normal, plus callback onload)

Diangkat dari jQuery 1.4.3, fungsi bindReady () dan DOMContentLoaded:

/*
* Copyright 2010, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/
// Cleanup functions for the document ready method
// attached in the bindReady handler
if ( document.addEventListener ) {
DOMContentLoaded = function() {
    document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
    //jQuery.ready();
            yourcallback();
};

} else if ( document.attachEvent ) {
DOMContentLoaded = function() {
    // Make sure body exists, at least, in case IE gets a little overzealous 
            if ( document.readyState === "complete" ) {
        document.detachEvent( "onreadystatechange", DOMContentLoaded );
        //jQuery.ready();
                    yourcallback();
    }
    };
}

// Catch cases where $(document).ready() is called after the
// browser event has already occurred.
if ( document.readyState === "complete" ) {
    // Handle it asynchronously to allow scripts the opportunity to delay ready
//return setTimeout( jQuery.ready, 1 );
    // ^^ you may want to call *your* function here, similarly for the other calls to jQuery.ready
    setTimeout( yourcallback, 1 );
}

// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
    // Use the handy event callback
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
// A fallback to window.onload, that will always work
//window.addEventListener( "load", jQuery.ready, false );
    window.addEventListener( "load", yourcallback, false );
 // If IE event model is used
 } else if ( document.attachEvent ) {
        // ensure firing before onload,
        // maybe late but safe also for iframes
        document.attachEvent("onreadystatechange", DOMContentLoaded);

        // A fallback to window.onload, that will always work
        window.attachEvent( "onload", yourcallback );

 }

Itu 51 baris kode JavaScript murni, hanya untuk mendaftarkan acara dengan andal. Sejauh yang saya tahu, tidak ada metode yang lebih mudah. Pergi untuk menunjukkan apa wrappers seperti jQuery yang baik untuk: mereka membungkus kemampuan mengendus dan masalah kompatibilitas jelek sehingga Anda dapat fokus pada sesuatu yang lain.


24
2017-10-21 15:45



Kode DOMReady terkecil, pernah.

<html>
  <head>
    <script>
      var ready = function (f) {
        (/complete|loaded|interactive/.test(document.readyState)) ?
            f() :
            setTimeout(ready, 9, f);
      };
    </script>
  </head>
  <body>
    <script>
      ready(function () {
        alert('DOM Ready!');
      });
    </script>
  </body>
</html>

9
2017-08-11 13:41



Ini semua yang Anda butuhkan jika Anda mendukung IE9 + dan versi modern (2013) dari Chrome, FF, Safari, dll.

function ready(event) {
    // your code here
    console.log('The DOM is ready.', event);
    // clean up event binding
    window.removeEventListener('DOMContentLoaded', ready);
}

// bind to the load event
window.addEventListener('DOMContentLoaded', ready);

3
2018-04-30 06:35



Berikut adalah metode yang saya gunakan yang tampaknya bekerja dengan andal

function ready(func) {
  var span = document.createElement('span');
  var ms = 0;
  setTimeout(function() {
    try {
      document.body.appendChild(span);

      document.body.removeChild(span);

      //Still here? Then document is ready
      func();
    } catch(e) {
      //Whoops, document is not ready yet, try again...

      setTimeout(arguments.callee, ms);
    }
  }, ms);
}

Cukup sederhana, itu hanya terus mencoba menambahkan kosong <span> elemen ke document.body. Jika dokumen tidak "siap", sebuah pengecualian akan dibuang, dalam hal ini akan mencoba lagi dengan yang baru setTimeout panggilan. Begitu tidak terkecuali dilemparkan, itu memanggil fungsi callback.

Saya akan senang mendengar jika ada masalah dengan metode ini. Ini telah bekerja dengan baik untuk saya, tetapi saya belum melakukan pengujian ekstensif yang akan alami untuk kerangka Javascript yang populer.


2
2017-10-21 18:15



Saya telah melihat banyak cara berbeda untuk mencoba melakukan ini. Cara paling sederhana (disarankan oleh yahoo awalnya, saya pikir) adalah dengan hanya memanggil fungsi initializer Anda setelah tag body yang dekat, sedikit menonjol, tapi itu satu baris.


1
2017-10-21 17:45



Edit

Acara DomReady tidak ada secara pribadi dalam javascript. Anda dapat mengimplementasikan sendiri dengan mengikuti beberapa pekerjaan luar biasa yang dilakukan oleh orang-orang seperti Dean Edwards sini dan sini dengan yang ada di tempat Anda dapat melakukan proses lampiran peristiwa serupa pada dokumen, bukan jendela.


Lihat jawaban pengguna83421 Bagaimana cara menambahkan acara window.onload tambahan di Javascript

Untuk rekap di sini juga.

if (window.addEventListener) // W3C standard
{
  window.addEventListener('load', myFunction, false); // NB **not** 'onload'
} 
else if (window.attachEvent) // Microsoft
{
  window.attachEvent('onload', myFunction);
}

0
2017-10-21 15:30



Saya memiliki ini setelah tag 'close body' dan sebelum tag 'close html'. dan itu bekerja dengan baik. Fungsi load preset memberikan nilai lebar, tinggi, dan posisi ke tag css div. berguna untuk ukuran layar yang berbeda.

document.onreadystatechange = function () {
if  (document.readyState == "interactive") {
loadPresets();
}

}


0
2017-07-24 02:07