Question

我正在尝试编写一个附加jquery cdn脚本的脚本到文件的正文。

function addJquery() {
    url = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    document.body.appendChild(script);
}
addJquery();

我在这里做错了什么

Answer 1

您无法向正文添加脚本并让它们执行。必须通过head元素加载延迟加载的脚本：

(function addJQuery() {
  var url = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
  var script = document.createElement('script');
  script.onload = function() { addJQuery(); }
  document.head.appendChild(script);
}());

但是，这会加载jQuery，无论它是否已经加载，所以这并不好。以下是您通常想要的内容：

(function loadMyCode() {
  // do we have jquery? if not, load it.
  if (typeof jQuery === "undefined") {
    var url = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
    var script = document.createElement('script');
    script.onload = function() {
       // this will run after jquery gets loaded
       loadMyCode();
    }
    document.head.appendChild(script);
    return;
  }

  // if we get here, we know we have jquery
  //
  // rest of the code goes here.
}());

Answer 2

这是另一种方式

(function () { 
var li = document.createElement('script'); 
li.type = 'text/javascript'; 
li.src= "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
li.async=true;
var s = document.getElementsByTagName('script')[0]; 
s.parentNode.insertBefore(li, s); 
})();

如何创建脚本元素以包含jquery

2 个答案: