Thực thi script khi trang sắp bị tải lại/đóng (onbeforeunload) trong HTML?

Sự kiện onbeforeunload kích hoạt khi người dùng sắp rời trang: đóng tab, tải lại, điều hướng đi, gọi window.close(). Cho phép hiển thị hộp thoại xác nhận (browser-controlled).

Ví dụ

<!DOCTYPE html>
<html>
  <body onbeforeunload="return display()">
    <p>Đóng tab hoặc nhấn F5 để thử.</p>
    <script>
      function display() {
        return "Bạn có chắc muốn rời trang?";
      }
    </script>
  </body>
</html>

Cách hiện đại (addEventListener)

window.addEventListener('beforeunload', (e) => {
  e.preventDefault(); // Bắt buộc cho một số trình duyệt
  e.returnValue = ''; // Bắt buộc: chuỗi rỗng (browser tự hiển thị thông báo chuẩn)
  // return ''; // Legacy
});

Lưu ý quan trọng

• Trình duyệt không cho tùy chỉnh nội dung hộp thoại (chống spam/mislead).
• Chỉ hoạt động nếu trang đã có tương tác người dùng (click, keydown...).
• Không dùng cho analytics, quảng cáo — chỉ dùng khi có dữ liệu chưa lưu (form dính, editor...).
• Mobile: hỗ trợ hạn chế.

Sự kiện liên quan

• unload: Trang đã unload (không thể hủy, không thể chạy async).
• pagehide: Trang ẩn (bfcache) — khuyên dùng thay unload.