title: Adding parent window's CSS to child window using javascript
body: <p>I'm trying to generate a pop-up window with a printable version of a small portion of the  main window. I'm using Meteor, so the HTML and CSS files are all programmatically generated.</p>
  
  <p>What I'd like to do is use Javascript to read all the linked CSS files in the parent window and append them to the child window. </p>
  
  <pre class="lang-js prettyprint-override"><code>var childWindow = window.open("", "_blank", "width=350,height=150");
  var childDoc    = childWindow.document;
  var childHead   = childDoc.getElementsByTagName("head")[0];
  
  $('link').each(function(index,element){
    childLink = childDoc.createElement("link");
    childLink.rel  = "stylesheet";
    childLink.href = element.href;
    childHead.appendChild(childLink);
  });
  childDoc.write(myHtml);
  </code></pre>
  
  <p>But its not working. It appears that <code>childHead</code> is referring to the head of the parent document, not the child. I'm not sure if this is a security thing I'm running afoul of or just have a mistake in the code.</p>
  
  <p>Any ideas what I'm doing wrong?</p>