Aggiungi un foglio di stile a un iframe con jQuery

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

Domanda

Sto creando un editor HTML, simile a questo che sto digitando in questo momento con l'output di seguito. Sto usando un iframe e scarico $ htmlTextBox.val () nel corpo dell'iframe.

Sto cercando di creare un foglio di stile all'interno dell'iframe in modo che appaia bello come funziona.

Grazie in anticipo! 

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

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

    $body.html($htmlTextBox.val());
}
È stato utile?

Soluzione

Mentre puoi interagire con un documento iframe.styleSheets, il modo affidabile della vecchia scuola è quello di avere il foglio di stile lì in primo luogo (scrivendo un iframe-src per indicare un vuoto documento con il foglio di stile desiderato) o metterlo in posizione con document.write () . Ad esempio: 

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

(Questo imposterà anche il documento iframe in modalità Standard, supponendo che sia quello che vuoi.)

Altri suggerimenti

ollowup:

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

Possiamo inserire un tag di stile in 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>

Estratto questo codice di seguito dalla fonte jHtmlArea. La cosa divertente è che la funzionalità era lì e non me ne sono reso conto. Mi sono imbattuto in questa domanda SO quando stavo cercando di capire come implementarla. :)

Questo non è davvero " jQuery " ma funziona. Sto immaginando che qualcosa con Append non funzioni con iframe, quindi l'hanno fatto alla vecchia scuola. Anche la risposta di Bobince sembra buona e potrebbe essere più affidabile? Finora sembra funzionare bene. 

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

MODIFICA : Penso che il motivo per cui funziona sia se è lo stesso Dominio (inclusa la creazione di iframe in js) Altrimenti i soliti blocchi di sicurezza del browser ti impediranno di manipolare iframe dom.

Vedi Come applicare CSS a iFrame

Supponendo che tu sia sullo stesso dominio e non ti occupi della sicurezza tra domini, ti consigliamo di controllare se l'iFrame è caricato - NON SOLO L'IFRAME, MA IL DOCUMENTO ALL'INTERNO !! (Questo mi ha bloccato per un po 'mentre cercavo di usare .load () )

Quindi, usando jquery, accedi ai contenuti, accedi alla testa e aggiungi il tuo foglio di stile alla testa. 

 $(document.getElementById('yourIframeID').contentWindow.document).ready(function() {
      $('yourIframeID').contents().find('head').append('<link rel="stylesheet" href="/path/to/stylesheet/style.css" type="text/css" />');
 });
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top