Detect Browser Refresh in Javascript

Question

I am curious if there is a way to detect the browser refresh event in javascript specifically. We are using the jQuery.address plugin to provide forward and back button functionality to AJAX functions. The problem I am facing is that this plugin does not seem to detect if the user has refreshed the page.

This code is executed each time the user moves forward or back in the browser history. I would also like it to exexute when the user refreshes.

 $.address.init(function(event) {
}).change(function(event) {

        SummaryDiv.SwapPanels(newPanelID);
    }

Any ideas?

score 8 · Answer 1 · edited May 23 '17 at 12:16

Along these lines, I had a page whose behavior I didn't want to repeat if refreshed, so I changed the hash programmatically as described in this answer.

checkRefresh: function() {
    if (document.location.hash === '#visited') {
        console.log('Refreshed');
        return true;
    } else {
        document.location.hash = 'visited';
        return false;
    }
}

UPDATE

I found that at least Mobile Safari would ignore the hash if the refresh occurred automatically (e.g. page data expunged from cache before being viewed again). I ended up using a more complex solution described here.

score 5 · Accepted Answer · answered Jul 14 '10 at 15:48

5

A naive attempt of mine would be to simply store the current state into some cookie after each change and simply load them again on each page load.

answered Jul 14 '10 at 15:48

LukeN

5,590
1
25
33

This is how I would do it, without looking up other methods. But know that this method could be easily avoided/edited by the user. – Capt Otis Jul 14 '10 at 15:54
6

As could the whole website by disabled Javascript :) – LukeN Jul 14 '10 at 15:55

Capt Otis · Answer 3 · 2010-07-14T16:02:38.760

4

Found this on the web for you...

Has both a javascript clever method along with a cookies method.

http://www.tedpavlic.com/post_detect_refresh_with_javascript.php

edited Jul 14 '10 at 16:02

answered Jul 14 '10 at 15:57

Capt Otis

1,250
1
12
18

score 1 · Answer 4 · answered Jul 14 '10 at 15:42

1

On a page refresh, the javascript is also reloaded. So couldn't you specify what you want to happen directly in jQuery's ready method?

answered Jul 14 '10 at 15:42

kingjeffrey

14,894
6
42
47

score 1 · Answer 5 · answered Jul 26 '10 at 13:51

1

I was able to force the change event code to run on refresh by

  window.onload = $.address.update(function(){    
...
})

answered Jul 26 '10 at 13:51

Nick

19,198
51
185
312

Eugim · Answer 6 · 2022-12-30T23:59:47.883

In javascript you can do this:

page1.html

<script>
   localStorage.removeItem('setear1')
</script>

page2.html

<script>
    addEventListener('DOMContentLoaded', () => {
        let vengoDeLaPaginaAnterior = localStorage.getItem('setear1')
        if (vengoDeLaPaginaAnterior === null) {
            localStorage.setItem('setear1', 1)
        } else {
            document.location.href = 'page1.html'
        }
    })
</script>

then: if user refresh page, return to previus page.

Detect Browser Refresh in Javascript

6 Answers6

Linked