使用Javascript加载jQuery并使用jQuery

Question

我使用以下方法将jQuery库附加到dom：

 var script = document.createElement('script');
 script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
 script.type = 'text/javascript';
 document.getElementsByTagName('head')[0].appendChild(script);

但是当我运行时：

jQuery(document).ready(function(){...

控制台报告错误：

Uncaught ReferenceError: jQuery is not defined

如何动态加载jQuery以及将其放入dom中使用它？

Answer 1

这里有一个工作的JSFiddle，上面有一个小例子，它可以确切地说明您正在寻找什么

这种动态加载JavaScript的方法存在一些问题。当涉及到非常基础的框架（如jQuery）时，您实际上可能想静态地加载它们，因为否则，您将必须编写一个完整的JavaScript加载框架…

您可以使用一些现有的JavaScript加载程序，也可以通过观察window.jQuery定义来编写自己的加载程序。

// Immediately-invoked function expression
(function() {
    // Load the script
    var script = document.createElement("SCRIPT");
    script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
    script.type = 'text/javascript';
    script.onload = function() {
        var $ = window.jQuery;
        // Use $ here...
    };
    document.getElementsByTagName("head")[0].appendChild(script);
})();

请记住，如果您需要支持真正的旧浏览器（如IE8），load则不会执行事件处理程序。在这种情况下，你需要轮询是否存在等window.jQuery采用重复window.setTimeout。

很多人已经完成了您需要做的事情。查看一些现有的JavaScript Loader框架，例如：

• http://requirejs.org/