title: Stop a jQuery load() event for iframe
body: <p>I'm using the jQuery load() event to load a page into an iframe. The page that is being loaded contains a script which access two API's and therefore take some time to load (~15-30 seconds). I want to add a button/link to the loading screen that you can click to cancel the load, otherwise you are unable to navigate away from the page. Currently, I have:</p>
  
  <pre><code>&lt;script&gt;
  function callIframe(url) {
      $('#analyticsloader').show();
      $('#analytics').html('&lt;iframe src="" allowtransparency="yes" style="width:735px;height:1510px;border:0;" id="analyticsiframe"&gt;&lt;/iframe&gt;');
      $('iframe#analyticsiframe').attr('src', url);
      $('iframe#analyticsiframe').load(function(){
          $('#analyticsloader').hide();
      });
  }
  $(function(){
      callIframe('analytics/index.php');
      var start, end;
      $('#updateStats').click(function(){
          start = $('#startDate').val();
          end = $('#endDate').val();
          callIframe('analytics/index.php?start='+start+'&amp;end='+end);
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><code>#analyticsloader</code> is a div with an ajax loader graphic and "Please wait while I load blah blah", I would like to add a Cancel button into it that would stop the load() function from executing.</p>