One time page refresh after first page load

Question

I would like to implement a JavaScript code which states this: if the page is loaded completely, refresh the page immediately, but only once. I'm stuck at the "only once":

window.onload = function () {window.location.reload()}

this gives a loop without the "only once". jQuery is loaded if this helps.

What are you accomplishing by reloading the page? There may be a better way to solve the problem. — FishBasketGordo, Aug 08 '11 at 16:46
there is a jquery fullscreen gallery script starting on the page, but the thumbs are never loaded completely. if you hit the "refresh" button for the page it just loads the remaining ones... so it's clear that I'm searching for some kind of workaround... giving the thumbs seperately is too complicated (CMS), other bugfixes didn't really help... It's 4 MB of images, approx. 300kb each, at some point the thumbs of the images are not resized and displayed anymore (timeout? too much, too big??) but the page finishes loading. — Martin, Aug 08 '11 at 16:52
I have experienced a similar problem (javascripts not working) when using pjax http://pjax.heroku.com/. — Pratik Khadloya, Jan 07 '12 at 21:30

score 116 · Answer 1 · answered Aug 08 '11 at 16:53

116

I'd say use hash, like this:

window.onload = function() {
    if(!window.location.hash) {
        window.location = window.location + '#loaded';
        window.location.reload();
    }
}

answered Aug 08 '11 at 16:53

Cokegod

8,256
10
29
47

yep. i was just gonna suggest that. – p3drosola Aug 08 '11 at 16:58
yeah, similar to my suggestion of using a $_GET parameter, but a little easier since accessing the hash in JS is easier than accessing the $_GET param... – maxedison Aug 08 '11 at 17:07
4

This is the simplest as long as there aren't already hashes in the URLs. In which case, reading a GET parameter would be better. – David Aug 08 '11 at 17:53
How can you do this without appending the url? – zero_cool Aug 11 '14 at 18:18
clever solution! love it! ❤ – anu Sep 25 '18 at 09:08
This is not working while navigating through tabs – Murat Colyaran Oct 05 '21 at 11:22

score 78 · Answer 2 · answered Mar 03 '15 at 19:47

78

When I meet this problem, I search to here but most of answers are trying to modify existing url. Here is another answer which works for me using localStorage.

<script type='text/javascript'>

(function()
{
  if( window.localStorage )
  {
    if( !localStorage.getItem('firstLoad') )
    {
      localStorage['firstLoad'] = true;
      window.location.reload();
    }  
    else
      localStorage.removeItem('firstLoad');
  }
})();

</script>

answered Mar 03 '15 at 19:47

Haimei

12,577
3
50
36

Creative solution. – JoJo Feb 12 '20 at 13:05
@Haimei Thx a lot __/\ __ – Pradeep kumar Nov 11 '20 at 00:12
For anyone wondering, this reloads the page once without adding to or amending the original URL – fromtheloam Mar 04 '21 at 08:09
This is perfect. Thanks! – Murat Colyaran Oct 05 '21 at 11:21

Thusitha Sumanadasa · Answer 3 · 2017-04-24T03:05:52.283

<script type="text/javascript">
$(document).ready(function(){    
    //Check if the current URL contains '#'
    if(document.URL.indexOf("#")==-1){
        // Set the URL to whatever it was plus "#".
        url = document.URL+"#";
        location = "#";

        //Reload the page
        location.reload(true);
    }
});
</script>

Due to the if condition the page will reload only once.I faced this problem too and when I search ,I found this nice solution. This works for me fine.

Areeg Samir · Answer 4 · 2013-09-28T06:09:37.907

Check this Link it contains a java-script code that you can use to refresh your page only once

http://www.hotscripts.com/forums/javascript/4460-how-do-i-have-page-automatically-refesh-only-once.html

There are more than one way to refresh your page:

solution1:

To refresh a page once each time it opens use:

<head>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
</head>

sollution2:

<script language=" JavaScript" >
<!-- 
function LoadOnce() 
{ 
window.location.reload(); 
} 
//-->
</script>

