title: iframe onload fires when iframe is not ready
body: <p>So I have a problem in vanilla React.
  I have this line of code in the <code>ready()</code> function : </p>
  
  <pre><code>var current = this;    
  React.createElement(
              "iframe",
              {id: "iframeController", 
               ref: "iframe", 
               src: "data:text/html;charset=utf-8," + escape(notification.description), 
               onLoad: current.iframeLoaded(this)}
  )
  </code></pre>
  
  <p>the notification.description is from a maping that I do of an object in the <code>this.state.notifications</code></p>
  
  <p>and this function to follow it</p>
  
  <pre><code>iframeLoaded(iframe) {
      if(iframe) {
          iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";         
      }
  }
  </code></pre>
  
  <p>However, if I console.log the (iframe) element in iframeLoaded, it returns as null. Same thing if I getElementById, except then it's undefined.</p>
  
  <p>I did a setTimeout to see if its a component updating problem, and turns out it is. So the onLoad even in Chrome is firing before the src has the time to render.</p>
  
  <p>I'm trying to get the height so that I can set it in a window, allowing it to resize and take the full height of the iframe that I'm getting.</p>
  
  <p>Can anyone give my any tips on how to go about this?  </p>