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.