如何使用 jquery 或 javascript 检查页面是否正在重新加载或刷新？答案

【问题标题】：How to check page is reloading or refreshing using jquery or javascript?如何使用 jquery 或 javascript 检查页面是否正在重新加载或刷新？
【发布时间】：2012-05-01 15:43:07
【问题描述】：

我必须对页面刷新或重新加载进行某种操作。那是当我点击下一页或过滤或刷新网格时。我需要在此事件上显示一些确认框。

是否有任何事件可以告诉您页面正在执行文件管理？刷新还是分页？使用javascript？

谢谢

【问题讨论】：

标签： javascript jquery

【解决方案1】：

如果刷新，window.onunload 会触发。

// From MDN
window.onunload = unloadPage;
function unloadPage()
{
    alert("unload event detected!");
}

https://developer.mozilla.org/en/DOM/window.onunload

如果你只是想要一个确认框让他们留下来，使用这个：

window.onbeforeunload = function() {
    return "Are you sure you want to navigate away?";
}

【讨论】：

当用户关闭浏览器或页面或用户试图离开时也会触发。
@MetalPhoenix 当然会。无需对任何有能力的开发人员都认可的东西投反对票。
但它没有回答这个问题。问题是具体检查页面是否正在重新加载并捕获该事件。在这种情况下，如果浏览器关闭，它仍然会触发，并在用户关闭浏览器之前提醒用户确认。这是不好的行为，任何有能力的开发人员都知道不要这样做。
当然这是不好的行为，但是 OP 想要检测页面何时被刷新，现在他可以了。他应该吗？这是他的特权。

【解决方案2】：

您可以创建一个隐藏字段并在第一页加载时设置其值。再次加载页面时，您可以检查隐藏字段。如果它是空的，那么页面是第一次加载，否则它会被刷新。像这样的东西：

HTML

<body onLoad="CheckPageLoad();">

    <input type="hidden" name="visit" id="visit" value="" />

</body>

function CheckPageLoad() {
    if (document.getElementById("visit").value == "") {
        // This is a fresh page load
        document.getElementById("visit").value = "1";
    }
    else {
        // This is a page refresh
    }
}

【讨论】：

嗯，但是刷新时总是清空该值。所以它永远无法确定该字段以前是否有值。
如果页面将控件的状态存储在视图状态中，这可能没问题。问题是如何解决导致回发的更复杂的页面。如果这是一个依赖于用户交互的简单页面，然后可以在该字段中放置一个值，那么这是一个很好的解决方案。但是，如果该页面导致多次回发，其中有很多字段供用户填写，它就会变得不可扩展。

【解决方案3】：

我认为有一些关于解决这个问题的澄清说明很重要。

首先，刷新/隐藏字段系统在新页面副本的开头和之后起作用，而不是在离开第一个页面副本时。

根据我对这种方法和其他一些方法的研究，主要由于隐私标准，无法在卸载期间或更早检测到页面刷新。仅在新页面加载后及以后。

我有一个类似的问题请求，但基本上它是在页面退出时终止会话，并且在查看时发现浏览器将重新加载/刷新视为两个不同的部分：

关闭当前窗口（触发 onbeforeunload 和 onunload js 事件）。
请求该页面，就好像您从未拥有它一样。服务器上的会话当然没有问题，但没有查询字符串更改/为页面的最后使用的 url 添加值。

这些也是按照这个顺序发生的。只有自定义或非标准浏览器的行为会有所不同。

【讨论】：

【解决方案4】：

$(function () {
    if (performance.navigation.type == 1) {
        yourFunction();
    }
});

更多关于由performance.navigation返回的PerformanceNavigation对象

【讨论】：

已弃用。有一个替代品，但您并没有真正按预期使用这些接口中的任何一个。 developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation