Javascript still active when returning to previous page

Question

We have a page where users can link their Facebook account to our site. Since the process can take a while I decided to blur the container div and add a loading icon once the user presses the 'Connect with Facebook' button, using the following bit of Javascript:

$(function() {
    $('#linkedin').click(function() {
        $('#loading-button').css('display', 'block');
        $('.feature-container').css('filter', 'blur(1px)');
    });
});

Once the user gets redirected to the next page, and decides to go back to the previous page by pressing the last page button in their browser (meaning that the browser does not make a GET request), the blur and loading icon will still be active.

How can I make it so that the Javascript will not be active, even after the user pressed the last page button in the browser? Is this even possible?

Once the login is complete can you revert your css changes before the redirect? — ykay says Reinstate Monica, May 11 '16 at 09:27

score 1 · Accepted Answer · edited May 23 '17 at 12:31

You can reset the css after the user go back to your site:

window.onpageshow = function(e){
  $('#loading-button').css('display', 'none');
  $('.feature-container').css('filter', 'none');
}

The onpageshow event is fired every time the user navigates to your page, even from cache:

The onpageshow event is similar to the onload event, except that it occurs after the onload event when the page first loads. Also, the onpageshow event occurs every time the page is loaded, whereas the onload event does not occur when the page is loaded from the cache.

Refs:

Javascript still active when returning to previous page

1 Answers1