Adjuntar una hoja de estilo a un iframe con jQuery

StackOverflow https://stackoverflow.com/questions/624979

Pregunta

Estoy creando un editor de HTML, similar a este que estoy escribiendo en este momento con la salida a continuación. Estoy usando un iframe y volcado el $ htmlTextBox.val () en el cuerpo del iframe.

Estoy intentando 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());
}
¿Fue útil?

Solución

Mientras usted puede interactuar con las hojas de estilo de documentos de un iframe, la manera confiable de la vieja escuela es tener la hoja de estilo allí en primer lugar (escribiendo un iframe-src para señalar un espacio vacío). documento con la hoja de estilo deseada), o colóquelo 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 configurará el documento iframe en el modo Estándar, asumiendo que eso es lo que quieres)

Otros consejos

Followup:

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

Podemos insertar etiquetas de estilo en iframe. 

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

Se extrajo este código a continuación de la fuente jHtmlArea. Lo curioso es que la característica estaba allí y no me di cuenta. Me encontré con esta pregunta SO cuando intentaba descubrir cómo implementarla. :)

Esto no es realmente " jQuery " pero funciona. Estoy adivinando que algo con el apéndice 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);

EDIT : creo que la razón por la que esto funciona es si es el mismo dominio (incluida la creación de iframe en js). De lo contrario, los bloqueos de seguridad habituales del navegador evitarán que manipules el dominio de iframe.

Consulte Cómo aplicar CSS a iFrame

Suponiendo que se encuentre en el mismo dominio y no esté lidiando con la seguridad entre dominios, querrá verificar si el iFrame está cargado. ¡NO SOLO EL NOMBRE DE INICIO, SINO EL DOCUMENTO DENTRO! (Esto me colgó durante un tiempo mientras intentaba usar .load () )

Luego, utilizando 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" />');
 });
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top