'load' event not firing when iframe is loaded in Chrome 'load' event not firing when iframe is loaded in Chrome google-chrome google-chrome

'load' event not firing when iframe is loaded in Chrome


Unfortunately it is not possible to use an iframe's onload event in Chrome if the content is an attachment. This answer may provide you with an idea of how you can work around it.


I hate this, but I couldn't find any other way than checking whether it is still loading or not except by checking at intervals.

var timer = setInterval(function () {    iframe = document.getElementById('iframedownload');    var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;    // Check if loading is complete    if (iframeDoc.readyState == 'complete' || iframeDoc.readyState == 'interactive') {        loadingOff();        clearInterval(timer);        return;    }}, 4000);


You can do it in another way:

In the main document:

function iframeLoaded() {     $scope.$apply(function() {            $scope.exporting = false;  // this will remove the mask/spinner        });}var url = // url to my apivar e = angular.element("<iframe style='display:none' src=" + url + "></iframe>");angular.element('body').append(e);

In the iframe document (this is, inside the html of the page referenced by url)

    window.onload = function() {        parent.iframeLoaded();    }

This will work if the main page, and the page inside the iframe are in the same domain.

Actually, you can access the parent through:

window.parentparent//and, if the parent is the top-level document, and not inside another frametop          window.top

It's safer to use window.parent since the variables parent and top could be overwritten (usually not intended).