使用jQuery将样式表附加到iframe

Question

使用jQuery将样式表附加到iframe

hun*_*ter 8 iframe jquery dynamic stylesheet

我正在创建一个HTML编辑器,类似于我现在正在键入的输出,下面的输出.我正在使用iframe并将$ htmlTextBox.val()转储到iframe的主体中.

我正在尝试在iframe中创建一个样式表,以使它看起来像它的工作一样好.

提前致谢!

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

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

    $body.html($htmlTextBox.val());
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

bob*_*nce 12

虽然你可以与iframe的document.styleSheets 进行交互,但老派可靠的方法是首先在那里设置样式表(通过编写iframe-src指向带有所需样式表的空文档),或者将其放入到位document.write().例如:

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

Run Code Online (Sandbox Code Playgroud)

(这也会将iframe文档设置为标准模式,假设这是你想要的.)

Answer 2

hun*_*ter 12

跟进:

HTML

<iframe id="message" name="message" />

Run Code Online (Sandbox Code Playgroud)

jQuery的

setTimeout(function() {
    var $head = $("#message").contents().find("head");                
    $head.append($("<link/>", 
        { rel: "stylesheet", href: url, type: "text/css" }
    ));                
}, 1);

Run Code Online (Sandbox Code Playgroud)

Answer 3

Pal*_*mar 5

我们可以在 iframe 中插入 style 标签。

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	16 年，8 月前
查看次数：	46657 次
最近记录：	11 年，1 月前