7 votes

Comment injecter du css dans un document via ajax ?

Je reçois donc les données via la méthode ajax de Jquery. Les données récupérées ressemblent à :

<html>
<head>
  <style>
  body {
     color: red;
     font-weight: bold;
  }

  #someElement {
     color: blue;
     padding: 1em
  }
  </style>
</head>
  <body>
     <div id="header">Super</div>
     <p>blah blah blah</p>
     <div id="footer">Stuff</div>
  </body>
</html>

Comment extraire le style et l'insérer dans le document actuel, qui exécute l'appel ajax ? J'ai essayé toutes sortes d'incantations de Jquery mais ça ne marche pas. Je suis maintenant en train d'extraire le css via regex mais je ne suis pas sûr de savoir comment mettre le css dans la page actuelle :

$.ajax({
    url: '/template.html',
    success: function(data) {
        $("#header").html( $(data).find('#header').html() );
        $("#footer").html( $(data).find('#footer').html() );

        var re  = /<style>((?:[\n\r]|.)+)<\/style>/m;
        var css = re.exec(data);

        // What to do with the css??

        return;
    }
});

J'avais initialement une feuille de style puis j'ai simplement fait ce qui suit :

    if($.browser.msie) {
        $('head').html(
            '<link rel="stylesheet" href="http://c.this/template.css" type="text/css" />'+
            $('head').html()
        ); 
    }
    else {
        $('head').prepend('<link rel="stylesheet" href="http://c.this/template.css" type="text/css" />');
    }

Cela fonctionne sauf que dans IE8 cela pose quelques problèmes.

2voto

Neil N Points 14566

Ne faudrait-il pas simplement créer une balise de style et l'insérer dans le DOM de la même manière que n'importe quelle autre balise ?

$('<style type="text/css"></style>')
    .appendTo("head")
    .html("your css text here");

*Je n'ai pas essayé

EDIT :

Oh, je vois que vous essayez d'extraire les css d'une page HTML. Y a-t-il un moyen d'obtenir uniquement le CSS sans avoir à charger une autre page ?

2voto

T9b Points 1107

Essayez-vous d'analyser la page d'un tiers, par hasard ?

Si c'est le cas pas Si c'est le cas, alors pourquoi ne pas charger le CSS indépendamment de la page qui appelle votre ajax. Il sera alors disponible pour tous les éléments de la page, même les nouveaux éléments fournis par ajax.

Si vous essayez d'analyser les pages d'un autre site, vous devrez développer un service proxy.

1voto

Mark Coleman Points 24469

Au lieu d'utiliser le regex, vous pourriez utiliser .filter() pour trouver le <style/> à partir de là, il suffit d'utiliser document.getElementsByTagName("head")[0] pour ajouter le HTMLStyleElement

$.ajax({
    type: 'POST',
    url: "/echo/html/",
    data: {
        html: postHtml
    },
    success: function(data) {
        var style = $(data).filter("style").get(0);
        document.getElementsByTagName("head")[0].appendChild(style);
        $("#header").html($(data).filter('#header').html());
        $("#footer").html($(data).filter('#footer').html());
    }
});

Exemple de travail sur jsfiddle

testé sur IE8/9, chrome, firefox

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X