Aggiungi un foglio di stile a un iframe con jQuery

Sto creando un editor HTML, simile a questo sto digitando in questo momento con l'output di seguito. Sto usando un iframe e ho scaricato $ htmlTextBox.val() nel corpo dell'iframe.Aggiungi un foglio di stile a un iframe con jQuery

Sto provando a creare un foglio di stile all'interno dell'iframe in modo che appaia buono 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()); 
}

fonte

2009-03-09 hunter

Mentre si possibile interagire con document.styleSheets di un iframe, il modo affidabile vecchia scuola è o di avere il foglio di stile lì, in primo luogo (scrivendo un iframe-src per puntare a un documento vuoto con il foglio di stile desiderato) o metterlo in opera con document.write(). Per 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 sarà anche impostare il documento iframe alla modalità standard, partendo dal presupposto che è quello che vuoi.)

fonte

2009-03-09 04:42:52 bobince

Sono andato sul percorso con la pagina di base con il foglio di stile incluso nel . $ (document) .ready (function() {SetPreview();}); non imposta il corpo iframe in Chrome, Safari o FireFox, ma funziona in IE ... – hunter

solo un po 'di sfondo, sto impostando l'anteprima sul caricamento della pagina e quindi su ogni keyup nel documento di jQuery TextArea – hunter

.ready richiede solo il documento principale da caricare, non deve attendere il caricamento del contenuto dell'iframe. Quindi può essere una condizione di competizione per vedere se il documento del documento iframe viene caricato prima di "pronto", e quindi se document.body è ancora disponibile. – bobince

Tirato questo codice qui sotto da fonte jHtmlArea. La cosa divertente è che la funzione era lì e non me ne sono reso conto. Mi sono imbattuto in questa domanda su SO quando stavo cercando di capire come implementarlo. :)

Questo non è veramente "jQuery" ma funziona. Sto dicendo che qualcosa con append non funziona con iframe, quindi l'hanno fatto 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);

EDIT: Penso che il motivo per cui funziona è se è sameDomain (inclusa la creazione di iframe in js) Altrimenti i soliti blocchi di sicurezza del browser vi impediranno di manipolare iframe dom.

Vedi How to apply CSS to iFrame

fonte

2010-01-07 16:33:34 Jason

dove eri l'anno scorso? – hunter

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

fonte

2011-03-08 16:29:30 hunter

Mentre il contenuto viene caricato prima che il css venga applicato, viene visualizzato uno sfarfallio di una pagina senza stile. Qualche idea su come impedire che la pagina venga mostrata fino a quando lo stile non è stato applicato? –

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

fonte

2014-09-02 15:15:07

Genius.Grazie Palani. –

supponendo che si sta sullo stesso dominio e non si occupano di protezione tra domini, ti consigliamo di controllare se l'iFrame è caricato - non solo l'iframe, ma il documento DENTRO !! (Questo mi ha bloccato per un po 'mentre cercavo di usare .load())

Quindi, utilizzando jquery, accedere al contenuto, accedere alla testa e aggiungere il 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" />'); 
});

fonte

2014-09-13 01:05:16

Aggiungi un foglio di stile a un iframe con jQuery

risposta

Problemi correlati