如何使用 jquery 检测页面刷新？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8013429/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I detect a page refresh using jquery?
提问by sisko
How might I capture the page reload event?
我如何捕获页面重新加载事件？
I have a messaging system which loses all its input when the user refreshes the page. I want to use ajax to re-populate, hence my need to detect when the page has been refreshed/reloaded.
我有一个消息系统，当用户刷新页面时，它会丢失所有输入。我想使用 ajax 重新填充，因此我需要检测页面何时刷新/重新加载。
回答by Naftali aka Neal
$('body').bind('beforeunload',function(){
//do something
});
But this wont save any info for later, unless you were planning on saving that in a cookie somewhere (or local storage) and the unloadevent does not always fire in all browsers.
但这不会为以后保存任何信息，除非您计划将其保存在某个地方（或本地存储）的 cookie 中，并且该unload事件并不总是在所有浏览器中触发。
Example: http://jsfiddle.net/maniator/qpK7Y/
示例：http: //jsfiddle.net/maniator/qpK7Y/
Code:
代码：
$(window).bind('beforeunload',function(){
//save info somewhere
return 'are you sure you want to leave?';
});
回答by Uzair
if you want to bookkeep some variable before page refresh
如果你想在页面刷新之前保留一些变量
$(window).on('beforeunload', function(){
// your logic here
});
if you want o load some content base on some condition
如果你想根据某种条件加载一些内容
$(window).on('load', function(){
// your logic here`enter code here`
});
回答by Arrabi
All the code is client side, I hope you fine this helpful:
所有的代码都是客户端，我希望你觉得这有帮助：
First thing there are 3 functions we will use:
首先，我们将使用 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;';
}
Now we will start with the page load:
现在我们将从页面加载开始：
$(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);
}
})
回答by Umar Shafeeq
There are two events on client side as given below.
客户端有两个事件，如下所示。
1. window.onbeforeunload(calls on Browser/tab Close & Page Load)
1. window.onbeforeunload（调用浏览器/选项卡关闭和页面加载）
2. window.onload(calls on Page Load)
2. window.onload（调用页面加载）
On server Side
在服务器端
public JsonResult TestAjax( string IsRefresh)
{
JsonResult result = new JsonResult();
return result = Json("Called", JsonRequestBehavior.AllowGet);
}
On Client Side
在客户端
<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>On Browser/Tab Close:if user close the Browser/tab, then window.onbeforeunload will fire and IsRefresh value on server side will be "Close".
在浏览器/选项卡关闭时：如果用户关闭浏览器/选项卡，则 window.onbeforeunload 将触发并且服务器端的 IsRefresh 值将是“关闭”。
On Refresh/Reload/F5:If user will refresh the page, first window.onbeforeunload will fire with IsRefresh value = "Close" and then window.onload will fire with IsRefresh value = "Load", so now you can determine at last that your page is refreshing.
刷新/重新加载/F5：如果用户刷新页面，首先 window.onbeforeunload 将触发 IsRefresh value = "Close" 然后 window.onload 触发 IsRefresh value = "Load"，所以现在你可以确定最后您的页面令人耳目一新。
