在 - JavaScript 之后刷新页面和运行函数

Question

我正在尝试刷新页面，然后在刷新完成后运行一个函数。但是我现在拥有的代码运行是函数，然后它只刷新它，这意味着我失去了函数的作用。有办法解决吗？

我的代码

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

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

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

DEMO

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/

Answer 3

在我的案例中，我使用了 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')
    }
}

Answer 4

添加到@Barmar 答案...如果您只想在单击页面中的按钮时使用会话存储，而在使用 浏览器按钮，您可以在加载window.

后执行该功能后使用sessionStorage.clear()或sessionStorage.removeItem()

所以，假设我们有：

let restart = sessionStorage.getItem("restart")

将 restart boolean 设置为 true 作为会话存储并重新加载：

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

一旦 window 被重新加载 我们可以执行以下函数：

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

因此，如果现在用户使用浏览器按钮重新加载页面，它将重新加载并清除会话存储。意思是，window 加载后不会执行任何功能。

在 - JavaScript 之后刷新页面和运行函数

Refresh page and run function after - JavaScript

javascript

reload

在 - JavaScript 之后刷新页面和 运行 函数

Refresh page and run function after - JavaScript

javascript

reload

在 - JavaScript 之后刷新页面和运行函数