Then change your to say

<Body onLoad=" LoadOnce()" >

solution3:

response.setIntHeader("Refresh", 1);

But this solution will refresh the page more than one time depend on the time you specifying

I hope that will help you

score 6 · Answer 5 · answered Mar 16 '20 at 14:02

6

<script>

function reloadIt() {
    if (window.location.href.substr(-2) !== "?r") {
        window.location = window.location.href + "?r";
    }
}

setTimeout('reloadIt()', 1000)();

</script>

this works perfectly

answered Mar 16 '20 at 14:02

Godwin Tommy

71
1
4

Note: 1000 means 1 second you can set it to whatever time intervals you want. – Godwin Tommy Mar 16 '20 at 14:05

score 4 · Answer 6 · answered May 24 '18 at 14:11

Finally, I got a solution for reloading page once after two months research.

It works fine on my clientside JS project.

I wrote a function that below reloading page only once.

1) First getting browser domloading time

2) Get current timestamp

3) Browser domloading time + 10 seconds

4) If Browser domloading time + 10 seconds bigger than current now timestamp then page is able to be refreshed via "reloadPage();"

But if it's not bigger than 10 seconds that means page is just reloaded thus It will not be reloaded repeatedly.

5) Therefore if you call "reloadPage();" function in somewhere in your js file page will only be reloaded once.

Hope that helps somebody

// Reload Page Function //
                function reloadPage() {
                    var currentDocumentTimestamp = new Date(performance.timing.domLoading).getTime();
                    // Current Time //
                    var now = Date.now();
                    // Total Process Lenght as Minutes //
                    var tenSec = 10 * 1000;
                    // End Time of Process //
                    var plusTenSec = currentDocumentTimestamp + tenSec;
                    if (now > plusTenSec) {
                        location.reload();
                    }
                }


                // You can call it in somewhere //
                reloadPage();

score 3 · Answer 7 · answered Jul 01 '12 at 20:19

i put this inside my head tags of the page i want a single reload on:

<?php if(!isset($_GET['mc'])) {
echo '<meta http-equiv="refresh" content= "0;URL=?mc=mobile" />';
} ?>

the value "mc" can be set to whatever you want, but both must match in the 2 lines. and the "=mobile" can be "=anythingyouwant" it just needs a value to stop the refresh.

score 3 · Answer 8 · edited May 04 '21 at 11:43

3

Use window.localStorage... like this:

var refresh = window.localStorage.getItem('refresh');
console.log(refresh);
if (refresh===null){
    window.location.reload();
    window.localStorage.setItem('refresh', "1");
}

It works for me.

edited May 04 '21 at 11:43

Alexander Wigmore

3,157
4
38
60

answered Apr 08 '17 at 16:37

Darmawansyah Developer

51
3

score 1 · Answer 9 · answered Jul 28 '17 at 03:08

1

After </body> tag:

<script type="text/javascript">
if (location.href.indexOf('reload')==-1)
{
   location.href=location.href+'?reload';
}
</script>

answered Jul 28 '17 at 03:08

Vlad Webster

11
1

score 1 · Answer 10 · answered May 06 '21 at 15:08

1

You can make one verable once = false then reload your page with if else like if once == false reload page an make once true.

answered May 06 '21 at 15:08

Meer Mustan

21
4

score 1 · Answer 11 · answered Feb 24 '23 at 11:45

I got the Answer from here and modified it.This is the perfect solution for me.

var refresh = window.localStorage.getItem('refresh');
console.log(refresh);
setTimeout(function() {
if (refresh===null){
    window.location.reload();
    window.localStorage.setItem('refresh', "1");
}
}, 1500); // 1500 milliseconds = 1.5 seconds

setTimeout(function() {
localStorage.removeItem('refresh')
}, 1700); // 1700 milliseconds = 1.7 seconds

score 0 · Answer 12 · edited Feb 08 '13 at 10:36

0

Try with this

var element = document.getElementById('position');        
element.scrollIntoView(true);`

edited Feb 08 '13 at 10:36

kleopatra

51,061
28
99
211

answered Feb 08 '13 at 10:18

user2053927

1

score 0 · Answer 13 · answered Aug 12 '13 at 14:29

0

Please try with the code below

var windowWidth = $(window).width();

$(window).resize(function() {
    if(windowWidth != $(window).width()){
    location.reload();

    return;
    }
});

answered Aug 12 '13 at 14:29

Nithun Aravind

1

score 0 · Answer 14 · answered Apr 10 '19 at 02:03

Here is another solution with setTimeout, not perfect, but it works:

It requires a parameter in the current url, so just image the current url looks like this:

www.google.com?time=1

The following code make the page reload just once:

 // Reload Page Function //
    // get the time parameter //
        let parameter = new URLSearchParams(window.location.search);
          let time = parameter.get("time");
          console.log(time)//1
          let timeId;
          if (time == 1) {
    // reload the page after 0 ms //
           timeId = setTimeout(() => {
            window.location.reload();//
           }, 0);
   // change the time parameter to 0 //
           let currentUrl = new URL(window.location.href);
           let param = new URLSearchParams(currentUrl.search);
           param.set("time", 0);
   // replace the time parameter in url to 0; now it is 0 not 1 //
           window.history.replaceState({}, "", `${currentUrl.pathname}?${param}`);
        // cancel the setTimeout function after 0 ms //
           let currentTime = Date.now();
           if (Date.now() - currentTime > 0) {
            clearTimeout(timeId);
           }
          }

The accepted answer uses the least amount of code and is easy to understand. I just provided another solution to this.

Hope this helps others.

score 0 · Answer 15 · answered Oct 08 '21 at 21:16

React Hook worked for me.

import { useEffect, useState } from 'react';

  const [load, setLoad] = useState(false);

  window.onload = function pageLoad() {
      if (load) {
        window.location.reload(true);
        setLoad(false);
      }
    };

score 0 · Answer 16 · answered Aug 08 '11 at 17:06

You'd need to use either GET or POST information. GET would be simplest. Your JS would check the URL, if a certain param wasn't found, it wouldn't just refresh the page, but rather send the user to a "different" url, which would be the same URL but with the GET parameter in it.

For example:
http://example.com -->will refresh
http://example.com?refresh=no -->won't refresh

If you don't want the messy URL, then I'd include some PHP right at the beginning of the body that echos a hidden value that essentitally says whether the necessary POST param for not refreshing the page was included in the initial page request. Right after that, you'd include some JS to check that value and refresh the page WITH that POST information if necessary.

بلقيس خنفر · Answer 17 · 2022-05-15T16:52:54.147

0

nothing work for me perfectly except this, -added to my JavaScript file-:

function LoadOnce() {
if (localStorage.getItem('executed') == 'false') {
window.location.reload()
localStorage.setItem('executed', true)
}
}

setTimeout(function () {
LoadOnce()
}, 100)

and in the previous page I wrote:

localStorage.setItem('executed', false)

edited May 15 '22 at 16:52

answered May 15 '22 at 15:42

بلقيس خنفر

1
1

score -1 · Answer 18 · answered Feb 10 '16 at 13:26

-1

        var foo = true;
        if (foo){
            window.location.reload(true);
            foo = false;

        }

answered Feb 10 '16 at 13:26

Ben Bieler

1,518
1
14
22

score -1 · Answer 19 · answered Jul 28 '16 at 10:12

-1

use this

<body onload =  "if (location.search.length < 1){window.location.reload()}">

answered Jul 28 '16 at 10:12

bakchod_launda

19
8

score -2 · Answer 20 · answered Feb 11 '16 at 11:42

-2

Use rel="external" like below is the example

<li><a href="index.html" rel="external" data-theme="c">Home</a></li>

answered Feb 11 '16 at 11:42

Jay Bharat

33
3

One time page refresh after first page load

20 Answers20

Linked

Related