Fügen Sie ein Stylesheet zu einem Iframe mit jQuery

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

Frage

Ich erstelle einen HTML-Editor, ähnlich wie diese jetzt mit dem Ausgang in unten Ich bin eingeben. Ich bin ein iframe und die $ htmlTextBox.val () in den Körper des iframe Dumping.

Ich versuche, ein Stylesheet innerhalb des iframe zu schaffen, so dass es so gut aussieht, wie es funktioniert.

Vielen Dank im Voraus! 

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

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

    $body.html($htmlTextBox.val());
}
War es hilfreich?

Lösung

Während Sie können interagieren mit einem document.styleSheets des iframe, der alten Schule zuverlässige Art und Weise wird entweder das Stylesheet haben dort an erster Stelle (durch einen Iframe-src Schreiben auf einen leeren Punkt Dokument mit dem gewünschten Sheet), oder ihn an Ort und Stelle mit document.write(). Zum Beispiel: 

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

(Dies wird auch die iframe Dokument-Standards-Modus gesetzt, unter der Annahme, dass das, was Sie wollen.)

Andere Tipps

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

Wir können Style-Tag in iframe einfügen. 

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

Dieser Code unter Gezogen von jHtmlArea Quelle. Komische ist, war das Merkmal dort und ich habe es nicht erkennen. Ich kam in dieser Frage SO, als ich versuchte, herauszufinden, wie es zu implementieren. :)

Das ist nicht wirklich „jQuery“ aber es funktioniert. Ich guesing etwas mit append nicht mit iframe arbeiten, so dass sie es der alten Schule tat. Bobince Antwort sieht auch gut aus, und vielleicht zuverlässiger sein? Bisher scheint ok zu arbeiten. 

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

Bearbeiten : Ich denke, der Grund, warum dies funktioniert, ist, wenn es samedomain (einschließlich in js Schaffung iframe) Ansonsten sind die üblichen Browser-Sicherheit blockiert werden verhindern, dass Sie die Manipulation iframe dom

.

Siehe Wie CSS anwenden iframe

Sie sind auf der gleichen Domain Unter der Annahme, und nicht mit domänenübergreifende Sicherheit zu tun, möchten Sie überprüfen, ob die iFrame geladen wird - nicht nur das IFRAME, aber das Dokument INSIDE !! (Dies hing mich für eine Weile während versuchen .load() zu verwenden)

Dann jquery verwenden, um den Inhalt zuzugreifen, um den Kopf zugreifen kann und die Stylesheet auf den Kopf anhängen. 

 $(document.getElementById('yourIframeID').contentWindow.document).ready(function() {
      $('yourIframeID').contents().find('head').append('<link rel="stylesheet" href="/path/to/stylesheet/style.css" type="text/css" />');
 });
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top