Copy CSS styles without additional HTTP requests

I’m working on an editor product for Plone that has a realtime preview in an iframe. In order to style the preview, I needed the same stylesheets loaded in that iframe as were in the parent window, but iframes don’t directly provide a way to do that. Enter Javascript.

A straightforward approach (and the first one I tried) would be to copy the stylesheet elements from the parent window to the iframe. To do that, I put this code in the <head> of the child document:

window.onload = function() {
  // Get a ref to the parent document's stylesheets.
  var parentdoc_ss = window.parent.document.styleSheets;
  var head = document.head;
  for (var i=0; i<parentdoc_ss.length; i++) {
    // For each stylesheet in the parent document, append a clone of it to the child.
    // NOTE: if you don't clone them, they'll disappear from the parent. Fun!
    document.head.appendChild(parentdoc_ss[i].ownerNode.cloneNode(true));
  }
}

The problem with that approach is that it can cause an additional HTTP request for each stylesheet. In practice, the original stylesheets may already be cached in the browser, on the server, or both. But even so, let’s see if we can copy the styles without making any HTTP requests.

window.onload = function() {
  // Get a ref to the parent document's stylesheets.
  var parentdoc_ss = window.parent.document.styleSheets;
  // Grab a stylesheet from the current document.
  if (document.styleSheets.length<1) {
    // If one doesn't exist, create it.
    document.head.appendChild(document.createElement("style"));
  }
  var ss = document.styleSheets[document.styleSheets.length-1];
  var rule_index = 0; // We'll need this to help us add the rules in order.
  for (var i=0; i<parentdoc_ss.length; i++) {
    for (var j=0; j<parentdoc_ss[i].cssRules.length; j++) {
      // Loop through the rules in each of the parent document's stylesheets.
      /* NOTE: IE doesn't support the cssRules property. It has "rules" instead.
              This is just a PoC so I'm not going to fix it for IE, but I'm confident it can be done.
      */
      var r = parentdoc_ss[i].cssRules[j];
      if (r.type == CSSRule.IMPORT_RULE) {
        // If the current rule is an @import, copy the rules from the stylesheet it imports.
        for (var k=0; k<r.styleSheet.cssRules.length; k++) {
          /* FIXME: Assuming a max depth of 1 import for now.
                    This should really be done recursively, but it's a PoC, so hey.
          */
          // Insert the rule from the parent doc's stylesheet into ours.
          ss.insertRule(r.styleSheet.cssRules[k].cssText, rule_index++);
        }
      } else {
        // Insert the rule from the parent doc's stylesheet into ours.
        ss.insertRule(r.cssText, rule_index++);
      }
    }
  }
}

This whole time I’ve been referencing iframes, but it really should work for any documents that share the same origin. While I only tested on Firefox 4, I wouldn’t be surprised if it worked on WebKit, too. It would definitely need tweaking for Internet Explorer.

While it’s easy enough to manipulate individual styles with Javascript, even with JQuery, I had to do a fair amount of research and trial-and-error before I had this nailed down on Firefox. I haven’t found any other documentation for copying styles without reloading the stylesheets themselves, so I hope someone finds this useful, at least for theory. If you have any suggestions or find a better approach, please leave a comment.