Ajouter une feuille de style à un iframe avec jQuery

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

Question

Je crée un éditeur HTML, similaire à celui que je tape en ce moment avec la sortie ci-dessous. J'utilise un iframe et j'ajoute $ htmlTextBox.val () dans le corps de l'iframe.

J'essaie de créer une feuille de style à l'intérieur de l'iframe pour qu'elle soit aussi belle que possible.

Merci d'avance! 

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

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

    $body.html($htmlTextBox.val());
}
Était-ce utile?

La solution

Pendant que vous pouvez interagir avec le document.styleSheets d'un iframe, la méthode classique consiste à avoir la feuille de style à la place (en écrivant un iframe-src pour pointer vers un document avec la feuille de style désirée), ou le mettre en place avec document.write () . Par exemple: 

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

(Le document iframe sera également défini sur le mode Standards, en supposant que vous le souhaitiez.)

Autres conseils

Suivi:

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

Nous pouvons insérer une balise de style dans 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>

Extrait ce code ci-dessous à partir de la source jHtmlArea. Ce qui est drôle, c'est que la fonctionnalité était là et que je ne m'en rendais pas compte. Je suis tombé sur cette question SO alors que j'essayais de comprendre comment la mettre en œuvre. :)

Ce n'est pas vraiment "jQuery". mais ça marche. Je pense que quelque chose avec append ne fonctionne pas avec iframe, alors ils l'ont fait à l'ancienne. La réponse de Bobince semble bonne aussi et pourrait être plus fiable? Jusqu'à présent, cela semble fonctionner correctement. 

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

MODIFIER : je pense que la raison pour laquelle cela fonctionne est identique (y compris la création d'iframe en js). Sinon, les blocs de sécurité habituels du navigateur vous empêcheront de manipuler iframe dom.

Voir Comment appliquer le code CSS à iFrame

En supposant que vous apparteniez au même domaine et ne vous occupiez pas de la sécurité entre domaines, vous voudrez vérifier si l'iFrame est chargé - PAS SEULEMENT LE IFRAME, MAIS LE DOCUMENT À L'INTÉRIEUR !! (Cela m'a suspendu pendant un moment en essayant d'utiliser .load () )

Ensuite, à l'aide de jQuery, accédez au contenu, accédez à la tête et ajoutez votre feuille de style à la tête. 

 $(document.getElementById('yourIframeID').contentWindow.document).ready(function() {
      $('yourIframeID').contents().find('head').append('<link rel="stylesheet" href="/path/to/stylesheet/style.css" type="text/css" />');
 });
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top