Как применять встроенный и/или внешний CSS, загружаемый динамически с помощью jQuery

У меня есть элемент управления Ajax, который загружается в всплывающее окно Yahoo, используя jQuery.

Я просто использую простой запрос .get для загрузки HTML.

  $.get(contentUrl, null, function(response) {
         $('#dialog').find('.bd').assertOne().html(response);
     }, "waitDlg");

Теперь проблема в том, что загружаемый контент нуждается в собственном CSS, который фактически динамически создается. У меня есть выбор либо вложения, либо с использованием внешней таблицы стилей CSS.

Тестирование в Chrome показывает, что css, загруженный через AJAX, не оценивается/не применяется в момент его добавления в DOM с использованием вышеуказанного кода.

Internet explorer проверит встроенный css, когда он просто застрянет в DOM, но Chrome не будет. В настоящее время я не могу протестировать FireFox из-за совершенно несвязанной проблемы.

Есть ли способ в jQuery для оценки таблицы стилей, которая динамически добавляется в DOM как встроенный или?

Есть много причин, по которым я хотел бы сделать это:

  • css во всплывающем окне относится к всплывающему окну и может быть вообще из другой среды
  • он динамический, и я не хочу помещать его в родительскую страницу, если я абсолютно не должен
  • Я планировал, чтобы он работал так, и это не так!: - (

Ответы

Ответ 1

Учитывая путь к вашей таблице стилей (или URL-адрес, который будет генерировать действительный CSS):

var myStylesLocation = "myStyles.css";

... либо один из них должен работать:

Загрузка с использованием AJAX

$.get(myStylesLocation, function(css)
{
   $('<style type="text/css"></style>')
      .html(css)
      .appendTo("head");
});

Загрузка с использованием динамически созданного <link> 

$('<link rel="stylesheet" type="text/css" href="'+myStylesLocation+'" >')
   .appendTo("head");

Загрузка с использованием динамически созданного <style> 

$('<style type="text/css"></style>')
    .html('@import url("' + myStylesLocation + '")')
    .appendTo("head");

или

$('<style type="text/css">@import url("' + myStylesLocation + '")</style>')
    .appendTo("head");

Ответ 2

Принятый ответ не будет работать в IE 7 (и глючит в IE 8). в IE будет работать следующее: FF и chrome/safari:

var url = 'urlOfStyleSheet.css'
if(document.createStyleSheet) {
    try { document.createStyleSheet(url); } catch (e) { }
}
else {
    var css;
    css         = document.createElement('link');
    css.rel     = 'stylesheet';
    css.type    = 'text/css';
    css.media   = "all";
    css.href    = url;
    document.getElementsByTagName("head")[0].appendChild(css);
}

Ответ 3

var cssPath = "/path/to/css/";

var linkStr = document.createElement("&lt;link rel='stylesheet' type='text/css' href='"+cssPath+"' media='screen' /&gt;");

document.getElementsByTagName("head")[0].appendChild(linkStr);