0

背景我要註冊什麼事件在DOM更新與Internet Explorer

我發展這對第三方庫的依賴被加載到DOM之前我的書籤腳本可以運行一個書籤。我遇到的問題的核心是這個依賴鏈,我需要等待才能做出反應,而且我有問題讓它在IE中飛行。

我不能確定這個階段的JQuery甚至在頁面上。這是我檢查的東西,如果它不存在,那麼我必須創建並將其注入到DOM中。

控制的流程是這樣的:

  1. 加載主庫(jQuery的)到DOM,我已經把它貼事件偵聽器拿起時,它實際上是在DOM。

    var e = document.createElement('script'); 
    e.type = 'text/javascript'; 
    e.src = http:// ... jquerylibrary.js 
    e.addEventListener('load', callback); 
    
  2. 設置回調函數

    var callback = function() { 
        //my stuff that wants to use jquery 
    } 
    

這個工作,而且效果很好。我可以鏈接jquery,一些jquery插件,然後是我的代碼,然後我可以確定我的代碼何時運行(在真正的瀏覽器域中)它會運行。

問題的癥結

當IE> 9(這是我們必須支持)也有類似的功能... attachEvent('onload',callback);

件事是類似的,但似乎並沒有正確觸發時DOM元素已更新。縱觀MSDN's long list of events,目前還不清楚這些事件是否屬於我正在尋找的事件。

當DOM更新時,IE 7+會觸發什麼事件?

+0

這是一個書籤,將被部署在一個頁面上,我不能說jquery會。如果它不在那裏,我必須將它添加到頁面並等待它在那裏,然後才能運行我的代碼。 – heymatthew

+0

所有的好:)。我已經修改了這個問題,把預先條件放在前面。 – heymatthew

+0

以前有過類似DOMNodeInserted的問題,例如:http://stackoverflow.com/questions/2143929/domnodeinserted-equivalent-in-ie。 –

回答

1

我在閱讀head.js的一些資料後發現了它。這需要一些創造性的JavaScript魔法。

我們感興趣的事件是onreadystatechange和onload。您可以將自定義函數附加到這些觸發器以在插入頁面時觸發更新通知。

我已經把它抽象成一個函數,如果你傳遞一個元素和一個回調語句,它會將元素轉儲到頁面主體的末尾並運行回調。

function loadElement(e, callback) { 
    if (typeof(callback) === 'function') { 
     e.onreadystatechange = e.onload = function() { 
      var state = e.readyState; 

      if (!callback.done && (!state || /loaded|complete/.test(state))) { 
       callback.done = true; 
       callback(); 
      } 
     } 
    } 
    document.body.appendChild(e); 
} 

雖然我已經發布了這個答案我的問題,我感興趣的是替代方法:)。

相關問題