Adjuntar una hoja de estilo a un iframe con jQuery

Estoy creando un editor HTML, similar a este en el que estoy escribiendo ahora con el resultado a continuación. Estoy usando un iframe y estoy volcando $ htmlTextBox.val() en el cuerpo del iframe.Adjuntar una hoja de estilo a un iframe con jQuery

Estoy tratando de crear una hoja de estilo dentro del iframe para que se vea tan bien como funciona.

¡Gracias de antemano!

$htmlTextBox.keyup(function(){ 
    SetPreview(); 
}); 

function SetPreview() 
{ 
    var doc = $preview[0].contentWindow.document; 
    var $body = $("body", doc); 

    $body.html($htmlTextBox.val()); 
}

Fuente

2009-03-09 hunter

Mientras puede interactuar con document.styleSheets de un iframe, la manera fiable de la vieja escuela es o bien tener la hoja de estilo que hay en el primer lugar (escribiendo un iframe-src para que apunte a un documento vacío con la hoja de estilo deseada), o ponerlo en su lugar con document.write(). Por ejemplo:

<body> 
    <iframe></iframe> 
    <script type="text/javascript"> 

     var d= frames[0].document; 
     d.open(); 
     d.write(
      '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN" "http://www.w3.org/TR/html4/loose.dtd">'+ 
      '<html><head><style type="text/css">'+ 
      'body { font-size: 200%; }'+ 
      '<\/style><\/head><body><\/body><\/html>' 
     ); 
     d.close(); 

     d.body.innerHTML= '<em>Hello</em>'; 
    </script> 
</body>

(Esto también fijará el documento marco flotante a modo de estándares, asumiendo que es lo que quieres.)

Fuente

2009-03-09 04:42:52 bobince

Fui por la ruta con la página básica con la hoja de estilo incluida en el . $ (document) .ready (function() {SetPreview();}); no establece el cuerpo del iframe en Chrome, Safari o Firefox, pero funciona en IE ... – hunter

solo un poco de fondo, estoy configurando la Vista previa en la carga de página y luego en cada tecla en el TextArea – hunter

jQuery's document.ready solo requiere que se cargue el documento principal, no tiene que esperar para cargar el contenido del iframe. Por lo tanto, puede ser una condición de carrera para ver si el documento de iframe está cargado antes de 'listo', y por lo tanto si document.body está disponible todavía. – bobince

tirado abajo el código de la fuente jHtmlArea. Lo gracioso es que la función estaba allí y no me di cuenta. Me encontré con esta pregunta SO cuando estaba tratando de encontrar la manera de implementarla. :)

Esto no es realmente "jQuery", pero funciona. Supongo que algo con append no funciona con iframe, así que lo hicieron en la vieja escuela. La respuesta de Bobince también se ve bien, ¿y podría ser más confiable? Hasta ahora, esto parece funcionar bien.

var e = edit.createElement('link'); 
e.rel = 'stylesheet'; 
e.type = 'text/css'; 
e.href = options.css; 
this.iframe[0].contentWindow.document.getElementsByTagName('head')[0].appendChild(e);

EDITAR: Creo que la razón por la que esto funciona es si es sameDomain (incluyendo la creación de marco flotante en js) De lo contrario, los bloques habituales de seguridad del navegador le impide manipular dom iframe.

Ver How to apply CSS to iFrame

Fuente

2010-01-07 16:33:34 Jason

¿dónde estabas el año pasado? – hunter

Seguimiento:

HTML

<iframe id="message" name="message" />

jQuery

setTimeout(function() { 
    var $head = $("#message").contents().find("head");     
    $head.append($("<link/>", 
     { rel: "stylesheet", href: url, type: "text/css" } 
    ));     
}, 1);

Fuente

2011-03-08 16:29:30 hunter

A medida que se carga el contenido antes de que se aplique el css, se muestra un parpadeo de una página sin estilo. ¿Alguna idea de cómo evitar que se muestre la página hasta que se haya aplicado el estilo? –

podemos insertar etiquetas de estilo dentro de marco flotante.

<style type="text/css" id="cssID"> 
.className 
{ 
    background-color: red; 
} 
</style> 

<iframe id="iFrameID"></iframe> 

<script type="text/javascript"> 
    $(function() { 
     $("#iFrameID").contents().find("head")[0].appendChild(cssID); 
     //Or $("#iFrameID").contents().find("head")[0].appendChild($('#cssID')[0]); 
    }); 
</script>

Fuente

2014-09-02 15:15:07

Genius.Gracias Palani. –

Suponiendo que usted está en el mismo dominio y no se trata de la seguridad entre dominios, tendrá que comprobar si el marco flotante se carga - no sólo el IFRAME, pero el documento DENTRO !! (Esto me colgó durante un tiempo mientras trataba de usar .load())

Luego, usando jquery, acceda a los contenidos, acceda al encabezado y agregue su hoja de estilo al encabezado.

$(document.getElementById('yourIframeID').contentWindow.document).ready(function() { 
     $('yourIframeID').contents().find('head').append('<link rel="stylesheet" href="/path/to/stylesheet/style.css" type="text/css" />'); 
});

Fuente

2014-09-13 01:05:16

Adjuntar una hoja de estilo a un iframe con jQuery

Respuesta

Cuestiones relacionadas