跨瀏覽器Dom準備好了

我繼承了這段代碼，它看起來不是最理想的，並且可能不正確，因爲它在窗口和文檔對象上都添加了事件偵聽器。但是，除黑莓5.0之外，它正常運行。有人可以解釋一切是否設置正確，或者是否有任何建議使其更好和/或更簡化？跨瀏覽器Dom準備好了

 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);

來源

2011-08-01 VinnyD

把所有的JS放在文檔的末尾。這幾乎是一樣的。 – Saxoier

如果您有異步加載腳本，則不需要。 – VinnyD

如果您使用異步。腳本比你不應該使用DOMContentLoaded或我建議的方式，因爲執行這個異步。腳本可能在事件觸發或HTML解析器到達html文件的底部之後發生。因此只能使用'window.onload'和'xhr.onreadystatechange' - 兩者都是跨瀏覽器兼容的。 – Saxoier

如果你想知道它是如何做或者看到這樣做的一種方式。我建議看一下Diego Perini的工作。他的工作和方法被用在許多DOM庫中，包括jQuery。不幸的是，這傢伙似乎並沒有獲得太多的信用。他是開創try/catch輪詢方法的人之一，當IE被投入混合時，這使得跨瀏覽器的dom加載事件成爲可能。

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

來源

2011-08-01 17:58:43 chjj

+11

+1，因爲這是jQuery使用的工作，他值得讚揚。 –

非常好，值得+1。 –

這個效果很好，與之前我嘗試過的其他小片段相反。似乎是成熟的代碼+1。 – Rolf

個人而言，我會使用jQuery這一點。

jQuery旨在處理各種不同瀏覽器對文檔就緒狀態的影響。

使用jQuery你上面的代碼看起來像：

$(callback);

來源

2011-08-01 17:48:35

如果你想使用純JavaScript，你可以使用thу以下跨瀏覽器的功能（來源（俄羅斯）：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) 
}

用法：

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

來源

2011-08-01 18:01:46 VIK

非常確定這不適用於黑莓5.但是，無論如何，謝謝！ – VinnyD

跨瀏覽器Dom準備好了

回答

相關問題