Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I apply CSS to the elements within an iframe?

Tags:

I often see sites using iframes containing an external site, and a top frame containing JavaScript functionality for the user.

e.g. user analytics software, Digg bar, etc...


Any tips for experimenting on something similar? =) Would be awesome to know

like image 306
RadiantHex Avatar asked Jul 20 '10 00:07

RadiantHex


People also ask

Can you apply CSS to an iframe?

Adding CSS File to iFrameYou can add entire CSS file instead of injecting separated styles by creating link and add it to the iframe's head. This method does not work with cross domain content. You'll need to set appropriate CORS header but it's not recommended due to security risks.

Can you style inside an iframe?

You can not change the styles of the page that resides within the iframe.

Can iframe use parent CSS?

You can not directly apply styles to the inner IFrame element through parent window CSS class even though its domain is same as parent. As ,(All the iframe's domain is the same as the parent) .. Best thing you can do is ,to add your main style sheet to the IFrame using javascript or jquery.

Can you override iframe CSS?

Yes you can, with javascript. Note it works best with the iframe URL and the parent URL sharing the same domain.


1 Answers

No, not from outside the iframe. An <iframe> is its own world. If the domains etc. match, then Javascript can communicate in and out, and could (if it wanted to) inject CSS into a child frame.

If the <iframe> contains content from a different domain, there's pretty much nothing you can do. The parent page controls the size of the frame and whether it's visible, and can put its own content over the frame by positioning etc, but it can't directly effect the way the actual frame content is rendered.

like image 165
Pointy Avatar answered Oct 12 '22 07:10

Pointy