Javascript / CSS загрузить и добавить в документ

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