Question

我已经编写了一个jQuery插件，但我希望它检查是否已加载jQuery，如果没有加载它，以及其他一些javascript文件，还检查是否已加载CSS文件，如果没有加载它。

我想知道如何去做吗？

非常感谢你的时间。

Answer 1

检测CSS是否已加载

将此添加到您的CSS：

._css_loaded_test {
  display: none;
}

定义此JavaScript函数：

function cssIsLoaded() {
  var test = document.createElement("div");
  test.className = "_css_loaded_test";
  return getComputedStyle(test, null).display === "none";
}

检测是否加载了jQuery

使用此JavaScript检测是否加载了jQuery：

if (typeof jQuery !== "undefined") {
  // put your code here
}

Answer 2

你的插件，除非它的大小和复杂性与jQuery相当，否则应该不会加载jQuery。我想只是检查jQuery是否存在，如果不存在则发出警告就足以让任何开发人员了解正在发生的事情。

我想你可能正在开发一个插件，人们通常会在没有'知道'的情况下包含它们是否有jQuery。

Answer 3

以下内容应该有效。但是，它可能没有完全优化。

if (typeof jQuery == "undefined") {
    var js = document.createElement("script");
    js.setAttribute("src",...path to jquery...);
    js.setAttribute("type","text/javascript");
    document.head.appendChild(js);
    //ditto for other files you mentioned 
}

function isCSSLoaded(uri) {
    var links = document.getElementsByTagName("link");
    for (var i =0, len = links.length; i<len;++i) {
        if (links[i].getAttribute("src") === uri) return true;
    }
    return false;
}

if (isCSSLoaded(...pathToYourCSSFile...) {
    var css = document.createElement("link");
    css.setAttribute("href",...path to css file...);
    css.setAttribute("media","screen");
    css.setAttribute("rel","stylesheet");
    css.setAttribute("type","text/css");
    document.head.appendChild(css);
    //ditto for other files you mentioned 
}

编辑：注意以上内容仅适用于通过链接加载的CSS，而不适用于使用@import

的CSS

Javascript / CSS加载并附加到文档

3 个答案:

检测CSS是否已加载

检测是否加载了jQuery