Cross Browser Dom Ready

Question

Tôi thừa kế đoạn mã này và nó có vẻ không tối ưu và có thể không chính xác vì nó thêm trình lắng nghe sự kiện vào cả đối tượng cửa sổ và tài liệu. Tuy nhiên, nó hoạt động đúng cách trừ blackberry 5.0. Ai đó có thể giải thích nếu tất cả điều này được thiết lập chính xác hoặc nếu có bất kỳ đề xuất nào để làm cho nó tốt hơn và/hoặc sắp xếp hợp lý hơn?

 if (document.readyState === "complete") 
      callback(); 
     else if (document.addEventListener) 
     { 
      document.addEventListener("DOMContentLoaded",callback,false); 
      window.addEventListener("load",callback,false); 
     } 
     else if(window.attachEvent) 
     { 
      document.attachEvent("onreadystatechange", callback); 
      window.attachEvent("onLoad",callback); 
     } else 
      setTimeout(callback,2000); 

Answer 1

Nếu bạn muốn biết làm thế nào nó được thực hiện hoặc nhìn thấy một cách để làm việc đó. Tôi khuyên bạn nên xem xét công việc của Diego Perini. Công việc và phương pháp của ông được sử dụng trong nhiều thư viện DOM, bao gồm jQuery. Anh chàng này dường như không nhận được nhiều tín dụng. Ông là người tiên phong trong phương pháp bỏ phiếu thử/nắm bắt, đó là những gì làm cho các sự kiện có thể tải ngang qua trình duyệt có thể xảy ra khi IE được đưa vào hỗn hợp.

https://github.com/dperini/ContentLoaded/blob/master/src/contentloaded.js

Answer 2

Cá nhân tôi muốn sử dụng jQuery cho việc này.

jQuery được thiết kế để xử lý nhiều loại trình duyệt khác nhau của trạng thái sẵn sàng của tài liệu.

Sử dụng jQuery mã trên của bạn sẽ trông như thế:

$(callback); 

Answer 3

Nếu bạn muốn sử dụng javascript tinh khiết, bạn có thể sử dụng thу chức năng cross-browser sau (nguồn (bằng tiếng Nga): http://javascript.ru/unsorted/top-10-functions)

function bindReady(handler){ 
    var called = false  
    function ready() { 
     if (called) return 
     called = true 
     handler() 
    }  
    if (document.addEventListener) { 
     document.addEventListener("DOMContentLoaded", function(){ 
      ready() 
     }, false) 
    } else if (document.attachEvent) { 
     if (document.documentElement.doScroll && window == window.top) { 
      function tryScroll(){ 
       if (called) return 
       if (!document.body) return 
       try { 
        document.documentElement.doScroll("left") 
        ready() 
       } catch(e) { 
        setTimeout(tryScroll, 0) 
       } 
      } 
      tryScroll() 
     } 
     document.attachEvent("onreadystatechange", function(){  
      if (document.readyState === "complete") { 
       ready() 
      } 
     }) 
    } 
    if (window.addEventListener) 
     window.addEventListener('load', ready, false) 
    else if (window.attachEvent) 
     window.attachEvent('onload', ready) 
    /* else // use this 'else' statement for very old browsers :) 
     window.onload=ready 
    */ 
} 
readyList = []  
function onReady(handler) { 
    if (!readyList.length) { 
     bindReady(function() { 
      for(var i=0; i<readyList.length; i++) { 
       readyList[i]() 
      } 
     }) 
    } 
    readyList.push(handler) 
} 

Cách sử dụng:

onReady(function() { 
    // ... 
})