使用jQuery将样式表附加到iframe

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

题

我正在创建一个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());
}
有帮助吗？

解决方案

虽然可以与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>

（这也会将iframe文档设置为标准模式，假设这是您想要的。）

其他提示

<强>跟进：

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

我们可以将样式标签插入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>

从jHtmlArea源中获取以下代码。有趣的是，功能在那里，我没有意识到它。当我试图弄清楚如何实现它时，我遇到了这个SO问题。 ：）

这不是真正的“jQuery”。但它的确有效。我猜对了追加是与iframe无关，所以他们做了旧学校。 Bobince的答案看起来也不错，而且可能更可靠？到目前为止，这似乎工作正常。

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

编辑：我认为这样做的原因是它是同一个域（包括在js中创建iframe）否则通常的浏览器安全块会阻止你操纵iframe dom。

请参阅如何将CSS应用于iFrame

假设您在同一个域上并且没有处理跨域安全性，您将需要检查iFrame是否已加载 - 不仅仅是IFRAME，而是文档内容！ （这在试图使用 .load（））

时挂了我一会儿

然后，使用jquery访问内容，访问头部，并将样式表附加到头部。

 $(document.getElementById('yourIframeID').contentWindow.document).ready(function() {
      $('yourIframeID').contents().find('head').append('<link rel="stylesheet" href="/path/to/stylesheet/style.css" type="text/css" />');
 });
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top