Insert HTML into iframe

Question

I am creating a in browser HTML editor. I am using the syntax highlighter called Code Mirror which is very good.

My setup is an iframe that holds a view of the page which is being edited and a textarea which the plain text HTML sits which the user edits.

I am trying to insert the edited HTML from the textarea into the iframe which displays they rendered HTML.

Is this possible? I have tried the following:

HTML setup:

<iframe id="render">

</iframe>

<textarea id="code">
HTML WILL BE 

HERE
</textarea>
<input type="submit" id="edit_button" value="Edit" />

JQuery Setup:

$('#edit_button').click(function(){
    var code = editor.getCode(); // editor.getCode() is a codemirror function which gets the HTML from the text area
    var iframe = $('#render');
    iframe.html(code)
})

This does not seem to load the HTML into the iframe, is there a special method to insert HTML into a iframe or is this not possible?

possible duplicate of [putting html inside an iframe (using javascript)](http://stackoverflow.com/questions/620881/putting-html-inside-an-iframe-using-javascript) — Vivek Kodira, Jul 18 '14 at 06:28

score 29 · Answer 1 · answered Feb 13 '11 at 17:00

This problem bugged me too and finally found solution.

Its late but will add value to other visitors who might need proper fix.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title>Iframe test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
    </script>
    <script type="text/javascript">
        $(function() {
            var $frame = $('<iframe style="width:200px; height:100px;">');
            $('body').html( $frame );
            setTimeout( function() {
                var doc = $frame[0].contentWindow.document;
                var $body = $('body',doc);
                $body.html('<h1>Test</h1>');
            }, 1 );
        });
    </script>
</head>
<body>
</body>
</html>

why would you create the iframe in javascript? that seems like such a terrible way to do it... — A Friend, Nov 15 '17 at 18:13

score 14 · Answer 2 · answered Feb 27 '15 at 16:43

14

You can do it all on one line with jquery

$("iframe").contents().find('html').html("Your new HTML");

See working demo here http://jsfiddle.net/dWpvf/972/

Replace "iframe" with "#render" for your example. I left in "iframe" so that other users can reference the answer.

answered Feb 27 '15 at 16:43

Justin Levene

1,630
19
17

Not sure why the accepted answer has been downvoted, but for future viewers to this question, this method is brilliant and works :) – mickburkejnr Jul 17 '15 at 09:10
a concise answer. Thank alot – riazosama Aug 26 '20 at 10:05

score 3 · Answer 3 · answered Oct 14 '09 at 12:04

3

try

iframe[0].documentElement.innerHTML = code;

Assuming that the url to the iframe is from the same domain as the webpage.

answered Oct 14 '09 at 12:04

Marius

57,995
32
132
151

score -4 · Accepted Answer · edited Apr 16 '19 at 19:02

-4

Set the document.designMode property and then try adding the HTML.

Insert HTML into iframe

4 Answers4

Linked