1

I have an IFrame on page. There is a button on the parent page that submits the IFrame. I have a handler for the submit event that shows a ProgressBar Image on the parent page when the form is submitting. This part is all working fine, so that image shows up when the form starts submitted back to the server.

Now what happens is on the server an Excel file is generated and then downloaded back to the client. What I need to do is know when the image has finished downloading to the client, so that I can hide that ProgressBar image back on the parent page.

I don't know what event I can tap into to know when the IFrame has finished posting back from the server and the file is available for download.

I have the following code in the IFrame

$(document).ready(function () {
                window.parent.$('#ExportWait').addClass('hidden');

                var iframe = window.frameElement;

                if (iframe) {
                    iframe.contentDocument = document;//normalization: some browsers don't set the contentDocument, only the contentWindow

                    var parent = window.parent;
                    $(parent.document).ready(function () {//wait for parent to make sure it has jQuery ready
                        var parent$ = parent.jQuery;

                        parent$(iframe).trigger("iframeloading");

                        $(function () {
                            parent$(iframe).trigger("iframeready");
                        });

                        $(window).load(function () {//kind of unnecessary, but here for completion
                            parent$(iframe).trigger("iframeloaded");
                        });

                        $(window).unload(function (e) {//not possible to prevent default
                            parent$(iframe).trigger("iframeunloaded");
                        });

                        $(window).on("beforeunload", function () {
                            parent$(iframe).trigger("iframebeforeunload");
                        });
                    });
                }

                $("form").submit(function (e) {
                    //console.log('Here We Are');
                    //alert('Exporting');
                    //window.parent.$('#ExportWait').removeClass('hidden');

                    return true;
                });
            });

And I have the following code in the parent window

$(document).ready(function () {
    $("iframe").on("iframeloading iframeready iframeloaded iframebeforeunload iframeunloaded", function (e) {
        console.log(e.type);
    });
});

I can see the following in the console iframeloading iframeready iframeloaded ----These 3 are from when the page and IFrame first loads, so I don't care about any of these ----Then when I do the Export I see iframebeforeunload

But that is all that I see I never see when the file has finished downloading.

Paul Cavacas
  • 4,194
  • 5
  • 31
  • 60
  • Use Ajax plus success-callback-function. Here is an example: http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery –  Oct 09 '13 at 13:34
  • But that example works for uploading file, I need to do the postback because on the server I'm generating a file and streaming the file back to the client, so I can't use AJAX post since that won't handle the file on the receiving side. – Paul Cavacas Oct 09 '13 at 15:03
  • Sure it would. If you need to provide it for download, create a data scheme URI once it's completed downloading from the server. You can even set the current URL to that data URI automatically to initiate the download... – Kiruse Oct 09 '13 at 16:54

0 Answers0