«
»

Parent’s styles in an iframe

Here's a JavaScript that let's you style an iframe just like its top parent. The script is basically just a proof of concept I did after talking to a friend about similar problem he has had in the past, so feel free to modify and use if you like it.

So I have a page, called big.html and a stylesheet for this page, called big.css. On the page there is an iframe that loads small.html. small.html has its own style, called small.css. What my little Javascript function does is:

  1. Getting all top parent's <link> tags
  2. Looping through the tags and checking if the rel attribute has value stylesheet
  3. For all stylesheets found, makes a copy of the link tag and all its attributes and adds it to the head of the iframed page

Here's the code:

function styleMe() {
  if(window.top && window.top.location.href != document.location.href) {
  // I'm small but I'm not alone

    // all parent's <link>s
    var linkrels = window.top.document.getElementsByTagName('link');
    // my head
    var small_head = document.getElementsByTagName('head').item(0);
    // loop through parent's links
    for (var i = 0, max = linkrels.length; i < max; i++) {
      // are they stylesheets
      if (linkrels[i].rel && linkrels[i].rel == 'stylesheet') {
         // create new element and copy all attributes
        var thestyle = document.createElement('link');
        var attrib = linkrels[i].attributes;
        for (var j = 0, attribmax = attrib.length; j < attribmax; j++) {
          thestyle.setAttribute(attrib[j].nodeName, attrib[j].nodeValue);
        }

         // add the newly created element to the head
        small_head.appendChild(thestyle);

      }
    }

    // maybe, only maybe, here we should remove the kid's own styles...

  } else {
    alert('I hate to tell you that, but you are an orphant :(  ');
  }
}

To see the code in action, see big.html.

This entry was posted on Sunday, September 3rd, 2006 and is filed under CSS, JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.


Get notification for future posts: follow me on Twitter or subscribe to my RSS feed

10 Responses to “Parent’s styles in an iframe”

  1. Mike S Says:
    May 1st, 2007 at 2:00 pm

    Brilliant. I’m in the enemy ASP.NET camp, but this worked perfectly for me, too!

    I used it to style a custom app within a Sharepoint site, using a Page Viewer Web Part.

    Very cool, thanks!

  2. ah72 Says:
    July 15th, 2008 at 8:21 am

    Hello,

    Here’s a function to style iframes from the parent

    /* Function to style child iframes
    *
    * Arguments:
    *
    * style_href: link to stylesheet (use absolute links)
    *
    * src_part: (optional) a partial string from iframes src attribute, if not given all iframes will be styled
    *
    */

    function styleIframes(style_href, src_part) {

    if (!src_part) src_part = “”;

    var iframes_array = document.getElementsByTagName(“iframe”);
    var styled_iframes_array = new Array;

    for(var i = 0; i

  3. Martyn Says:
    October 20th, 2008 at 4:52 am

    Hi there

    was wondering if there was a variation to this so that if the parents style sheet was changed to an ALT style sheet then the child iframe would automatically pickup on the change/ or be forced to change to the currrent styles sheet

    Thanks

  4. Venkat Says:
    January 5th, 2009 at 10:49 am

    Cool post, i was searching for ages, thank you very much

  5. Michellea Says:
    March 11th, 2009 at 2:06 pm

    Is there way I can reference or call the complete CSS from the parent?

  6. Aaron Peters Says:
    December 9th, 2009 at 3:57 am

    How does your script handle conditionally commented stylesheets in the parent?

  7. Stoyan Says:
    December 9th, 2009 at 12:23 pm

    Hey Aaron, I haven’t tested for conditional comments, but if they show up in the collection:
    - document.getElementsByTagName(‘link’)
    or
    - document.styleSheets
    then chances are they could be picked up. Theoretically :)

  8. Steven_cd Says:
    September 20th, 2010 at 4:04 pm

    Is it possible to have the trigger for the action in the parent frame. In this case could there be a link in the parent that said “make my sun look like me!”?

  9. Performance Calendar » Blog Archive » Duplicates and near-duplicates Says:
    November 30th, 2010 at 2:47 pm

    [...] Even if you have iframes you don’t need to repeat the same JS/CSS in each frame, you can “borrow” them from the parent page, here’s an example. [...]

  10. zigomir Says:
    March 17th, 2011 at 10:48 am

    Thank’s dude!

Leave a Reply