Tim van de Kerkhof Tim van de Kerkhof - 1 year ago 57
Javascript Question

Javascript still active when returning to previous page

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?

Answer Source

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.


  1. Reload the site when reached via browsers back button
  2. Cross-browser onload event and the Back button
  3. pageShow event in javascript
  4. Making sure a web page is not cached, across all browsers