Add contents to a new empty iframe

Question

I have a new iframe. It takes src and includes a completely empty page. Now I want to fill it with data trough javascript.

In normal cases I can do this:

var content = "Some content";
$("iframe").contents().find("body").html(content);

But this iframe is empty and has no body or html. Is it possible to include content to it anyway?

Something like this should be inserted:

<html>
  <head></head>
  <body>Hello</body>
</html>

Update

I can do this:

$('iframe').contents().find('html').html('<html><body>test</body></html>');

I don't know if it will render double html tags or not. In the developer tool I can't see that it add an extra.

The `src` is pointing to a location that is `location.html`? If it is an empty page with no markup of your own, the browser by default will give enough to have a document. ie ``, ``,``. open `about:blank` in browser, then devtools will reveal the default document. — zer00ne, Jun 02 '16 at 07:01
have you checked it ? http://stackoverflow.com/questions/926916/how-to-get-the-bodys-content-of-an-iframe-in-javascript — navnit, Jun 02 '16 at 07:05
Yeah, just right now. https://zer00ne.tinytake.com/sf/NzAzNzM5XzMzMTMzNTU — zer00ne, Jun 02 '16 at 07:06
@zer00ne I added an update to my question. I don't know if it will render double html tags or not. In the developer tool I can't see that it add an extra. — Jens Törnell, Jun 02 '16 at 07:20
@JensTörnell No it won't do double tags because only one root `` and one `` may be allowed in a HTML document. Which brings me to my point: it's already there so why waste time with writing another? — zer00ne, Jun 02 '16 at 07:22
@zer00ne I actually save time. I fetch a page from a route and that page includes both html and body. I just want to add it and don't make the effort of removing them. Thanks! — Jens Törnell, Jun 02 '16 at 07:32
No problem. If you want performance try [documentFragments](https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment) — zer00ne, Jun 02 '16 at 07:35

score 0 · Answer 1 · answered Jun 02 '16 at 07:10

0

You can get hold of the IFrame window by a normal query selector.

var myFrameDoc = document.getElementById('iframe_id').contentDocument;

If it has nothing, write it.

myFrameDoc.write('<html>');
myFrameDoc.write('<head>');
myFrameDoc.write('</head>');
myFrameDoc.write('<body>');
myFrameDoc.write('<div>Hello iFrame</div>');
myFrameDoc.write('</body>');
myFrameDoc.write('</html>');

There are more ways you can do this. I will leave it for you to realize.

answered Jun 02 '16 at 07:10

Charlie

22,886
11
59
90

Thanks. I said "if". It may well be that a script in iFrame has deleted everything and now the OP needs to insert it back. OP never said it was `about:blank`. – Charlie Jun 02 '16 at 07:38
If src value is defined as an html document, the browser by default will provide root, head, and body. – zer00ne Jun 02 '16 at 07:41
And any script can remove it all and pave way for this circumstance too right? Also OP has never said he specified the `sr`c value. – Charlie Jun 02 '16 at 07:44
First I used a route in src to an empty page/url. I tried to just use and it works as well. – Jens Törnell Jun 02 '16 at 09:24

score 0 · Accepted Answer · answered Jun 02 '16 at 11:46

In jQuery it seems to be no solution. Instead I needed to do it like this:

var content = '<html><head></head><body>Hello</body></html>';
var iframe = document.getElementById( '#iframe_id' );
iframe.contentWindow.document.open()
iframe.contentWindow.document.write(content);

Add contents to a new empty iframe

2 Answers2