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-19 05:10:30Z

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, 2013 at 5:10

answered May 19, 2013 at 4:42

Taylor Hakes

6167 silver badges12 bronze badges

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

4 Comments

codefactor Over a year ago

This is very close - the CSS and HTML are inserted properly - but DOCTYPE and meta are not respected. Also scripts are not evaluated.

Taylor Hakes Over a year ago

Edited it to make it respect all parts of the document

codefactor Over a year ago

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 Over a year ago

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

Community · Accepted Answer · 2017-05-23 11:57:02Z

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, 2017 at 11:57

CommunityBot

11 silver badge

answered May 19, 2013 at 4:55

codefactor

1,6663 gold badges19 silver badges41 bronze badges

Comments

Solomon Closson · Accepted Answer · 2013-05-19 05:01:29Z

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, 2013 at 5:01

answered May 19, 2013 at 4:47

Solomon Closson

6,25715 gold badges82 silver badges121 bronze badges

1 Comment

Taylor Hakes Over a year ago

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

Collectives™ on Stack Overflow

How to show some HTML that was generated by Javascript

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related