javascript - 动态加载 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作品

The Node.appendChild() method adds a node to the end of the list of children of a specified parent node

来源: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild (强调我的)

这里有两个选项可以解决这个问题:

是否可以在页面上插入 HTML

您可以使用 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');

    });


})();