Làm cách nào để phát hiện làm mới trang bằng jquery?

Question

Tôi có thể nắm bắt sự kiện tải lại trang như thế nào?

Tôi có hệ thống nhắn tin mất tất cả thông tin nhập khi người dùng làm mới trang. Tôi muốn sử dụng ajax để điền lại, do đó tôi cần phát hiện khi trang đã được làm mới/tải lại.

Answer 1

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

Nhưng điều này sẽ không lưu bất kỳ thông tin cho sau này, trừ khi bạn đang lên kế hoạch về tiết kiệm mà trong một cookie ở đâu đó (hoặc lưu trữ địa phương) và sự kiện unload không phải lúc nào cũng cháy trong tất cả các trình duyệt.

---

Ví dụ: http://jsfiddle.net/maniator/qpK7Y/

Code:

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

    //save info somewhere 

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

}); 

Answer 2

Tất cả các mã được phía khách hàng, tôi hy vọng bạn tinh này có hữu ích:

Điều đầu tiên có 3 chức năng, chúng tôi sẽ sử dụng :

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

Bây giờ chúng ta sẽ bắt đầu với tải trang:

$(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 3

nếu bạn muốn bookkeep một số biến trước khi trang refresh

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

nếu bạn muốn o tải một số cơ sở nội dung trên một số điều kiện

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

Answer 4

Có hai sự kiện ở phía máy khách như được nêu bên dưới.

1. window.onbeforeunload (cuộc gọi trên trình duyệt/tab Đóng & tải trang)

2. window.onload (cuộc gọi trên tải trang)

Trên máy chủ 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>

Mở trình duyệt/Tab Đóng: nếu người dùng đóng trình duyệt/tab, sau đó window.onbeforeunload sẽ cháy và giá trị so IsRefresh về phía máy chủ sẽ "Gần".

On Refresh/Nạp/F5: Nếu người dùng sẽ làm mới trang, window.onbeforeunload đầu tiên sẽ cháy với giá trị IsRefresh = "Close" và sau đó window.onload sẽ cháy với IsRefresh value = "Load", do đó bây giờ bạn có thể xác định cuối cùng rằng trang của bạn đang làm mới.