刷新页面并在 JavaScript 中运行函数后 - JavaScript

Question

我正在尝试刷新一个页面，在刷新完成后运行一个函数。但是我现在的代码会先运行函数，然后再刷新页面，这意味着我失去了函数的效果。有什么方法可以解决这个问题吗？

我的代码：

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

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

- Lost Soul

---

请查看 onbeforeunload 和 onload 事件。 - Anthony C

Answer 1

当页面加载时，您需要调用myFunction()函数。

window.onload = myFunction;

如果您只想在重新加载页面时而不是首次加载页面时运行它，您可以使用sessionStorage来传递此信息。

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

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

演示

- Barmar

---

不过它基本上是加载函数代码，然后刷新，所以你只能看到函数输出大约半秒钟。 - Lost Soul

我不明白。该函数在刷新之后运行，而不是在刷新之前。 - Barmar

myFunction() 做什么？ - Barmar

我会尝试一下，它会创建一个表。 - Lost Soul

按钮是否在<form>标签内？如果是，请将其更改为<button type="button">，否则它会提交表单。 - Barmar

这段代码只在Firefox中工作而不在Explorer或Chrome中工作，有什么原因吗？ - Lost Soul

Answer 2

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

演示: https://jsfiddle.net/barmar/5sL3hd74/

- Félix Pujols

Answer 3

补充@Barmar的回答...如果您想在页面上点击按钮时仅使用会话存储，而不是使用浏览器按钮重新加载时，可以在加载窗口后执行函数后使用sessionStorage.clear()或sessionStorage.removeItem()。

所以，假设我们有：

let restart = sessionStorage.getItem("restart")

将会话存储中的重启布尔值设置为true并重新加载：

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

当窗口重新加载后，我们可以执行以下函数：

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")
  }
};

因此，如果用户现在使用浏览器按钮重新加载页面，它将重新加载并清除会话存储。这意味着，在窗口加载后不会执行任何功能。请注意保留HTML标签。

- Gass

---

使用 sessionStorage.clear() 看起来并不是一个正确的选择，因为（如回复中所述），它不仅会删除我们的项目，还可能清除其他存储的项目。因此，更适合使用 sessionStorage.removeItem()。 - Syed Muhammad Sajjad

Answer 4

可能是最简单的方法。

HTML 按钮

重新加载按钮（credits）：

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

JS 代码

刷新后执行你的代码：

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

您不能使用event变量。

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

- carloswm85

Answer 5

在我的情况下，我使用了Barmar的解决方案。我有一个模态弹出表单，我想要提交表单，然后自动刷新页面，并在重新加载的页面上显示成功消息。

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')
    }
}

- MrAlbino