How can I know that an iframe has finished loading?

I used iframe to download file from my web application when a button is clicked.

Here is my code:

    iframe = document.createElement("iframe");
    iframe.src = "Report/ExportFile.aspx";
    iframe.style.display = "none";
    document.body.appendChild(iframe);

I want to call a function in the parent page (the one that includes the iframe), to stop my loading animation.

I need to know when the iframe finish loading, and the save/open dialog pops up in order to stop it.

I tried to stop the animation inside iframe.onload = function() { //close }, but the problem is that inside the iframe page load I have this code:

    Response.ContentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
    Response.AddHeader("content-disposition", "attachment;  filename=ExcelDemo.xlsx");
    Response.BinaryWrite(pck.GetAsByteArray());
    Response.Flush();
    Response.End(); 

so the page execution terminates.

Does anyone have a solution how can I know that the iframe has loaded?

Answers


I think you need to get some client side scripting involved:

$("#iFrameId").load(function (){ 
    // Do something, probably an AJAX request in your case
}); 

One solution is to have a method in the iframe javascript that you can call when the iframe is finished loading. Inside of this method, call a method on the parent page:

var iFrameLoaded = function () {
    parent.stopLoadingAnimation();
};

To continue loading the page after your code in iframe's page load, drop the Response.End() so that execution will continue.


you can see this, jquery iframeloaded.

function iframeLoaded() { alert("Iframe loaded!"); }

Good Luck!


Need Your Help

DT package: styleColorbar() not working on Android tablets

javascript android r shiny dt

I have developed an R shiny app using the excellent DT package to handle the datatables. One of the tables uses the styleColorbar helper function which produces coloured bars in table cells proport...