Comment appliquer des feuilles de style en ligne et/ou externes chargées dynamiquement avec jQuery ?

Question

J'ai un contrôle Ajax qui est chargé dans une popup Yahoo en utilisant jQuery.

J'utilise une simple requête .get pour charger le HTML.

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

Le problème est que le contenu qui est chargé nécessite son propre CSS qui est en fait créé de manière dynamique. J'ai le choix entre intégrer le CSS ou utiliser une feuille de style CSS externe.

Les tests effectués dans Chrome montrent que le CSS chargé via AJAX n'est pas évalué/appliqué au moment où il est ajouté au DOM à l'aide du code ci-dessus.

Internet Explorer sera évaluer un CSS inlined lorsqu'il reste bloqué dans le DOM, mais Chrome ne le fera pas. Je suis actuellement incapable de tester dans FireFox en raison d'un problème totalement indépendant.

Existe-t-il un moyen dans jQuery d'évaluer une feuille de style qui a été ajoutée dynamiquement au DOM en tant que feuille de style en ligne ou ?

Il y a plusieurs raisons pour lesquelles j'aimerais faire ça :

• le CSS dans la fenêtre popup appartient à la fenêtre popup et peut provenir d'un environnement complètement différent.
• il est dynamique et je ne veux pas le mettre dans la page parent sauf si je dois absolument le faire.
• J'avais prévu que ça marche comme ça et ça ne marche pas ! :-(

Answer 1

Étant donné un chemin vers votre feuille de style (ou un peu de URL qui générera des CSS valides) :

var myStylesLocation = "myStyles.css";

...l'un ou l'autre devrait fonctionner :

Chargement par AJAX

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

Chargement à l'aide de <link> créés dynamiquement

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

Chargement à l'aide de <style> créés dynamiquement

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

ou

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

Answer 2

La réponse acceptée ne fonctionnera pas dans IE 7 (et boguée dans IE 8). La réponse suivante fonctionnera dans IE ainsi que FF et 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);
}

Answer 3

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

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

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