jQuery Clone Bug?

Background

This page (the parent) contains an <iframe> (the child). The <iframe> uses jQuery to find relevant <script>'s and stylesheet <link>'s sourced in the <head> of the parent, and attempts to add those resources to the <head> of itself. In other words, <script>'s and <link>'s found in the parent are dynamically added to the child using jQuery.

What happens?

Things work fine as expected in IE8+, FF3+, Chrome and Safari -- in these cases, I see that the <script>'s and CSS related <link>'s are correctly found, cloned and appended to the <head> of the child <iframe>. In IE6 and IE7, the same code fails to properly clone() and append() any associated <link>'s from the parent into the child. Note that <script>'s work fine, but IE6 and IE7 reports an "illegal argument" error inside of jQuery when cloning and appending a <link>.

What should happen?

I would expect to see all scripts and styles in the parent, cloned and appended to the <head> of the <iframe> in IE6 and IE7. I certainly understand that an error inside of jQuery does not necessarily mean a bug in jQuery. However, the same code seems to work elsewhere, and jQuery claims support for IE6+ so I assumed I shouldn't see an error.

What jQuery version am I using?

I only tried with 1.6.1, the latest as of June 3rd, 2011.

The child <iframe>

The child's JavaScript

The JavaScript in the child used to clone scripts and stylesheets from the parent into itself:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script>
(function($, window, document, undefined){
 var
    framed = !!(window.location !== window.parent.location),
    cloneFromParent = (function(){
      var parentDoc = window.parent.document, childHead = $("head").get(0);
      return function(){
        if(framed){
          // Snag all scripts from the window.parent.document and add them
          // to this document, the child iframe.
          // WORKS IN IE6+, FF3+, CHROME, SAFARI
          var scripts = $("script", parentDoc);
          for(var i=0, l=scripts.length; i<l; i++){
            var script = $(scripts[i]);
            $(childHead).append(script.clone(true));
          }
          // Snag all stylesheets from window.parent.document and add them
          // to this document, the child iframe.
          // WORKS IN IE8+, FF3+, CHROME, SAFARI
          var stylesheets = $("link[rel='stylesheet']", parentDoc);
          for(var i=0, l=stylesheets.length; i<l; i++){
            var stylesheet = $(stylesheets[i]);
            // DOES NOT WORK IN IE6 AND IE7 -- PRODUCES AN ILLEGAL ARGUMENT ERROR
            $(childHead).append(stylesheet.clone(true));
          }
        }
      };
    }());
 cloneFromParent();
}(jQuery, this, this.document));
</script>
 

Why no JSFiddle?

I know you'd probably prefer JSFiddle, but I tried to reproduce this bug in their enviornment and couldn't get things to fit together correctly so I gave up.

Mark S. Kolich@markkolich – June 3rd, 2011