Can I apply CSS to the elements within an iframe?

user_208827 0
Viewed 57484

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

iframe css dom html javascript
3 Answers

This can be accomplished by injecting the CSS link to the Header of the iframe:

    // this function will inject the link to CSS into iframe header
    function loadCSSToiFrame(iframeId, filename){ 
       var file = document.createElement("link");
       file.setAttribute("rel", "stylesheet");
       file.setAttribute("type", "text/css");
       file.setAttribute("href", filename);
       document.getElementById(iframeId).contentWindow.document.head.appendChild(file);
    }
  
    // just call a function to load your CSS
    // this path should be relative your HTML location
    loadCSS("iframe_id", "stylesheet.css");
user_105983930
Related