title: How can I handle errors in loading an iframe?
body: <p>I have an <code>&lt;iframe&gt;</code> that other sites can include so their users can <code>POST</code> a form back to my site. I'd like to handle gracefully the cases where my site is down or my server can't serve the <code>&lt;iframe&gt;</code> contents (that is, a response timeout or a 4xx or 5xx error).  I tried adding an <code>onError</code> to the <code>&lt;iframe&gt;</code> object, but that didn't seem to do anything:</p>
  
  <pre><code>showIFrame = function() {
    var iframe = document.createElement('iframe');
    iframe.id = 'myIFrame';
    iframe.src = 'http://myserver.com/someURLThatFailsToLoad';
    iframe.onError = iframe.onerror = myHandler;
    document.body.appendChild(iframe);
  };
  
  myHandler = function(error) {
    document.getElementById('myIFrame').style.display = 'none';
    console.error('Error loading iframe contents: ' + error);
    return true;
  };
  </code></pre>
  
  <p>If my server returns a <code>404</code> I just get the contents of the not-found page in my <code>&lt;iframe&gt;</code>. In fact, that error handler isn't ever triggered. Is there a way to make this work?</p>
  
  <p>(I'm currently testing in Chrome, but I'd like it to also work for FF and IE >= 7.)</p>