CODEWITHSUNDEEP
javascriptjqueryhtmliframe
JBel
JBel

Reputation: 349

How to populate an iframe which an HTML string of a complete document, rather than giving it a link to another web page in the src attribute?

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?

Upvotes: 2

Views: 1682

Answers (2)

Alaa
Alaa

Reputation: 300

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

Upvotes: 3

Rnayak
Rnayak

Reputation: 96

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/

Upvotes: 0

Related Questions