小编典典

使用Javascript加载jQuery并使用jQuery

javascript

我使用以下方法将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中使用它?


阅读 403

收藏
2020-05-01

共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框架,例如:

2020-05-01