add styles to iframe with javascript

Question

I'm wanting to update an iframe with css in javascript. I know how to update the iframe body with the code below but is there a way to insert css into the head of the iframe?

Thanks David

var previewFrame = document.getElementById('previewFrame');
var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;

preview.open();
preview.write('New Content');
preview.close();

That's an awful way to update the content of an iframe, and it does "update" the `head` as well (by wiping it out). — Teemu, Jul 16 '14 at 16:27
How will the src attribute of an iframe help add css styles. — David, Jul 18 '14 at 19:17

score -2 · Accepted Answer · answered Jul 16 '14 at 16:14

-2

I think if you have iframe page under the same domain you should try this:

$("iframe").contents().find('head').append('<style type="text/css">' +'MY CSS IS HERE' + '</style>')

answered Jul 16 '14 at 16:14

Krupal Shah

8,949
11
57
93

5

jquery? user asked for js – Phlume Jul 16 '14 at 16:15
@Phlume Sorry, didn't see that...so,did I get downvote for that? Did you ask OP if he knows jquery or not? – Krupal Shah Jul 16 '14 at 16:17
2

@user3830694 why should Phlume ask it, when it was your assumption? – Matteo Tassinari Jul 16 '14 at 16:20
I saw that it was a duplicate, and that @user3830694 posted jquery, I commented on both, and then moved on. – Phlume Jul 16 '14 at 16:22
@Phlume sorry...my apologies. – Krupal Shah Jul 16 '14 at 16:31

add styles to iframe with javascript

1 Answers1