Anexar uma folha de estilo para um iframe com jQuery

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

Pergunta

Estou criando um editor HTML, semelhante a este que eu estou escrevendo no agora com a saída abaixo. Eu estou usando um iframe e despejar o $ htmlTextBox.val () no corpo do iframe.

Eu estou tentando criar uma folha de estilo dentro do iframe para que ele parece tão bom como ele funciona.

Agradecemos antecipadamente! 

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

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

    $body.html($htmlTextBox.val());
}
Foi útil?

Solução

Enquanto você pode interagem com document.styleSheets de um iframe, a maneira confiável old-school é ou ter a folha de estilo lá em primeiro lugar (por escrever um iframe src para apontar para um vazio documento com o estilo desejado), ou colocá-lo no lugar com document.write(). Por exemplo: 

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

(Isto irá também definir o documento iframe para o Modo de Padrões, assumindo que é o que você deseja.)

Outras dicas

Dar seguimento:

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 inserir tag estilo em 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>

Puxado este código abaixo da fonte jHtmlArea. O engraçado é que o recurso estava lá e eu não percebi isso. Me deparei com este SO pergunta quando eu estava tentando descobrir como implementá-lo. :)

Isto não é realmente "jQuery", mas ele funciona. Estou guesing algo com append não está trabalhando com iframe assim que eles fizeram isso da velha escola. A resposta de bobince parece ser bom também, e pode ser mais confiável? Até o momento, este parece ok trabalho. 

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

Editar : Eu acho que a razão isto funciona é se é sameDomain (incluindo a criação de iframe em js) Caso contrário, os blocos usuais de segurança do navegador irá impedi-lo de manipulação iframe dom

.

Como aplicar CSS para iFrame

Assumindo que você está no mesmo domínio e não lidar com a segurança de domínio cruzado, você vai querer verificar se o iFrame é carregado - não apenas o IFRAME, mas o documento DENTRO !! (Este pendurou-me por um tempo enquanto tentava uso .load())

Em seguida, usando jquery, acesso a conteúdos, o acesso a cabeça, e acrescentar a sua folha de estilo para a cabeça. 

 $(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 em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top