How to style the body of an empty iframe?

Question

I got this problem only on IE (even on most recent versions, like 11). The thing is that I appended an iframe dinamicly to my document in which I'm writing some scripts for later execution. Those scripts must paint an image in the end, the problem is I'm getting anoying margins on IE from the body.

I can't load that using the src, it must be dynamic. So I just thought "lets get access to the iframe and write some style on the body". But when I retrieve the iframe doc like this...

var win = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument;

... win.document.body or win.document.querySelector("body") returns null (again, in ie 11).

Does anyone know how to get to the body safely?

put a style sheet that targets the body inside the iframe itself — andrew, Sep 01 '15 at 10:35

score 0 · Answer 1 · answered Sep 01 '15 at 10:35

0

You can do this way:

<iframe srcdoc="" id="iframe"></iframe>
<script type="text/javascript">
   var iframe = document.getElementById("iframe");
   iframe.setAttribute("srcdoc", "<style>body{background:red;}</style>");
</script>

Demo: http://output.jsbin.com/kaquwilaka

answered Sep 01 '15 at 10:35

Anand Sudhanaboina

885
6
10

Doesn't seem to work if you write something on the iframe – Vandervals Sep 01 '15 at 10:47
This will override the internal content of Iframe. – Anand Sudhanaboina Sep 01 '15 at 10:51
You can use this: http://stackoverflow.com/questions/32328679/how-to-pass-a-value-from-iframe-to-the-parent/32329724#32329724 . Send message to Iframe to change color. – Anand Sudhanaboina Sep 01 '15 at 10:51
the iframe is empty, how is sending messages to it suppose to help me? – Vandervals Sep 01 '15 at 11:05
If the iframe is empty then you can use the above method. – Anand Sudhanaboina Sep 01 '15 at 11:06
It is empty when I create it, of course! There is no sense on writing scripts that read messages... – Vandervals Sep 01 '15 at 11:09
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/88469/discussion-between-anand-sudhanaboina-and-vandervals). – Anand Sudhanaboina Sep 01 '15 at 11:11

Vandervals · Accepted Answer · 2015-09-01T11:21:26.290

0

I could write some css like this:

win.document.open();
win.document.write("<style>body{margin:0;}</style>");
//write other stuff
win.document.close();

This works as doesn't avoid any further writting and also because style can be in the head or in the body.

edited Sep 01 '15 at 11:21

answered Sep 01 '15 at 11:11

Vandervals

5,774
6
48
94

How to style the body of an empty iframe?

2 Answers2