title: DOM Events - Progress Indicator for Iframe location change
body: <p>I am looking for a solution to show a progress indicator when an iframe page changes, <em>but prior to the iframe loading completely</em>.</p>
  <p>There are 100's of pages on Stack Overflow going over the differences between <em>jQuery <code>ready()</code>, JavaScript <code>window.load</code>, <code>document.load</code>, <code>DOMContentReady</code>, <code>on('pageinit'...)</code></em> and after reading the differences on all these various techniques I'm now a bit stuck on how to accomplish trapping the event within the iframe.</p>
  <p>So far I have only succeeded in capturing when the iframe has changed once the DOM is built.  I would like to be able to detect when a page is about to load so I could have some sort of indicator/spinner in my header.</p>
  <p>This is what I have so far (capturing the iframe change on the <code>onload</code>):</p>
  <pre><code>.....
  &lt;iframe id=&quot;rssID&quot; src=&quot;http://feeds.reuters.com/reuters/oddlyEnoughNews&quot;
     onload=&quot;blerg()&quot; style=&quot;width: 800px; height:600px&quot;/&gt;
  ......
  $(document).on('pageinit','#index', function(){
        alert('pageinit');  //gets called on first load
      
  });
  $(document).on('pageinit','#rssID', function(){
        alert('pageinit rssFeed'); //nothing happens.
  });
  function blerg() {
      var myIframe = document.getElementById(&quot;rssID&quot;);
      myIframe.onload = func;
  };
  
  function func() {
     alert(&quot;changed&quot;);
  }
  </code></pre>
  <ul>
  <li><a href="http://jsfiddle.net/Gdxvs/" rel="nofollow noreferrer">http://jsfiddle.net/Gdxvs/</a></li>
  </ul>
  <p>It would appear that <code>pageinit</code> is the correct path but I have no idea on how to trap that within an iframe.  I would prefer <em>not using jQuery</em>, but I'm not sure that is possible without huge amounts of code.</p>
  <p>One final:  Do I need to use a <code>die(&quot;pageinit&quot;);</code></p>