Capture reload/endrequest event after server redirect to download file

问题

Inside a webpage I have an Excel download button, which redirects to a webpage that serves the requested Excel file via the application/ms-excel MIME type, which usually results in a file download in the browser.

In the webpage, I have the following jQuery code:

$(document).ready(function () {
    $(".div-export .button").click(function () { setBusy(true); });
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () { 
        setBusy(false);
    });
});

Which displays a busy animation while the user waits for the Excel file to be served.

Problem is: The animation doesn't end (setBusy(false);) after the file download, because the endRequest event doesn't get fired, probably because of the server redirect.

Does anyone have a workaround for this?

Edit: The download button is handled in an UpdatePanel.

回答1:

Instead of using a server redirect, I've decided to use a javascript document redirect that is triggered after the mouse cursor is reset. To do this, I've included a hidden field that holds the url:

<asp:HiddenField id="hidExportUrl" runat="server" EnableViewState="false" />

Which is handled by the client-side end_request handler:

$(document).ready(function () {
    $(".div-export .button").click(function () { setBusy(true); });

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () { 
        setBusy(false);

        var url = $("[id$='hidExportUrl']").val();

        if (url && url != "") {
            $("[id$='hidExportUrl']").val("");
            window.location = url;
        }
    });
});

回答2:

If for instance you have a popup, defined:

var myWindow = window.open("/MyPopup.aspx, "myWindow",
"height=550,width=780,top=100,left=100"); 

Try something like:

$(myWindow).bind('unload', function(){setBusy(false)}); 

来源：https://stackoverflow.com/questions/2551275/capture-reload-endrequest-event-after-server-redirect-to-download-file