在 IE 和 Chrome 中动态加载 jQuery答案

【问题标题】：Dynamically load jQuery in IE and Chrome在 IE 和 Chrome 中动态加载 jQuery
【发布时间】：2012-12-12 05:27:53
【问题描述】：

我正在创建一个使用 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。

【问题讨论】：

与stackoverflow.com/questions/1828237/…重复
require.js 可以帮到你
你说“当 jQuery 加载时，将 jQuery 附加到一些随机元素”，这是行不通的，因为你不能在加载时附加脚本，你必须先附加脚本, then 在加载时执行某些操作，您可能应该将其附加到 head，而不是 test，并且您甚至没有带有 test 标记的元素，这是一个具有test ID 的 div ？
@Nile 我不会说它是 stackoverflow.com/questions/1828237/… 的副本——它询问如何检查是否已加载 jQuery。你可以看到我已经在我的示例中使用了该语法，我询问的是跨浏览器的事件处理程序兼容性。
@adeneo 同意，但事件处理程序之前的 appendChild 似乎仅在 Chrome/FF 中有效，在 IE8 中无效。奇怪的是，只有在事件处理程序之后添加它才能在 IE8 中工作。

标签： javascript jquery html internet-explorer google-chrome

【解决方案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/

【讨论】：

agreed #1 很古怪，但在 IE8 中尝试它并且它可以工作，第二个例子，它更具有编码意义，在 Chrome 中工作，但在 IE 中它工作时也会发出警告“预期对象" -- 我假设它在加载 jQuery 之前执行？将我的目标从 test 更新到 head 以更清晰。
我还想指出 Microsoft 提供了这个文档：msdn.microsoft.com/en-us/library/ie/hh180173(v=vs.85).aspx 但这对我在 IE7/8 中不起作用——可能是我的设置问题。
我添加了一个运行示例，它在 IE7-IE9 中对我来说似乎很好。
我在另一个配置上进行了测试，它可以工作。感谢您的帮助。