Stop a jQuery load() event for iframe

Question

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:

<script>
function callIframe(url) {
    $('#analyticsloader').show();
    $('#analytics').html('<iframe src="" allowtransparency="yes" style="width:735px;height:1510px;border:0;" id="analyticsiframe"></iframe>');
    $('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+'&end='+end);
    });
});
</script>

#analyticsloader 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.

Answer 1

the answer to your question might be here:

How to cancel a jquery.load()?