A way to determine file is loaded in iframe

Question

I've got a problem: I would like to catch a moment when the Save File dialog is closed or my csv file generated on the server is loaded (to hide a spinner for loading). I know there is no such event in the Javascript. I definitely don't want to add cookies for such a minor issue on the backend so I would like to implement another workaround. The only way out I see is iframe but as far as I can see event listeners like onload doesn't work in case of attachment header in Chrome at least. I've also tried to implement a kind of timer checking for iframe status but it worked right after request for file was sent. File is generated on server in some seconds (10-20) so this solution doesn't fit my goals.

I'm using Angular on the frontend so any solution compatible (vanilla JS, jQuery, Angular itself) will be a great help for me. Hope to get any. Thank you, guys!

Answer 1

There is no DOM event, which am aware of here, which is fired when Save file UI dialog is opened or closed.

You can try utilizing focus event to catch when the Save file dialog is closed and window regains focus after calling .click() on <a> element having download attribute set, though the approach is not completely reliable.

// append or display spinner element here
var csvUrl = document.createElement("a"); 
csvUrl.href = url; 
csvUrl.download = "csv_filename"; 
csvUrl.click();
window.onfocus = function () { 
  document.body.removeChild(csvUrl); 
  // remove or hide spinner element here 
  window.onfocus = null; 
}