Show new, dynamically parsed HTML document jQuery

Question

I have two htmldocuments:

For the main content.
One that contains an iframe using an external URL.

The URL to that iframe is created dynamically using jquery.

I want to avoid having two different htmldocuments but rather want to create a new htmldocument dynamically that contains the iframe, like:

var dynamic_img_path = 'my_external_url';
var html_to_parse = '<html><head><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>my title</title><style type="text/css">html {margin: 0;height: 100%;overflow: hidden;}iframe {position: absolute;left: 0;right: 0;bottom: 0;top: 0;border: 0;}</style></head><body><h1>my heading 1</h1><iframe id="iframe-id" width="100%" height="100%" frameborder="0" src='+ url_param +'></iframe></body></html>';

I then parse the string html_to_parse to a dom:

var parser = new DOMParser();
var new_html = parser.parseFromString(html_to_parse, "text/html");

This results in an htmldocument as I want it.

But how can I display this new html? I.E. How can I use this as I would with a standard window.location change, so that this new htmlis shown?

It isn't a jQuery approach, what about to use [jQuery.load()](http://api.jquery.com/load/)? — Alessandro, Jan 03 '18 at 15:27
This got me close. window.document.body.innerHTML = new_html.documentElement.innerHTML; However, the iframe url doesn't load. — Jonathan Chaplin, Jan 03 '18 at 15:34
By the way, console.dir might be useful to help you debug this problem. — Jonathan Chaplin, Jan 03 '18 at 15:39
This post might be helpful to you: https://stackoverflow.com/questions/10418644/creating-an-iframe-with-given-html-dynamically — Jonathan Chaplin, Jan 03 '18 at 15:47
@JonathanChaplin Your solution with `window.document.body.innerHTML = new_html.documentElement.innerHTML` works for me and loads the dynamic iframe src. Happy to accept this as the answer. Thanks! — ben_aaron, Jan 03 '18 at 15:58

score 1 · Accepted Answer · answered Jan 03 '18 at 15:59

1

Set the body's innerHTML to the documentElement.innerHTML like so:

window.document.body.innerHTML = new_html.documentElement.innerHTML

answered Jan 03 '18 at 15:59

Jonathan Chaplin

2,442
1
18
21

Show new, dynamically parsed HTML document jQuery

1 Answers1