用Javascript加载jQuery并使用jQuery
我正在附加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
如何dynamic加载jQuery以及在dom中使用它？
有一个工作JSFiddle在这里有一个小例子，这正好演示你在找什么（除非我误解了你的请求） ： http : //jsfiddle.net/9N7Z2/188/
dynamic加载JavaScript的方法有几个问题。 当涉及到非常基础的框架，如jQuery，你实际上可能希望静态加载它们，否则，你将不得不编写一个完整的JavaScript加载框架…
您可以使用一些现有的JavaScript加载器，或者通过观察window.jQuery来自定义。
// Anonymous "self-invoking" function (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.setTimeout来window.jQuery的存在。 这里有一个工作的JSFiddle： http : //jsfiddle.net/9N7Z2/3/
有很多人已经做了你需要做的事情。 查看一些现有的JavaScript Loader框架，如：
还有一种dynamic加载jQuery的方法（ 源代码 ）。 你也可以使用
document.write('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><\/script>');
使用document.write被认为是不好的做法，但是为了完成它很好。
看看为什么document.write被认为是“不好的做法”？ 原因。 亲是document.write确实阻止你的页面加载其他的集合，所以没有必要创build一个callback函数。
Encosia的网站build议：
<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // You may specify partial version numbers, such as "1" or "1.3", // with the same result. Doing so will automatically load the // latest version matching that partial revision pattern // (eg 1.3 would load 1.3.2 today and 1 would load 1.7.2). google.load("jquery", "1.7.2"); google.setOnLoadCallback(function() { // Place init code here instead of $(document).ready() }); </script>
但是，即使他承认，在最佳性能方面，它与以下方面并不相提并论：
<script src="ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script> <script type="text/javascript"> window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js">\x3C/script>')</script> <script type="text/javascript" src="scripts.js"></scripts> </body> </html>
你需要在jQuery完成加载后运行你的代码
var script = document.createElement('script'); document.head.appendChild(script); script.type = 'text/javascript'; script.src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"; script.onload = function(){ // your jQuery code here }
如果你想先检查jQuery是否已经存在于页面中，试试这个
你得到这个错误的原因是JavaScript没有等待脚本被加载，所以当你运行
jQuery(document).ready(function(){...
不能保证脚本已经准备好（而且永远不会）。
这不是最优雅的解决scheme，但可行。 从本质上讲，你可以每隔1秒检查一次jQuery对象的广告运行函数，当它加载你的代码。 我会添加一个超时（在运行20次后说clearTimeout）以及停止检查无限期地发生。
var jQueryIsReady = function(){ //Your JQuery code here } var checkJquery = function(){ if(typeof jQuery === "undefined"){ return false; }else{ clearTimeout(interval); jQueryIsReady(); } } var interval = setInterval(checkJquery,1000);
使用require.js，你可以以更安全的方式做同样的事情。 你可以定义你对jQuery的依赖关系，然后在不污染名字空间的情况下使用依赖关系执行你想要的代码：
我通常推荐这个库来pipe理Javascript的所有依赖。 这很简单，并允许有效地优化资源加载。 但是，在使用JQuery时可能需要采取一些预防措施 。 我最喜欢的方式来解决这个问题是在这个github回购解释，并由以下代码示例反映：
<title>jQuery+RequireJS Sample Page</title> <script src="scripts/require.js"></script> <script> require({ baseUrl: 'scripts', paths: { jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min' }, priority: ['jquery'] }, ['main']); </script>
HTML：
<html> <head> </head> <body> <div id='status'>jQuery is not loaded yet.</div> <input type='button' value='Click here to load it.' onclick='load()' /> </body> </html>
脚本：
<script> load = function() { load.getScript("jquery-1.7.2.js"); load.tryReady(0); // We will write this function later. It's responsible for waiting until jQuery loads before using it. } // dynamically load any javascript file. load.getScript = function(filename) { var script = document.createElement('script') script.setAttribute("type","text/javascript") script.setAttribute("src", filename) if (typeof script!="undefined") document.getElementsByTagName("head")[0].appendChild(script) } </script>
