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?

JBel
  • 329
  • 1
  • 5
  • 19
  • I can't figure out if you want it in a blank iframe inside the
    or insert html directly in the
    itself? Both are possible. Please update question to clear up ambiguity and make objectve more absolute
     – charlietfl Aug 04 '18 at 14:22
  • `div.innerHTML = html`? – Luca Kiebel Aug 04 '18 at 14:22
  • @charlietfl Thank you, I hope the question is clear now?? – JBel Aug 04 '18 at 14:39
  • @Luca That will insert a and tag within my page's body etc. I don't think that will work – JBel Aug 04 '18 at 14:40
  • @charlietfl What other page? There is no html page, just an HTML string being generated somewhere. – JBel Aug 04 '18 at 14:44
  • Oh ok...then do exactly what Luca suggested. or there are other insetion methods like appendchild...prependChild as well. Should be easy to find tutorials on how to insert html into existing page – charlietfl Aug 04 '18 at 14:46
  • @charlietfl Thank you. Another side question: This HTML is actually coming when I fetch HTML of a website using php curl. Then I get it into my JS (to display it) using AJAX. The question is that can I use php curl to also pull the stylesheets and images etc. that the other website, e.g. this stackoverflow page, has? – JBel Aug 04 '18 at 15:00
  • 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 – charlietfl Aug 04 '18 at 15:03

2 Answers2

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

Alaa
  • 159
  • 1
  • 3
  • 9
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/

Rnayak
  • 96
  • 11
  • I am not sure about the change of title while including your tag in variable will affect or not, you can see it by adding it. – Rnayak Aug 04 '18 at 15:11
  • 1
    This won't work with an iframe, and a div can't usefully contain a full HTML document. – Daniel Beck Aug 04 '18 at 16:43