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

Posted 2023-02-22

【中文标题】刷新页面并在之后运行函数 - JavaScript

【英文标题】：Refresh page and run function after - JavaScript

【发布时间】：2017-06-13 18:49:40

【问题描述】：

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

我的代码

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


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

【问题讨论】：

查看onbeforeunload 和onload 事件

【参考方案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"，否则会提交表单。