jQuery Clone Bug?


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>

(function($, window, document, undefined){
    framed = !!(window.location !== window.parent.location),
    cloneFromParent = (function(){
      var parentDoc = window.parent.document, childHead = $("head").get(0);
      return function(){
          // 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]);
          // 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]);
}(jQuery, this, this.document));

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