将jQuery插入JS文件

Question

我有一个js文件，我想在其中包含jquery。为了包含jquery脚本，我正在使用以下代码：

    var script = document.createElement('script');
    script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js';
    script.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(script);

这个可以，我看到已经正确包含了脚本。我的检查器显示它加载了脚本，但是jQuery无法工作。

有什么想法吗？

- Johnathon Pfleger

---

你为什么要动态添加脚本标签？ - collapsar

你如何判断 jQuery 是否正常工作？ - minion

这听起来像是竞态条件。上面的代码异步加载jQuery，因此在它下载和加载之前，您将无法访问jQuery。 - jungy

.js文件使用类似的代码$(document).click(function(){ alert('works'); });我在js文件（在页脚中加载）和html文件（在正文中）中都有相同的代码。我得到的控制台错误是“$未定义”。 - Johnathon Pfleger

你尝试使用 jQuery 代替 $ 了吗？ - Nishanth Matha

是的，两者都未定义。 - Johnathon Pfleger

Answer 1

在尝试使用动态加载的脚本之前，您需要确保该脚本已经被成功加载。

为此，请使用script.onload来触发回调函数，以便在加载完成后执行相应操作。

var script = document.createElement('script');
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head') [0].appendChild(script);
script.onload = function () {
  /* jquery dependent code here */
  console.log($);
};

MDN提供了一个更适用于您指定回调的示例 -

// from https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement#Dynamically_importing_scripts
function loadError (oError) {
  throw new URIError("The script " + oError.target.src + " is not accessible.");
}

function importScript (sSrc, fOnload) {
  var oScript = document.createElement("script");
  oScript.type = "text\/javascript";
  oScript.onerror = loadError;
  if (fOnload) { oScript.onload = fOnload; }
  document.currentScript.parentNode.insertBefore(oScript, document.currentScript);
  oScript.src = sSrc;
}  

- jdphenix

---

太棒了！谢谢 jdp！ - Johnathon Pfleger

Answer 2

你的jQuery代码无法正常工作，可能是因为在浏览器执行你的jQuery代码时，jQuery尚未加载。使用下面的函数动态加载jQuery并带有回调函数。将你的jQuery代码放在回调函数中。

function loadScript(url, callback) {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = url;

    if (typeof(callback) === 'function') {
        s.onload = s.onreadystatechange = function(event) {
            event = event || window.event;
            if (event.type === "load" || (/loaded|complete/.test(s.readyState))) {
                s.onload = s.onreadystatechange = null;
                callback();
            }
        };
    }

    document.body.appendChild(s);
}

/* Load up jQuery */
loadScript('https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', function() {
    // Put your jQuery code here.
});

- icaru12

Answer 3

您需要在HTML代码中引入jQuery。因为您的脚本在jQuery加载之前加载，所以jQuery无法正常工作。

- Angel Bouzo

---

完全错误 - 脚本可以在页面中动态加载。 - jdphenix