Cómo inyectar CSS en un documento mediante ajax?

Entonces obtengo datos a través del método ajax de jquery. Los datos recuperados se parece a:Cómo inyectar CSS en un documento mediante ajax?

<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>

¿Cómo se extrae el estilo e insertarlo en el documento actual, que está ejecutando la llamada AJAX? He intentado todo tipo de conjuros jquery pero no funciona. Ahora estoy extrayendo el CSS a través de expresiones regulares, pero estoy seguro de cómo poner la CSS en la página actual:

$.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; 
    } 
});

que inicialmente tenía una hoja de estilo a continuación, simplemente hizo lo siguiente:

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" />'); 
    }

que funciona excepto en IE8 causa algunos problemas.

Fuente

2011-06-29 PaulS

Parece que el selector jQuery está buscando un elemento con una identificación de 'cabeza'. Es posible que desee probar con '$ (" cabeza "). Html ($ (datos) .find (" cabeza "). Html());' –

@josh esa parte está funcionando bien. Acabo de actualizar el ejemplo, por lo que dice #header en lugar de #head para mostrar que no estoy interesado en el elemento principal. Gracias. – PaulS

En lugar de utilizar la expresión regular se puede utilizar .filter() para encontrar la etiqueta <style/>, a partir de ahí simplemente utilizar document.getElementsByTagName("head")[0] añadir el 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()); 
    } 
});

Working example on jsfiddle

probado en IE8/9, cromo , firefox

Fuente

2011-06-29 16:20:11

Eso funciona bien. Me gustaría que el otro ejemplo también funcione. Tener el CSS en su propio documento y luego traerlo usando una etiqueta de enlace. Sin embargo, cuando tengo javascript, agrego la etiqueta de enlace a la cabeza, IE8 hace lo correcto al renderizar el enlace inyectado, pero sigue mostrando que hay una descarga más. Si hago clic en cualquier parte del navegador, la descarga desaparece. Es molesto. – PaulS

¿No crearías una etiqueta de estilo e insertarla en el DOM de la misma manera que insertarías otra etiqueta?

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

* No he probado esto

EDIT:

Oh, ya veo que está intentando extraer css desde una página HTML. ¿Hay alguna forma de obtener solo CSS sin tener que cargar otra página?

Fuente

2011-06-29 15:16:32

Sí. Sin embargo, como mencioné @ T9b, me gustaría que javascript haga eso por mí. ¿Es posible? – PaulS

'insertAfter' realmente debería ser' appendTo' en el ejemplo anterior. – SammyK

¿Está intentando analizar la página de un tercero, por casualidad?

Si eso es no el caso, entonces ¿por qué no solo carga el CSS independientemente de la página que llama a su ajax. Luego está disponible para todos los elementos en la página, incluso los nuevos entregados por ajax.

Si está intentando analizar otras páginas de sitios, deberá desarrollar un servicio de proxy.

Fuente

2011-06-29 15:20:07 T9b

Podría tener que cargar el css independientemente de la recuperación de ajax. Ese es en realidad mi plan de respaldo si no puedo obtener Javascript para hacerlo. – PaulS

Cómo inyectar CSS en un documento mediante ajax?

Respuesta

Cuestiones relacionadas