Загружать внешний файл css, например скрипты в jquery, который совместим, т. Е. Также


2 Answers

$("head").append("<link>");
var css = $("head").children(":last");
css.attr({
      rel:  "stylesheet",
      type: "text/css",
      href: "address_of_your_css"
});
Question

Есть ли способ загрузить внешние файлы CSS, например, загрузить JS-файл с помощью метода .getScript, а также использовать функцию обратного вызова, например, в .getScript

$("<link/>", {
   rel: "stylesheet",
   type: "text/css",
   href: "/styles/yourcss.css"
}).appendTo("head");

Это работает в FireFox и аналогично, но не в IE.




Я думаю, что OP хотел сделать, это загрузить таблицу стилей асинхронно и добавить ее. Это работает для меня в Chrome 22, FF 16 и IE 8 для наборов правил CSS, хранящихся в виде текста:

$.ajax({
    url: href,
    dataType: 'text',
    success: function(data) {
        $('<style type="text/css">\n' + data + '</style>').appendTo("head");                    
    }                  
});

В моем случае я также иногда хочу, чтобы загруженный CSS заменил ранее загруженный CSS-код. Чтобы сделать это, я добавил комментарий в начале, скажем: «/ * Flag this ID = 102 * /», а затем я могу это сделать:

// Remove old style
$("head").children().each(function(index, ele) {
    if (ele.innerHTML && ele.innerHTML.substring(0, 30).match(/\/\* Flag this ID=102 \*\//)) {
        $(ele).remove();
        return false;    // Stop iterating since we removed something
    }
});



Основываясь на вашем комментарии в ответ @ Raul, я могу представить два способа включить обратный вызов:

  1. Попросите getScript вызвать файл, загружающий css.
  2. Загрузите содержимое файла css с помощью AJAX и добавьте в <style> . Ваш обратный вызов будет обратным вызовом из $.get или всего, что вы используете для загрузки содержимого файла css.



Related



Tags

jquery jquery