Can I apply CSS to the elements within an iframe?

Question

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

Solution 1

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.

Solution 2

If it is of same domain you can interfere the iframe content using javascript as follows.. assume id of iframe is IframeId. And you want to change color of element having id "elementId".

$("iframe").load(function() {
   var frameContents;
   frameContents = $("#IframeId").contents(); 
   frameContents.find("#elementId").css("color","#fff");
});

Comments

[RadiantHex]

thanks so much! What if the domain is the exact same as the host page?

[Pointy]

If you're on the same domain, then Javascript from the parent page can mess with the contents of the frame. The parent page CSS won't affect the frame page, but Javascript can change the CSS or change element styles etc.

[Steve Robinson]

is there anyway to do this using some techniques people are saying.. embedding a child iframe or postMessage or something? pipwerks.com/2008/11/30/… johan.driessen.se/posts/resizing-cross-domain-iframes