Chạy mã JavaScript khi đóng cửa sổ hoặc làm mới trang?

Có cách nào để chạy mã JavaScript cuối cùng khi người dùng đóng cửa sổ trình duyệt hoặc làm mới trang không?

Tôi đang nghĩ về một thứ tương tự như onload nhưng giống onclose hơn? Cảm ơn.

Tôi không thích phương pháp onbeforeunload, luôn dẫn đến một hộp xác nhận bật lên (rời khỏi trang / ở lại trên mozilla) hoặc (tải lại / không tải lại trên chrome). Có cách nào để thực thi mã một cách lặng lẽ?

Có cả hai window.onbeforeunloadvà window.onunload, được sử dụng khác nhau tùy thuộc vào trình duyệt. Bạn có thể đánh giá chúng bằng cách đặt các thuộc tính cửa sổ thành các hàm hoặc sử dụng .addEventListener:

window.onbeforeunload = function(){
   // Do something
}
// OR
window.addEventListener("beforeunload", function(e){
   // Do something
}, false);

Thông thường, onbeforeunloadđược sử dụng nếu bạn cần ngăn người dùng rời khỏi trang (ví dụ: người dùng đang làm việc trên một số dữ liệu chưa được lưu, vì vậy họ nên lưu trước khi rời khỏi). onunloadkhông được Opera hỗ trợ , theo như tôi biết, nhưng bạn luôn có thể đặt cả hai.

Ok, tôi đã tìm thấy một giải pháp hiệu quả cho việc này, nó bao gồm sử dụng beforeunloadsự kiện và sau đó làm cho trình xử lý quay trở lại null. Điều này thực thi mã truy nã mà không có hộp xác nhận bật lên. Nó đi một cái gì đó như thế này:

window.onbeforeunload = closingCode;
function closingCode(){
   // do something...
   return null;
}

Hi vọng điêu nay co ich.

Đôi khi bạn có thể muốn cho máy chủ biết rằng người dùng đang rời khỏi trang. Điều này rất hữu ích, chẳng hạn, để xóa các hình ảnh chưa lưu được lưu trữ tạm thời trên máy chủ, để đánh dấu người dùng đó là "ngoại tuyến" hoặc để ghi lại khi họ hoàn thành phiên của mình.

Trước đây, bạn sẽ gửi một yêu cầu AJAX trong beforeunloadhàm, tuy nhiên điều này có hai vấn đề. Nếu bạn gửi một yêu cầu không đồng bộ, không có gì đảm bảo rằng yêu cầu sẽ được thực thi chính xác. Nếu bạn gửi một yêu cầu đồng bộ, nó đáng tin cậy hơn, nhưng trình duyệt sẽ bị treo cho đến khi yêu cầu hoàn tất. Nếu đây là một yêu cầu chậm, đây sẽ là một sự bất tiện rất lớn cho người dùng.

May mắn thay, bây giờ chúng tôi có navigator.sendBeacon(). Bằng cách sử dụng sendBeacon()phương pháp này, dữ liệu được truyền không đồng bộ đến máy chủ web khi Tác nhân người dùng có cơ hội làm như vậy, mà không làm chậm trễ việc tải hoặc ảnh hưởng đến hiệu suất của điều hướng tiếp theo. Điều này giải quyết tất cả các vấn đề với việc gửi dữ liệu phân tích: dữ liệu được gửi đáng tin cậy, được gửi không đồng bộ và nó không ảnh hưởng đến việc tải trang tiếp theo. Đây là một ví dụ về cách sử dụng của nó:

window.addEventListener("unload", logData, false);

function logData() {
  navigator.sendBeacon("/log.php", analyticsData);
}

sendBeacon()được hỗ trợ trong:

• Cạnh 14
• Firefox 31
• Chrome 39
• Safari 11.1
• Opera 26
• iOS Safari 11.4

Nó hiện KHÔNG được hỗ trợ trong:

• trình duyệt web IE
• Opera Mini

Đây là một polyfill cho sendBeacon () trong trường hợp bạn cần thêm hỗ trợ cho các trình duyệt không được hỗ trợ. Nếu phương thức không khả dụng trong trình duyệt, nó sẽ gửi một yêu cầu AJAX đồng bộ để thay thế.

Phiên bản jQuery:

$(window).unload(function(){
    // Do Something
});

Cập nhật : jQuery 3:

$(window).on("unload", function(e) {
    // Do Something
});

Cảm ơn Garrett

Tài liệu ở đây khuyến khích nghe sự kiện onbeforeunload và / hoặc thêm trình nghe sự kiện trên window.

window.addEventListener('beforeunload', function(event) {
  //do something here
}, false);

Bạn cũng có thể chỉ cần điền các thuộc tính .onunload hoặc .onbeforeunload của cửa sổ với một hàm hoặc một tham chiếu hàm.

Mặc dù hành vi không được chuẩn hóa trên các trình duyệt, nhưng hàm có thể trả về một giá trị mà trình duyệt sẽ hiển thị khi xác nhận có rời khỏi trang hay không.

Bạn có thể sử dụng window.onbeforeunload.

window.onbeforeunload = confirmExit;
function confirmExit(){
    alert("confirm exit is being called");
    return false;
}

Sự kiện được gọi beforeunload, vì vậy bạn có thể gán một hàm cho window.onbeforeunload.

Bạn có thể thử một cái gì đó như sau:

<SCRIPT language="JavaScript">
<!--
function loadOut()
{
window.location="http://www.google.com";
}
//-->
</SCRIPT>

<body onBeforeUnload="loadOut()">