动态加载jQuery并使用它

Question

如何正确加载尚未加载的jQuery库？

somepage.html：

<script src="http://example.com/js/widget_init.js" type="text/javascript"></script>

<script type="text/javascript">
  if (typeof jQuery == 'undefined') {  
    console.log('ERROR: NOT LOADED');
  }
  else{
    console.log('OK');
  }

</script>

脚本'widget_init.js‘应加载jQuery (如果尚未加载)。

我有这个脚本'widget_init.js'：

function load_script_jquery(){
  if (typeof jQuery == 'undefined') {  
    var jq = document.createElement('script'); jq.type = 'text/javascript';
    jq.src = '/path/to/js/jquery.min.js';
    document.getElementsByTagName('head')[0].appendChild(jq);
  } 
  else {

  }

}

load_script_jquery();

// some other code

问题是，它不等待jQuery加载，并显示如下错误：

<script type="text/javascript">
  if (typeof jQuery == 'undefined') {  
    console.log('ERROR: NOT LOADED');  // NOT LOADED
  }
  else{
    console.log('OK'); // NEVER GOES HERE
  }

</script>

我也试过了，但没有任何效果：

document.write('<script src="/path/to/js/jquery.min.js" type="text/javascript"><\/script>');

如何等待jQuery加载完成后才能使用？

Answer 1

附加jQuery脚本的代码将被附加到之后，是检查它的<script>代码片段。这就是.appendChild的工作原理

Node.appendChild()方法将节点添加到指定父节点的子节点列表的end中

来源：https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild (emphasis mine)

这里有两个选项来解决这个问题：

如果可以在页面上插入超文本标记语言，则为

您可以从HTML5 Boilerplate中使用此代码片段。它将检查另一个脚本是否已经加载了jQuery，如果没有，将以内联方式加载它。

<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>

只需将它放在依赖它的脚本之前的head或body标签中即可。

如果需要在Javascript源中动态加载它，则为

按照this tutorial中的说明进行操作

(function () {

    function loadScript(url, callback) {

        var script = document.createElement("script")
        script.type = "text/javascript";

        if (script.readyState) { //IE
            script.onreadystatechange = function () {
                if (script.readyState == "loaded" || script.readyState == "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else { //Others
            script.onload = function () {
                callback();
            };
        }

        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
    }

    loadScript("https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function () {

         //jQuery loaded
         console.log('jquery loaded');

    });


})();

Answer 2

安全加载jquery后，只需要回调函数即可：

var loadJS = function(url, cb) {
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type", "text/javascript");
        script_tag.setAttribute("src",
            url);
        if (script_tag.readyState) {
            script_tag.onreadystatechange = function() { // For old versions of IE
                if (this.readyState == 'complete' || this.readyState == 'loaded') {
                    cb();//calling callback
                }
            };
        } else { // Other browsers
            script_tag.onload = cb;//calling callback function
        }
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    };

只需使用jquery库路径和回调函数引用调用此函数：

loadJS(hostUrl + "/js/libraries/jquery.js", callback);