title: How to wait for iframe content to load using only javascript
body: <p>I am trying to create a printing functionality for a website that dynamically loads web pages into a pop-up window. The whole situation is a little weird so I will explain what I am doing exactly and if anyone has any suggestions on how I could do this process in a more efficient way, I am all ears.</p>
  
  <p>Because I have multiple web pages that need to be printed together and I cannot control what content I will be served, I decided that it would be best to load everything inside of iframes (mainly because many of the documents contain scripts and styles that would contaminate the rest if simply thrown onto a page together...)</p>
  
  <p>Because iframes are not flexible, I found the only way to figure out what size my iframes need to be, I have to render each web document by itself and record the height and then render each document in an iframe with the height that I initially recorded.</p>
  
  <p>So far I have gotten to the point at which I am ready to render each iframe on a single page, and am using the following code to create a new iframe element.</p>
  
  <pre><code>var body = popWindow.document.createElement("body");
  var iframe = popWindow.document.createElement("iframe");
  
  iframe.contentDocument.open();
  iframe.contentDocument.write(data);
  iframe.contentDocument.close();
  </code></pre>
  
  <p>The issue happens when I hit</p>
  
  <pre><code>iframe.contentDocument.open();
  </code></pre>
  
  <p>iframe is instantiated, but contentDocument appears to be null. I have tried to wait for this content to load, but it just sits and loops infinitely.</p>