Adding CSS to iframe with no body

Question

I have an iframe tag, where I wish to change the font-family. But the iframe I am linking to does not have a body, it's just text and pictures. So most javascript ways of accessing it don't work. Is there any way around it?

Possible duplicate: http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe (and many others) — Cedric Reichenbach, May 02 '13 at 14:09

Elliot Bonneville · Answer 1 · 2013-05-02T14:12:13.957

2

If the iframe isn't on the same domain as its parent, there's nothing you can do to modify its contents, because of the same-origin policy.

edited May 02 '13 at 14:12

answered May 02 '13 at 14:05

Elliot Bonneville

51,872
23
96
123

https://developer.mozilla.org/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript – Ian May 02 '13 at 14:10
No problem, just thought the OP might want to read more about it :) – Ian May 02 '13 at 14:13

score 0 · Accepted Answer · answered May 02 '13 at 14:11

If the iFrame is not on the same URL / server, the best way for you do this is with PHP instead.

<div class="iframe">
    <?php echo get_file_contents("http://www.google.com"); ?>
</div>
<style>
    .iframe {
        !! Whatever Styles !!
    }
</style>

Obviously replacing !! Whatever Styles !! with the changes you wish to make to the font. I hope this helped - I'm quite new to Stack Overflow, so if I'm doing anything wrong please tell me :)

Adding CSS to iframe with no body

2 Answers2