2

I get an HTML string in my Javascript/JQuery script which is the complete HTML of a document. I need to display this HTML inside a <div> in my web page.

For example, my Javascript is like:

// code ... var htmlString = "<!DOCTYPE html><html><head><title>something</title>...other html tags...</head><body>...</body></html>"; // code...

I need to render the html string (the value of var htmlString) in a particular <div> in my webpage.

My idea is that in order to display an HTML page in another HTML page, we need to use iframe. But iframe gets a link to that webpage which is hosted somewhere. All I have is the HTML string of a complete HTML webpage, and I need to display it on my webpage in a <div>.

How can I do that?

Improve this question
8
  • I can't figure out if you want it in a blank iframe inside the <div> or insert html directly in the <div> itself? Both are possible. Please update question to clear up ambiguity and make objectve more absolute Commented Aug 4, 2018 at 14:22
  • div.innerHTML = html? Commented Aug 4, 2018 at 14:22
  • @charlietfl Thank you, I hope the question is clear now?? Commented Aug 4, 2018 at 14:39
  • @Luca That will insert a <body> and </body> tag within my page's body etc. I don't think that will work Commented Aug 4, 2018 at 14:40
  • 1
    Well that's what I meant by "another page". Getting styles and images gets horribly complicated if they don't have absolute paths in href and src or if they have hot link protection on them being served elsewhere. You would also need all that isolated in iframe rather than inject in your own page unless you aren't worried about style conflicts Commented Aug 4, 2018 at 15:03

2 Answers 2

Reset to default
3

You can load an empty with no src and later apply content to it using a script.

<iframe></iframe> document.querySelector('iframe')[0] .contentDocument.write("<h1>Injected from parent frame</h1>")

See:Iframe without src but still has content? Hope I helped you

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

Comments

0

if you are having html and you want to show the html as it is obtained then you can use div.innerText something like this

<div id='dd'> </div> <script> var htmlString = "<!DOCTYPE html><html><head><title>something</title>...other html tags...</head><body>...</body></html>"; document.getElementById('dd')[0].innerText = htmlString; </script>

But if you want only data inside the body to show with all the tags inside it then you can use innerHTML change:

$('#dd')[0].innerText = htmlString;

to

$('#dd')[0].innerHTML = htmlString;

For working example, you can see the working fiddle at http://jsfiddle.net/p793syjq/9/

Improve this answer

2 Comments

I am not sure about the change of title while including your <title> tag in variable will affect or not, you can see it by adding it.
This won't work with an iframe, and a div can't usefully contain a full HTML document.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.