使用jQuery将样式表附加到iframe_Jquery_Dynamic_Iframe_Stylesheet

使用jQuery将样式表附加到iframe

jquery dynamic iframe

使用jQuery将样式表附加到iframe,jquery,dynamic,iframe,stylesheet,Jquery,Dynamic,Iframe,Stylesheet,我正在创建一个HTML编辑器，类似于我现在输入的这个，输出如下。我正在使用一个iframe并将$htmlTextBox.val（）转储到iframe的主体中我正在尝试在iframe中创建一个样式表，这样它看起来就像工作一样好提前谢谢 $htmlTextBox.keyup(function(){ SetPreview(); }); function SetPreview() { var doc = $preview[0].contentWindow.document;

我正在创建一个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>


var d=frames[0]。文档；
d、 open（）；
d、 写(
''+
''+
'正文{字体大小：200%；}'+
''
);
d、 close（）；
d、 body.innerHTML='Hello'；

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

从jHtmlArea源代码中提取下面的代码。有趣的是，功能就在那里，我没有意识到。当我试图找出如何实现它时，我遇到了这个问题

这不是真正的“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);

编辑：我认为这样做的原因是如果它是sameDomain（包括在js中创建iframe），否则通常的浏览器安全块将阻止您操作iframe dom

请参见后续内容：

HTML

jQuery

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

setTimeout（函数（）{
var$head=$（“#消息”）.contents（）.find（“head”）；
$head.append（$（“”），
{rel:“样式表”，href:url，键入：“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>


.类名
{
背景色：红色；
}
$（函数（）{
$（“#iFrameID”）.contents（）.find（“head”）[0].appendChild（cssID）；
//或$（“#iFrameID”）.contents（）.find（“head”）[0].appendChild（$（'#cssID'）[0]）；
});

假设您在同一个域上，并且没有处理跨域安全问题，那么您将需要检查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" />');
 });

$（document.getElementById（'yourIframeID'）.contentWindow.document）.就绪（函数（）{
$（'yourIframeID'）.contents（）.find（'head'）.append（''）；
});

我使用了包含样式表的基本页面$（document）.ready（函数（）{SetPreview（）；}）；不在Chrome、Safari或FireFox中设置iframe主体，但它在IE中工作。只是在一些背景中，我在页面加载上设置预览，然后在TextAreajQuery文档的每个键上设置预览。ready只需要加载主文档，不必等待加载iframe内容。因此，查看iframe文档是否在“就绪”之前加载，从而查看document.body是否可用，这可能是一个竞争条件。（这就是为什么经常使用其他非常难看的document.write（）方法。）（实际上是“onreadystatechange”，但实际上是一样的。）当在应用css之前加载内容时，会显示未设置样式的页面的闪烁。知道如何在应用样式之前阻止页面显示吗？Genius.谢谢Palani。

 $(document.getElementById('yourIframeID').contentWindow.document).ready(function() {
      $('yourIframeID').contents().find('head').append('<link rel="stylesheet" href="/path/to/stylesheet/style.css" type="text/css" />');
 });