'Hidden iframe onload event

I've seen some similar issues on here regarding the iframe onload, but nothing is working for me.

I have a hidden iframe that I use only for users to download a PDF that is dynamically created on my server. When the user clicks a button, the PDF is created on my server by pointing to a controller/action along with a query string of parameters.

This works great. However, I show a spinner and disable the UI when they press this button (BlockAndSpin function). I want to turn the hide the spinner and re-enable the UI when the PDF has been downloaded.

My onload method is never hit when I debug in Chrome and Firefox. I also tried to add the onload attribute to the iframe itself, and that didn't work either. The file downloads, but the UI stays the same and the onload event doesn't fire.

function downloadPOS(id) {
    var ifrm = document.getElementById(id)
    BlockAndSpin(true);
    ifrm.src = "/staticPOS/AddOrDownload" + GetPosQueryString();
    ifrm.onload = function () {
        BlockAndSpin(false);
    }
}

html

<iframe id="dlFrame" onload="BlockAndSpin(false);" style="display: none"></iframe>

Apparently this can't be done. My response is a .pdf being downloaded by the user and not loading anything into the iframe itself, thusly it never fires the event. I'll have to revisit how this is done.

Solution 1:^[1]

I ran into a similar issue attaching to messages on a hidden iframe. IE does not seem to like cross domain communication with "hidden" (display:none) iframes.

My workaround was to set the iframe to an absolute position with a left value of -9999px. Then it's effectively hidden and you can attach to it.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Joshua Ledgard

'Hidden iframe onload event

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]