使用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,其中有一个小例子,它可以准确地说明你在寻找什么(除非我误解了你的请求):http://jsfiddle.net/9N7Z2/188/

这种动态加载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.这里有一个有效的JSFiddle:http://jsfiddle.net/9N7Z2/3/

有很多人已经完成了你需要做的事情.查看一些现有的JavaScript Loader框架,例如:

• https://developers.google.com/loader/
• http://yepnopejs.com/(已弃用)
• http://requirejs.org/

Answer 2

还有另一种动态加载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不加载其他资产产生阻止你的页面,所以没有必要创建一个回调函数.

Answer 3

Encosia的网站建议:

<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 
  //  (e.g. 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.aspnetcdn.com/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>