我在javascript中添加了一些<script/>
标记来加载一些库(例如,jquery)。加载所有库后,我执行主代码。要等到一切准备就绪,我使用类似于this answer中的解决方案(在网络上找到它)。
现在,故事:http://jsfiddle.net/EH84z/
function load_javascript(src) {
var a = document.createElement('script');
a.type = 'text/javascript';
a.src = src;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(a, s);
}
load_javascript('http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js');
function addEvent(elm, evType, fn, useCapture) {
//Credit: Function written by Scott Andrews
//(slightly modified)
var ret = 0;
if (elm.addEventListener) {
ret = elm.addEventListener(evType, fn, useCapture);
} else if (elm.attachEvent) {
ret = elm.attachEvent('on' + evType, fn);
} else {
elm['on' + evType] = fn;
}
return ret;
}
addEvent(window, "load", function() {
console.log(window.jQuery + ' ' + window.$);
$(document);
}, false);
它在Firefox中运行良好,但在Chrome中经常出现故障。每次我按下jsfiddle'run'按钮,在加载JQuery之前执行回调,从而在Chrome控制台中出错。
这是否意味着我可怕地滥用addEventListener
?如果是,那么它的正确用途是什么?如何真正等待所有脚本加载?
谢谢!
PS还没有在任何其他浏览器中测试它,所以请评论它是否在其他地方失败。
修改
如果我在测试前等待一秒钟(使用setTimout
),成功率会增加到100%。示例http://jsfiddle.net/EH84z/1/
答案 0 :(得分:4)
您必须将load
事件附加到jQuery脚本标记,而不是window
对象。
试试这个:
function load_javascript(src) {
var a = document.createElement('script');
a.type = 'text/javascript';
a.src = src;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(a, s);
// attach it to the script tag
addEvent(a, "load", function() {
console.log(window.jQuery + ' ' + window.$);
$(document);
}, false);
}