title: Detect when an iframe is loaded
body: <p>I'm using an <code>&lt;iframe&gt;</code> (I know, I know, ...) in my app (single-page application with ExtJS 4.2) to do file downloads because they contain lots of data and can take a while to generate the Excel file (we're talking anything from 20 seconds to 20 minutes depending on the parameters).</p>
  
  <p>The current state of things is : when the user clicks the download button, he is "redirected" by Javascript (<code>window.location.href = xxx</code>) to the page doing the export, but since it's done in PHP, and no headers are sent, the browser  continuously loads the page, until the file is downloaded. But it's not very user-friendly, because nothing shows him whether it's still loading, done (except the file download), or failed (which causes the page to actually redirect, potentially making him lose the work he was doing).</p>
  
  <p>So I created a small non-modal window docked in the bottom right corner that contains the iframe as well as a small message to reassure the user. What I need is to be able to detect when it's loaded and be able to differenciate 2 cases : </p>
  
  <ul>
  <li>No data : OK => Close window</li>
  <li>Text data : Error message => Display message to user + Close window</li>
  </ul>
  
  <p>But I tried all 4 events (<a href="http://www.w3schools.com/jsref/dom_obj_event.asp">W3Schools doc</a>) and none is <strong>ever</strong> fired. I could at least understand that if it's not HTML data returned, it may not be able to fire the event, but even if I force an error to return text data, it's not fired.</p>
  
  <p>If anyone know of a solution for this, or an alternative system that may fit here, I'm all ears ! Thanks !</p>
  
  <p>EDIT : Added iframe code. The idea is to get a better way to close it than a <code>setTimeout</code>.</p>
  
  <pre><code>var url = 'http://mywebsite.com/my_export_route';
  
  var ifr = $('&lt;iframe class="dl-frame" src="'+url+'" width="0" height="0" frameborder="0"&gt;&lt;/iframe&gt;');
  ifr.appendTo($('body'));
  
  setTimeout(function() {
      $('.dl-frame').remove();
  }, 3000);
  </code></pre>