Question

我正在开发一个bookmarklet，需要在页面上加载特定版本的jQuery。当我必须动态插入jQuery脚本标记以满足bookmarklet的要求时，我想在执行任何需要jQuery的函数之前等待脚本标记上的onload或onreadystatechange事件。

由于某种原因，onload和/或onreadystatechange事件不会触发。关于我在这里做错了什么想法？

var tag = document.createElement("script");
tag.type = "text/javascript";
tag.src = "http://ajax.microsoft.com/ajax/jquery/jquery-" + version + ".min.js";
tag.onload = tag.onreadystatechange = function () {
    __log("info", "test");
    __log("info", this.readyState);
};
document.getElementsByTagName('head')[0].appendChild(tag);

完整代码： http://gist.github.com/405215

Answer 1

对你来说可能为时已晚，但这就是我解决问题的方法。

基本上，它收集“$（document）.ready（function（）{}）”和“$（function（）{}）”调用并在jQuery加载完成后运行它们。

在将脚本标记添加到＆lt; head＆gt;

之后，我们使用setInterval来等待变量jQuery成为函数，而不是使用onLoad。

var $_i, $_r = [];
var $ = function(func){
   if(typeof(func) == 'function'){ $_r.push(func); }
   return{ ready: function(func){ $_r.push(func); } }
}
window.onload = function(){
   var s = document.createElement('script');
   s.setAttribute('type', 'text/javascript');
   s.setAttribute('src', 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js');
   document.getElementsByTagName("head")[0].appendChild(s);
   $_i = setInterval(function(){
      if(typeof(jQuery) == 'function'){
         clearInterval($_i);
         for(var i in $_r){
            $_r[i]();
         }
      }
   }, 100);
}

Answer 2

如果您同时使用这两个事件（tag.onload = tag.onreadystatechange），那么在IE9上它将被调用两次。

Answer 3

您可以随时作弊，并将onload / onreadystatechange逻辑放入setTimeout（），指定持续时间为1毫秒。由于您将脚本元素插入到DOM中，因此您可以确保在超时之前执行它。

示例代码：

var tag = document.createElement("script");
tag.type = "text/javascript";
tag.src = "http://ajax.microsoft.com/ajax/jquery/jquery-" + version + ".min.js";
document.getElementsByTagName('head')[0].appendChild(tag);
setTimeout(function(){
    __log("info", "test");
}, 1);

在动态向页面添加脚本标记时，JavaScript onload / onreadystatechange不会触发

3 个答案: