9

我正在创建一个 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());
}
4

5 回答 5

14

虽然您可以与 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 文档设置为标准模式，假设这是您想要的。）

于 2009-03-09T04:42:52.573 回答
13

跟进：

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);
于 2011-03-08T16:29:30.227 回答
5

我们可以在 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>
于 2014-09-02T15:15:07.070 回答
1

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

这不是真正的“jQuery”，但它有效。我猜想 append 的东西不能与 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

于 2010-01-07T16:33:34.330 回答
1

假设您在同一个域上并且不处理跨域安全性，您需要检查 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" />');
 });
于 2014-09-13T01:05:16.097 回答