将脚本标记动态添加到页面时，JavaScript onload/onreadystatechange 未触发

Question

我正在开发一个小书签，需要在页面上加载特定版本的 jQuery。当我必须动态插入一个 jQuery 脚本标签以满足小书签的要求时，我想在执行任何需要 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 完成加载后运行它们。

我们不使用onLoad，而是在中添加script标签后，使用setInterval等待变量jQuery变成一个函数

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