How to show some HTML that was generated by Javascript

Question

Here is the initial HTML, it is fairly small. It's only meant to be the loading screen.

<html>
  <head>
    <title>Simple Hello World</title>
    <link href="rapid-ui.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="rapid-ui.js"></script>
  </head>
  <body>
   This is the body of the page.
  </body>
</html>

The "rapid-ui.js" will generate an HTML string, this will be a full document - including DOCTYPE, head, meta, scripts, css, etc. After it is done generating the HTML it should then display that HTML on top of the page in an iframe in the same way as if the "src" of that iframe was set to a URL that generated that same HTML string.

I tried this:

function showHTML(html) {
  var iframe = $('<iframe id="display" frameborder="0"></iframe>');
  iframe[0].src = 'data:text/html;charset=utf-8,' + encodeURI(html);
  iframe.appendTo('body');
}

It doesn't seem CSS or scripts are executed properly.

This doesn't work either

function showHTML(html) {
  var iframe = $('<iframe id="display" frameborder="0"></iframe>');
  iframe[0].innerHTML = html;
  iframe.appendTo('body');
}

Taylor Hakes · Accepted Answer · 2013-05-19T05:10:30.333

2

You cannot just insert data into an iframe before it is appended to the dom. Try this

function showHTML(html) {    
    $('<iframe id="display" frameborder="0">').appendTo('body')
                              .contents().find('body').append(html);
}

Here is another way if you need to edit the head.

function showHTML(html) {    
    var iframe = $('<iframe id="display" frameborder="0">').appendTo('body');
    var doc = iframe[0].contentWindow.document;
    doc.open();
    doc.write(html);
    doc.close();
}

edited May 19 '13 at 05:10

answered May 19 '13 at 04:42

Taylor Hakes

606
7
12

This is very close - the CSS and HTML are inserted properly - but DOCTYPE and meta are not respected. Also scripts are not evaluated. – codefactor May 19 '13 at 04:47
Edited it to make it respect all parts of the document – Taylor Hakes May 19 '13 at 05:04
Oh nevermind - let me investigate more - i think maybe the problem in IE 7/8 is happening in my HTML generation code is resulting in different HTML somehow. – codefactor May 19 '13 at 16:25
Yes - I have now verified - the problem in my code was with the HTML generation - I have fixed that and now all is good with IE 7/8 – codefactor May 19 '13 at 16:33

Solomon Closson · Answer 2 · 2013-05-19T05:01:29.093

0

Try this:

function showHTML(html) {
    var iframe = '<iframe id="display" frameborder="0"></iframe>';
    $("body").append(iframe).append(html);
}

append will append within the element

If you need to edit the src of the iframe instead... do this:

function showHTML(html) {
    var iframe = '<iframe id="display" frameborder="0"></iframe>';
    $("body").append(iframe).attr("src", "data:text/html;charset=utf-8," + encodeURI(html));
}

or this:

function showHTML(html) {
    var fSrc = "data:text/html;charset=utf-8," + encodeURI(html);
    var iframe = '<iframe id="display" src="\" + fSrc + "\" frameborder="0"></iframe>';
    $("body").append(iframe);
}

edited May 19 '13 at 05:01

answered May 19 '13 at 04:47

Solomon Closson

6,111
14
73
115

The above code is wrong in many ways. You are doing nothing with the iframe variable.. $('iframe') searches the DOM, not in memory elements. $('iframe').append(html) will not work for iframes – Taylor Hakes May 19 '13 at 04:51

score 0 · Answer 3 · edited May 23 '17 at 11:57

0

I found from here: Creating an iframe with given HTML dynamically a possible solution

function showHTML(html) {
    var iframe = $('<iframe id="display" frameborder="0"></iframe>').appendTo('body');
    var doc = iframe[0].contentWindow.document;
    doc.open();
    doc.write(html);
    doc.close();
}

This solution seems to work.

edited May 23 '17 at 11:57

Community

1
1

answered May 19 '13 at 04:55

codefactor

1,616
2
18
41

How to show some HTML that was generated by Javascript

3 Answers3