在IE和Chrome中动态加载jQuery

Question

我正在创建一个使用jQuery的外部窗口小部件,而不是让用户单独包含它我想检查它是否已加载并动态加载它(如果不是).

问题是我需要等到它被加载以执行脚本的其余部分,这需要IE和FF/Chrome处理不同的事件处理程序.

如果我这样做,它在IE8中工作正常:

<div id="test">
<p>This is a test.</p>
</div>

<script>
if (typeof jQuery == 'undefined') {
    s = document.createElement("script");
    s.src = "//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";
    if (s.addEventListener) {
        s.addEventListener("load", runScript, false);
    } else if (s.readyState) {
        s.onreadystatechange = runScript;
    }

} else {
    runScript();
}

function runScript() {
    document.getElementsByTagName('head')[0].appendChild(s);
    $('#test').css('font-size', '50px');

}
</script>

但这在Chrome中无效.但是,如果我先添加脚本,它可以在Chrome中使用,但不适用于IE:

<div id="test">
<p>This is a test.</p>
</div>

<script>
if (typeof jQuery == 'undefined') {
    s = document.createElement("script");
    s.src = "//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";
    document.getElementsByTagName('head')[0].appendChild(s);
    if (s.addEventListener) {
        s.addEventListener("load", runScript, false);
    } else if (s.readyState) {
        s.onreadystatechange = runScript;
    }

} else {
    runScript();
}

function runScript() {

    $('#test').css('font-size', '50px');

}
</script>

关于如何使用在IE和Chrome中运行的事件处理程序动态加载jQuery的任何想法？

编辑:将appendChild目标从test更改为head.

Answer 1

在第一个代码中，您将在完成时将脚本附加到您正在调用的函数中！

测试是什么元素？

document.getElementsByTagName('test')[0].appendChild(s);  <-- looking for element
<div id="test">  <-- test is an id

代码应该看起来像

if (typeof jQuery == 'undefined') {
    var s = document.createElement("script");
    s.src = "//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";
    if (s.addEventListener) {
        s.addEventListener("load", runScript, false);
    } else if (s.readyState) {
        s.onreadystatechange = runScript;
    }
    document.getElementsByTagName('head')[0].appendChild(s);
} else {
    runScript();
}

function runScript() {
    $('#test').css('font-size', '50px');
}

运行示例： http: //jsfiddle.net/5986T/