beforeunload event and Content-Disposition=attachment

Question

I recently add on my code something like this:

$(window).on('beforeunload', function () {
    $('.whirly-loader').show(); //SPINER
})

So anytime the user go to another side of my web the spinner show up. And it works most of the time. But, in some part of the app the client start going another side and the server response with this headers:

Cache-Control
    max-age=0, must-revalidate, private
Connection
    Keep-Alive
Content-Disposition
    attachment;filename=suministro.csv
Content-Type
    text/csv; charset=utf-8
[...]

This prevents the reload of the page and only show up the window to ask to download or open the document. My problem is the spinner still show up even if the page stop load

Which should be the event to hide my spinner even if the page don't reload because of the headers?

I don't think there is any event you could listen to for this. At most you could try and set a timeout, and disable your spinner again after a while, if no new page was loaded. Or, if you know which ways to "leave" the page trigger such a specific response, you could try to somehow determine that (click handlers on the respective links/submit buttons), and in those cases not show the spinner to begin with. — CBroe, Dec 20 '21 at 07:34
Browsers already show progress indicators. Don't make your own. This is bad UX practice and shouldn't be done. — Brad, Dec 24 '21 at 06:49

score 0 · Answer 1 · answered Dec 17 '21 at 08:21

0

You can add attribute target for download links.

Example:

<body onbeforeunload="document.body.style.backgroundColor = 'red';">
    <a href="output.zip" target="_blank">Download</a>
</body>

Attribute target="_blank" will cause, that onbeforeload event will not fire.

answered Dec 17 '21 at 08:21

Lanki

150
1
10

The problems are there is no always a button. In the other hand it's a really big big site and I search a generic solution – Efeyabel Dec 17 '21 at 08:35

score 0 · Answer 2 · answered Dec 20 '21 at 07:59

We had a similar problem and came to the solution to do magic (in your case, show a spinner) manually, like:

$('.js-show-spinner').addEventListener('click', event => {
  event.preventDefault();
  $('.whirly-loader').show(); //SPINER
});

<a href="https://google.com">google.com</a>
<a class="js-show-spinner" href="/home">Home</a>
<a href="SOME_DOC" download>some doc</a>

andman · Answer 3 · 2021-12-21T12:20:27.337

This jquery plugin uses the window object to bind it's beforeunload event to the body element making it easy to implement and offer a a generic solution.

;(function($, window, document){

  $.fn.plgn = function() {

    //Start the loader when the event beforeunload
    $(window).on('beforeunload', function(event){
      event.stopPropagation();
      console.log("whirly-loader show");

      //Hide the loader after 5 seconds if the page fails to load
      setTimeout(function(){
        console.log("whirly-loader hide");  
      }, 5000);
    });

  }

})(jQuery, window, document);

//Start the loader as soon as javascript loads
console.log("whirly-loader show");

$( document ).ready(function() {
  //Hide the loader when the page is completely loaded
  console.log("whirly-loader hide");
  $("body").plgn();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value = "Refresh page" onclick="window.location.reload();" />

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Dec 21 '21 at 13:03

beforeunload event and Content-Disposition=attachment

3 Answers3