Question

背景

我正在开发一个bookmarklet，它依赖于第三方库，以便在我的bookmarklet脚本运行之前加载到DOM中。我遇到的问题的核心是这个依赖链，我需要等待才能做出反应，而且我遇到了让它在IE中飞行的问题。

在这个阶段我无法确定JQuery是否在页面上。这是我检查的东西，如果它不存在，那么我必须创建并将其注入DOM。

控制流程是这样的：

将主库（jquery）加载到DOM中，我附加了一个事件监听器，以便在它实际位于DOM中时接收它。

var e = document.createElement('script');
e.type = 'text/javascript';
e.src = http:// ... jquerylibrary.js
e.addEventListener('load', callback);

设置回调函数

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

这很有效，效果很好。我可以链接jquery，一些jquery插件，然后我的代码，然后我可以确定我的代码运行（在真正的浏览器中）它将运行。

问题的症结

当IE＆gt; 9（我们必须支持）具有类似的功能...... attachEvent('onload',callback);

类似的东西，但在更新DOM元素时似乎没有正确触发。纵观MSDN's long list of events，目前尚不清楚这些事件中是否有我正在寻找的事件。

更新DOM时IE 7+会触发什么事件？

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

虽然我已将这个问题的答案发布到我的问题上，但我对此方法感兴趣：）。

我应该使用Internet Explorer在DOM Update上注册什么事件

1 个答案: