[javascript] One time page refresh after first page load

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.

This question is related to javascript jquery refresh reload

The answer is


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's work for me


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>

Please try with the code below

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

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

    return;
    }
});

I'd say use hash, like this:

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

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();

Use rel="external" like below is the example

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

use this

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

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.


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


After </body> tag:

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

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.


Try with this

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

<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.


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

        }

<script>

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

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

</script>

this works perfectly


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.


Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to jquery

How to make a variable accessible outside a function? Jquery assiging class to th in a table Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Getting all files in directory with ajax Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) bootstrap 4 file input doesn't show the file name Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource how to remove json object key and value.?

Examples related to refresh

How to Refresh a Component in Angular Angular + Material - How to refresh a data source (mat-table) How to Update a Component without refreshing full page - Angular How to reload page the page with pagination in Angular 2? Swift: Reload a View Controller Button that refreshes the page on click Update data on a page without refreshing How to refresh or show immediately in datagridview after inserting? Gradle project refresh failed after Android Studio update Refresh Part of Page (div)

Examples related to reload

How to reload page the page with pagination in Angular 2? Button that refreshes the page on click How to reload or re-render the entire page using AngularJS PHP refresh window? equivalent to F5 page reload? How do I detect a page refresh using jquery? Reload the page after ajax success How to reload a div without reloading the entire page? One time page refresh after first page load How can I refresh a page with jQuery? How to reload a page using JavaScript