Append HTML to an iframe using jQuery

Question

I've tried this but it did not work.

Here is my code: JSFiddle

<script src='jquery.js' type='text/javascript'></script>
<div id="body">
<textarea id="html"></textarea>
<textarea id="javascript"></textarea>
<textarea id="css"></textarea>
<iframe id='result'>
</iframe>
</div>
<script>
    var iframe_ = $("iframe#result")[0].contentDocument.document;
    console.log(iframe_);
    var iframe = $("body", iframe_);
    var script = document.createElement( 'script' );
    script.type = 'text/javascript';
    iframe.append(script)
    iframe.append("<style type='text/css'></style><div id='r'></div>");
    $("div#body").css({
        background: "#f0f0f0",
        padding: "5px",
        width: "80%"
    });
    $("iframe#result, textarea#html, textarea#css, textarea#javascript").css({
        width: "45%",
        margin: "2.5px",
        height: "250px",
        border: "1px solid #ccc",
        resize: "none",
        background: "#fff"
    }).on("keyup", function(){
        iframe.find("script").text = $("textarea#javascript").val();
        iframe.find("style").html($("textarea#css").val());
        iframe.find("div#r").html($("textarea#html").val());
    });
</script>

My problem is that I want to append html to an iframe but it is not working. It is always putting the html to append outside of the iframe.

There's a great tutorial on how to do exactly what you want here: code.tutsplus.com/tutorials/…. Very concise and easy to follow...used it on one of my projects. — jme11
– jme11, Commented Jun 18, 2014 at 18:37
Be careful how you are adding the new elements - your current set up looks like it will be continually adding new blocks and not updating the existing blocks which will cause you errors further down the line — JRulle
– JRulle, Commented Jun 18, 2014 at 20:08

StrubT · Accepted Answer · 2014-06-18 20:01:30Z

2

$("iframe#result")[0].contentDocument.document returns undefined.

$("iframe#result")[0].contentDocument would be correct.

PS: $("iframe#result").contents().find("body") works as well.

answered Jun 18, 2014 at 20:01

StrubT

1,0287 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Append HTML to an iframe using jQuery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related