我使用以下方法将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中使用它?
这里有一个工作的JSFiddle,上面有一个小例子,它可以确切地说明您正在寻找什么
这种动态加载JavaScript的方法存在一些问题。当涉及到非常基础的框架(如jQuery)时,您实际上可能想静态地加载它们,因为否则,您将必须编写一个完整的JavaScript加载框架…
您可以使用一些现有的JavaScript加载程序,也可以通过观察window.jQuery定义来编写自己的加载程序。
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。
load
window.setTimeout
很多人已经完成了您需要做的事情。查看一些现有的JavaScript Loader框架,例如: