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 hermes replica jewelry of it to the child.
    // NOTE: if you don't clone them, they'll disappear from the parent. Fun!

The problem with that approach is that it can cause cartier love bracelet ebay fake
an additional HTTP bracelet replica cartier 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.
  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 cartier bracelet of anastasia steele actress
 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 fake cartier bracelet 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 discount cartier bracelet 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 cartier nail bracelet
or find a better approach, please leave a comment.

2 thoughts on “Copy CSS styles without additional HTTP requests”

  1. (Translated by Google).


    In my development, IFRAMES are used continuously, and I have the same problem again called CSS and JS among all IFRAMES.

    This piece of code I find it very useful to avoid extra requirements.

    I have not tested the code, but I was wondering … Can you do the same to clone / copy all requests ?

    Since this article is already one year … brings some collateral problem use? Is there any improvement / optimization you can share?

Comments are closed.