如何检测使用jQuery的页面刷新？

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

我有一个消息系统，当用户刷新页面时会丢失所有的input。 我想使用Ajax来重新填充，因此我需要检测页面刷新/重新加载。

Answer 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?'; }); 

Answer 2

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

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

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

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

Answer 3

所有的代码是客户端，我希望你很好这有帮助：

首先有三个function我们将使用：

  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); } }) 

Answer 4

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

1. window.onbeforeunload （调用浏览器/选项卡Close＆Page Load）

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>