刷新页面并在之后运行函数 - JavaScript答案

【问题标题】：Refresh page and run function after - JavaScript刷新页面并在之后运行函数 - JavaScript
【发布时间】：2017-06-13 18:49:40
【问题描述】：

我正在尝试刷新页面，然后在刷新完成后运行一个函数。但是我现在拥有的代码运行该函数，然后它只刷新它，这意味着我失去了该函数所做的事情。有没有办法解决这个问题？

我的代码

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

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

【问题讨论】：

查看onbeforeunload 和onload 事件

标签： javascript reload

【解决方案1】：

添加到@Barmar 答案... 如果您只想在单击页面中的按钮时使用会话存储，而在使用 浏览器按钮重新加载时不 em>，你可以在加载窗口后执行该函数后使用sessionStorage.clear()。

所以，假设我们有：

var restart = sessionStorage.getItem("restart");

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

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

一旦重新加载窗口，我们就可以执行以下函数：

window.onload = () => {
  if(restart){
    // Do something
    sessionStorage.clear(); // This cleans all the session storage
  }
};

因此，如果现在用户使用浏览器按钮重新加载页面，它将在清理会话存储的情况下重新加载。意思是，窗口加载后不会执行任何函数。

【讨论】：

【解决方案2】：

就我而言，我使用了 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')
    }
}

【讨论】：

【解决方案3】：

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/

【讨论】：

【解决方案4】：

页面加载时需要调用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

【讨论】：

不，它基本上是加载函数代码然后刷新，所以你只能看到大约半秒的函数输出
我不明白。该函数在刷新之后运行，而不是在刷新之前运行。
myFunction() 是做什么的？
我会试一试，它会创建一个表格
按钮在<form> 内吗？改成<button type="button"，否则会提交表单。