如何使用 jquery 检测页面刷新？

Posted 2023-02-22

【中文标题】如何使用 jquery 检测页面刷新？

【英文标题】：How do I detect a page refresh using jquery?

【发布时间】：2011-12-22 05:48:16

【问题描述】：

如何捕获页面重新加载事件？

我有一个消息传递系统，当用户刷新页面时，它会丢失所有输入。我想使用 ajax 重新填充，因此我需要检测页面何时刷新/重新加载。

【问题讨论】：

您可以在这里找到解决方案：***.com/questions/3699357/…

【参考方案1】：

$('body').bind('beforeunload',function()
   //do something
);

但这不会为以后保存任何信息，除非您计划将其保存在某个 cookie 中（或本地存储）并且 unload 事件并不总是在所有浏览器中触发。

---

示例：http://jsfiddle.net/maniator/qpK7Y/

代码：

$(window).bind('beforeunload',function()

     //save info somewhere

    return 'are you sure you want to leave?';

);

【讨论】：

为了记录，它也会在页面关闭时被触发。

您也可以使用此方法保存页面中的信息。只需获取所有输入字段值，制作一个数据字符串并在 beforeunload 函数中添加 window.location.href="pagename?datastring"

应该是on 和unload 吗？ api.jquery.com/unload -- 另外，这会在 Firefox 中检测到 F5 吗？

这也检测到浏览器上的后退按钮点击不仅页面刷新。

不适用于我的情况。

【参考方案2】：

如果你想在页面刷新之前保留一些变量

$(window).on('beforeunload', function()
    // your logic here
);

如果你想在某些条件下加载一些内容

$(window).on('load', function()
    // your logic here`enter code here`
);

【参考方案3】：

所有代码都是客户端，希望对你有所帮助：

首先我们将使用 3 个函数：

    function setCookie(c_name, value, exdays) 
            var exdate = new Date();
            exdate.setDate(exdate.getDate() + exdays);
            var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
            document.cookie = c_name + "=" + c_value;
        

    function getCookie(c_name) 
        var i, x, y, ARRcookies = document.cookie.split(";");
        for (i = 0; i < ARRcookies.length; i++) 
            x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
            y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
            x = x.replace(/^\s+|\s+$/g, "");
            if (x == c_name) 
                return unescape(y);
            
        
    

    function DeleteCookie(name) 
            document.cookie = name + '=; expires=Thu, 01-Jan-70 00:00:01 GMT;';
        

现在我们将从页面加载开始：

$(window).load(function () 
 //if IsRefresh cookie exists
 var IsRefresh = getCookie("IsRefresh");
 if (IsRefresh != null && IsRefresh != "") 
    //cookie exists then you refreshed this page(F5, reload button or right click and reload)
    //SOME CODE
    DeleteCookie("IsRefresh");
 
 else 
    //cookie doesnt exists then you landed on this page
    //SOME CODE
    setCookie("IsRefresh", "true", 1);
 
)

【讨论】：

当我尝试这个时，它会触发测试代码以每隔一次加载一次。

【参考方案4】：

客户端有两个事件，如下所示。

1. window.onbeforeunload（在浏览器/选项卡关闭和页面加载上调用）

2。 window.onload（页面加载时调用）

在服务器端

public JsonResult TestAjax( string IsRefresh)
    
        JsonResult result = new JsonResult();
        return result = Json("Called", JsonRequestBehavior.AllowGet);
    

在客户端

 <script type="text/javascript">
    window.onbeforeunload = function (e) 
        
        $.ajax(
            type: 'GET',
            async: false,
            url: '/Home/TestAjax',
            data:  IsRefresh: 'Close' 
        );
    ;

    window.onload = function (e) 

        $.ajax(
            type: 'GET',
            async: false,
            url: '/Home/TestAjax',
            data: IsRefresh:'Load'
        );
    ;
</script>

在浏览器/选项卡关闭时： 如果用户关闭浏览器/选项卡，则 window.onbeforeunload 将触发并且服务器端的 IsRefresh 值为“关闭”。

刷新/重新加载/F5： 如果用户要刷新页面，首先 window.onbeforeunload 会以 IsRefresh value = "Close" 触发，然后 window.onload 会以 IsRefresh value = "Load" 触发，所以现在您终于可以确定您的页面正在刷新。