How to automatically reload a web page

Question

I want my website page to reload once when it has already opened for the first time. I wrote this function in my javascript file for that...

var i;
$(document).ready(function(){
    for ( i=0;i<1;i++){
        if(i===0){
            location.reload();
            break;
        }  
    }
});

But the page keeps reloading again and again as if the above function was a recursive one.
How do I do this?

P.S I'm doing it because of this issue.

Your problem is that once the page is reloaded - the `i` variable goes back to 0 (and you will get into a loop). You can use cookie/localstorage to save the fact the the page was already loaded once (to prevent from loading it again). Why are you doing this?! — Dekel, Dec 25 '16 at 15:22
It's not recursive, just every time it loads again it fires a new `ready` — MotKohn, Dec 25 '16 at 15:23
dont use loop .. just reload the page when the page completely loads .. In ready event function or in load event function — Daniyal Awan, Dec 25 '16 at 15:25
With local storage you can store data locally within the user's browser. If you store a flag ('firstLoad') before you reload the window, you can check to see if that flag exists once the window reloads before trying again. — Matthew Meppiel, Dec 25 '16 at 15:26
Reloading a page immediately after it loads "should never" be necessary.. if you have a user base, they will not be happy about the page reloading twice. — Mottie, Dec 25 '16 at 15:32
Sure thing. Feel free to mark as answer. Why are you trying to reload the page once though? I have to agree with the other comments...this breaks the user experience. — Matthew Meppiel, Dec 25 '16 at 15:33
@MatthewMeppiel read the edited link... I'm having a lot of trouble with it — , Dec 25 '16 at 15:40

score 3 · Accepted Answer · edited Dec 25 '16 at 15:51

3

<script type='text/javascript'>
  (function() {
    if( window.localStorage ) { 
      if( !localStorage.getItem('firstLoad') ) { 
        localStorage['firstLoad'] = true;
        window.location.reload(); 
      } else 
        localStorage.removeItem('firstLoad'); 
    } 
  })();
</script>

edited Dec 25 '16 at 15:51

Dekel

60,707
10
101
129

answered Dec 25 '16 at 15:32

Matthew Meppiel

966
3
14
29

Could you add a explanation? It makes sense to people who have been following the thread, but not so much to anyone who stumbles on this later. – perryprog Dec 25 '16 at 15:48

ZombieTfk · Answer 2 · 2016-12-25T15:39:14.207

1

You must either set a cookie (or use javascript's localStorage), or use xhr to retrieve a value held on a remote server.

If you want to use cookies, it's as simple as

document.cookie = "username=John Doe";

where the document.cookie is a query string of the form (x=y;a=b;n=z)

If you want the page to reload every time the user vists, be sure to unset the cookie once you've done any necessary processing when a page reload has been set.

edited Dec 25 '16 at 15:39

answered Dec 25 '16 at 15:24

ZombieTfk

706
7
19

A cookie is not the same as localStorage. – Mottie Dec 25 '16 at 15:28
A cookie is not local storage? – ZombieTfk Dec 25 '16 at 15:28
Cookies are saved locally, but it is not the same as [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) – Mottie Dec 25 '16 at 15:29
I'll accept that localStorage is different from local storage, but local storage as a concept definately applies to cookies. I'll update the answer appropriately so there is no confusion. – ZombieTfk Dec 25 '16 at 15:33
Thanks, I commented because I thought there would be some confusion, especially for new users. – Mottie Dec 25 '16 at 15:35
I didnt even know about localStorage myself ! Nice catch ty – ZombieTfk Dec 25 '16 at 15:37

score 1 · Answer 3 · answered Dec 25 '16 at 15:25

Here is what's happening:

The page loads for the first time, jQuery calls any handlers on the document.ready event
The page reloads
The document.ready call is made again
repeat

Out of curiosity, why would you want to do that? And why do you have a for loop that will run for one iteration?

Also, to answer your question as far as I know the only way to make sure the page doesn't reload is use a cookie that lasts for about 5 seconds. Then, on document.ready check for that cookie and if it exists then don't reload.

score 0 · Answer 4 · answered Dec 25 '16 at 15:29

0

$( window ).load(function() {
    if (window.location.href.indexOf('reload')==-1) {
         window.location.replace(window.location.href+'?reload');
    }
});

answered Dec 25 '16 at 15:29

Daniyal Awan

107
5

Clever, but it would be better to set `window.location.search` instead of adding the string to the end of `href`. – Mottie Dec 25 '16 at 15:42

score 0 · Answer 5 · answered Feb 28 '21 at 08:12

0

Code is ok. But if the page is opened from another page with a link to an id (.../page.html#aa) the code only works with firefox. With other browsers reload the page without going to id. (Sorry for my english).

answered Feb 28 '21 at 08:12

Luigino

1
1

Consider explaining why this issue is present with the other answers and suggest a solution. – User1010 Feb 28 '21 at 09:38

score 0 · Answer 6 · answered Mar 06 '21 at 18:29

I found the solution with this code. It is assumed that the page is refreshed no earlier than one hour. Otherwise, add minutes to the oggindex variable.

<script>
var pagina = window.location.href; 
var d = new Date();
var oggiindex = d.getMonth().toString()+'-'+d.getDate().toString()+'-'+d.getHours().toString();
if (localStorage.ieriindex != oggiindex)
    {
    localStorage.setItem("ieriindex", oggiindex);
    window.location.replace(pagina);
    }
 </script>

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

Yours code executed each time $(document).ready(), so it's not surprise that your loop is infinity - each load finished as ready state.

If you give more detailed requirements we can solve it with no using window object as data holder. It's bad way but you can set it for test.

Window object stores variables not depend on reload because it's higher then document.

Let's try:

if( window.firstLoad == undefined  ){
    // yours code without any loop
    // plus:
    window.firstLoad = false;
}

You can make it with localStorage API.

Check this link also, it's giving more information about window object variables: Storing a variable in the JavaScript 'window' object is a proper way to use that object?

How to automatically reload a web page

7 Answers7