用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

如何动态加载jQuery以及在dom中使用它？

---

有一个工作JSFiddle在这里有一个小例子，它展示了你正在寻找的东西（除非我误解了你的请求）：http://jsfiddle.net/9N7Z2/188/

动态加载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框架，如：

https://developers.google.com/loader/

http://yepnopejs.com/（已弃用）

http://requirejs.org/

---

还有一种动态加载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被认为是“不好的做法”？ 原因。 pro是document.write确实会阻止你的页面加载其他的集合，所以不需要创建一个回调函数。

---

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>

链接地址: http://www.djcxy.com/p/42463.html

上一篇: Load jQuery with Javascript and use jQuery

下一篇: How do I link to a javascript file within a javascript file?