通过 javascript 将 jQuery 添加到 DOM - 不起作用答案

【问题标题】：Adding jQuery to the DOM via javascript -- doesn't worky通过 javascript 将 jQuery 添加到 DOM - 不起作用
【发布时间】：2013-01-23 21:46:32
【问题描述】：

我正在尝试通过脚本将 jQuery 添加到我的文档中，但从未找到 jQuery 库，尽管根据 firebug，脚本元素及其属性已附加到 DOM。即使等待了很长时间，图书馆也无法使用。我做错了什么。

    if(typeof jQuery === 'undefined'){
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js";
        document.getElementsByTagName("head")[0].appendChild(script);
    }

【问题讨论】：

你能给一个jsfiddle吗？..这样我们就可以看到实际发生了什么
它工作得很好：jsfiddle.net/rBLM4
我已经等了很长时间，它没有加载。我有两个警报（jQuery 类型）；试试看：oiyc.org/testRecip.html 它可以加载 Firefox 但不能加载 Chrome
什么是“等待了很长时间，但它没有加载”？你有没有看我的小提琴？您需要使用script.onload 方法来了解脚本何时实际加载，如果您必须动态加载它 - 这就是异步工作的方式。你不能依赖alert。我猜在 Chrome 中，它阻止了 jQuery 文件的处理，而 Firefox 以不同的方式处理它。如果您在 Chrome 中访问您的网站，并等到 2 个 alert 语句之后，转到开发人员工具并输入 jQuery，它会打印一个函数，这意味着它已被加载。
伊恩，是的，你是对的。我添加了 script.onload 及其在除 IE8 之外的所有浏览器中的工作。使用该浏览器我得到这个：无法获取未定义或空引用的属性“appendChild”关于该错误的任何想法？

标签： javascript jquery appendchild createelement

【解决方案1】：

从我的一些代码中复制的以下代码我认为（因为这只是为了安全）应该可以工作：

if (typeof(jQuery.ui) == 'undefined')
{
    var script     = document.createElement('script');
    script.src = url;

    var head = document.getElementsByTagName('head')[0],

    // Attach handlers for all browsers
    script.onload = script.onreadystatechange = function() {

         if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
        // callback function provided as param
        if(success != null)
        {
            success();
        }
        script.onload = script.onreadystatechange = null;
        };              
    };              
    head.appendChild(script);   
}

顺便说一句，成功是我为真正的初始化定义的回调函数。就像 gdoron 说的你需要等待它加载。

【讨论】：

【解决方案2】：

试试这个。它简单且工作正常..

if(typeof jQuery === 'undefined'){
var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js";
    document.head.appendChild(script);

}

【讨论】：

@lan：我在我的系统中尝试了这段代码。我在document.getElementsByTagName("head")[0].appendChild(script); 声明中遇到错误。所以我尝试了document.head.appendChild(script);，它工作正常
IE8 对此表示不满：document.head.appendChild

【解决方案3】：

如果使用script.src，请尝试使用setAttribute 函数。

if (typeof jQuery === 'undefined') {
    var script = document.createElement("script");
    script.setAttribute("type","text/javascript");
    script.setAttribute("src","http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js");
    document.getElementsByTagName("head")[0].appendChild(script);
}

【讨论】：

为什么？有什么区别？
@gdoron 没有，应该是评论
@Ian，是的，我知道...人们不应该用 try X 发布答案，除非他们能解释为什么 X 应该或至少可以工作。 -1 的答案。
src 既是long-documented 又是普遍支持的反射属性，完全没有必要使用setAttribute。