Refresh page and run function after - JavaScript

Question

I'm trying to refresh a page and then run a function once the refresh has been completed. However the code I have now, runs the function and then it only refreshes it, meaning I lose what the function did. Is there a way to solve this?

My code

function reloadP(){
    document.location.reload();
    myFunction();
}

<button onclick: "reloadP()">Click</button>

Check out `onbeforeunload` and `onload ` events – Anthony C Jan 28 '17 at 00:09 — Anthony C, Jan 28 '17 at 00:09

Barmar · Accepted Answer · 2017-01-28T00:32:09.417

50

You need to call myFunction() when the page is loaded.

window.onload = myFunction;

If you only want to run it when the page is reloaded, not when it's loaded for the first time, you could use sessionStorage to pass this information.

window.onload = function() {
    var reloading = sessionStorage.getItem("reloading");
    if (reloading) {
        sessionStorage.removeItem("reloading");
        myFunction();
    }
}

function reloadP() {
    sessionStorage.setItem("reloading", "true");
    document.location.reload();
}

DEMO

edited Jan 28 '17 at 00:32

answered Jan 28 '17 at 00:13

Barmar

741,623
53
500
612

no it basically loads the function code then it refreshes so you only see a the function output for about half a second – Lost Soul Jan 28 '17 at 00:25
I don't understand. The function runs *after* the refresh, not before it. – Barmar Jan 28 '17 at 00:28
What does `myFunction()` do? – Barmar Jan 28 '17 at 00:33
I will give this a go and it creates a table – Lost Soul Jan 28 '17 at 00:36
Is the button inside a `
`? Change it to `
– Barmar Jan 28 '17 at 00:37
is there a reason this code only works in firefox and not explorer or chrome? – Lost Soul Jan 28 '17 at 22:55

score 5 · Answer 2 · answered Jul 31 '19 at 14:56

function myFunction() {
    document.getElementById("welcome").textContent = "Welcome back!";
}

window.onload = function() {
    var reloading = sessionStorage.getItem("reloading");
    if (reloading) {
        sessionStorage.removeItem("reloading");
        myFunction();
    }
}

function reloadP() {
    sessionStorage.setItem("reloading", "true");
    document.location.reload();
}

DEMO: https://jsfiddle.net/barmar/5sL3hd74/

Gass · Answer 3 · 2022-03-07T09:24:30.793

Adding to @Barmar answer... In case you'd like to use session storage only when a button in the page is clicked and not when reloading with the browser button, you can use sessionStorage.clear() or sessionStorage.removeItem() once you've executed the function after loading the window.

So, let's say we have:

let restart = sessionStorage.getItem("restart")

Set restart boolean to true as a session storage and reload:

resetBtn.addEventListener("click", () => {
   sessionStorage.setItem("restart", "true")
   location.reload()
})

Once the window is reloaded we can execute the following function:

window.onload = () => {
  if(restart){
    // Do something
    sessionStorage.clear() // This cleans all the session storage
    
    // If you want to  remove ONLY the item from the storage use:
    // sessionStorage.removeItem("restart")
  }
};

So, if now the user reloads the page with the browser button it will reload with the session storage cleaned. Meaning, no functions will be executed after window load.

using `sessionStorage.clear()` does not seem to be the right choice. Because (as mentioned in the reply), it would not only erase our item but also clear other possibly stored items. So, using `sessionStorage.removeItem()` would be more appropriate — Syed Muhammad Sajjad, Mar 07 '22 at 09:03

score 0 · Answer 4 · answered Dec 13 '21 at 00:00

In my case i used Barmar's solution. I have a modal popup form, i want to submit the form then automatically refresh the page and finally success message on reloaded page.

var form = document.getElementById('EditUserInfosForm')
form.addEventListener('submit', function () {
    sessionStorage.setItem("reloading", "true");
    document.location.reload();
})

window.onload = function () {
    var reloading = sessionStorage.getItem("reloading");
    if (reloading) {
        sessionStorage.removeItem("reloading");
        $('#success-message-modal').modal('show')
    }
}

score 0 · Answer 5 · answered Aug 18 '22 at 15:14

Probably simplest approach.

HTML Button

Reload button (credits):

<!-- index.html -->
<button onClick="window.location.reload();">Refresh Page</button>

JS Code

Run your code after reload:

// index.js
window.addEventListener("load", (event) => {
    YourFunction(); // already declared somewhere else
});

You may not use event variable at all.

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event#examples

Refresh page and run function after - JavaScript

5 Answers5

HTML Button

JS Code

Linked