Append a stylesheet to an iframe with jQuery

2020-01-27 04:15发布

站内问答 / jQuery
439 5 3

I'm creating an HTML editor, similar to this one I'm typing in right now with the output below. I'm using an iframe and dumping the $htmlTextBox.val() into the body of the iframe.

I'm trying to create a stylesheet inside the iframe so that it looks as good as it works.

Thanks in advance!

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

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

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

5条回答
聊天终结者
2楼-- · 2020-01-27 04:22

Assuming you're on the same domain and not dealing with cross domain security, you'll want to check if the iFrame is loaded--NOT JUST THE IFRAME, BUT THE DOCUMENT INSIDE!! (This hung me up for a while whilst trying to use .load())

Then, using jquery, access the contents, access the head, and append your style sheet to the head.

 $(document.getElementById('yourIframeID').contentWindow.document).ready(function() {
      $('yourIframeID').contents().find('head').append('<link rel="stylesheet" href="/path/to/stylesheet/style.css" type="text/css" />');
 });
查看更多
0人赞 添加讨论(0) 举报
我命由我不由天
3楼-- · 2020-01-27 04:28

Followup:

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);
查看更多
0人赞 添加讨论(0) 举报
不美不萌又怎样
4楼-- · 2020-01-27 04:43

Pulled this code below from jHtmlArea source. Funny thing is, the feature was there and I didn't realize it. I came across this SO Question when I was trying to figure out how to implement it. :)

This isn't really "jQuery" but it works. I'm guesing something with append isn't working with iframe so they did it old school. Bobince's answer looks good too, and might be more reliable? So far, this seems to work ok.

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

EDIT: I think the reason this works is if it is sameDomain (including creating iframe in js) Otherwise the usual browser security blocks will prevent you from manipulating iframe dom.

See How to apply CSS to iFrame

查看更多
0人赞 添加讨论(0) 举报
We Are One
5楼-- · 2020-01-27 04:44

We can insert style tag into 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>
查看更多
0人赞 添加讨论(0) 举报
ら.Afraid
6楼-- · 2020-01-27 04:45

Whilst you can interact with an iframe's document.styleSheets, the old-school reliable way is either to have the stylesheet there in the first place (by writing an iframe-src to point to an empty document with the desired stylesheet), or put it in place with document.write(). For example:

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

(This will also set the iframe document to Standards Mode, assuming that's what you want.)

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(3)