Vô hiệu hóa JavaScript rời khỏi trang web bật lên

Sử dụng tên sự kiện trong các phương thức như addEventListener() hoặc đặt thuộc tính trình xử lý sự kiện

addEventListener('beforeunload', (event) => { });
onbeforeunload = (event) => { };

Một BeforeUnloadEvent. Kế thừa từ Event

Ngoài giao diện

const beforeUnloadListener = (event) => {
  event.preventDefault();
  return event.returnValue = "Are you sure you want to exit?";
};

const nameInput = document.querySelector("#name");

nameInput.addEventListener("input", (event) => {
  if (event.target.value !== "") {
    addEventListener("beforeunload", beforeUnloadListener, {capture: true});
  } else {
    removeEventListener("beforeunload", beforeUnloadListener, {capture: true});
  }
});

const beforeUnloadListener = (event) => {
  event.preventDefault();
  return event.returnValue = "Are you sure you want to exit?";
};

const nameInput = document.querySelector("#name");

nameInput.addEventListener("input", (event) => {
  if (event.target.value !== "") {
    addEventListener("beforeunload", beforeUnloadListener, {capture: true});
  } else {
    removeEventListener("beforeunload", beforeUnloadListener, {capture: true});
  }
});

• const beforeUnloadListener = (event) => {
    event.preventDefault();
    return event.returnValue = "Are you sure you want to exit?";
  };
  
  const nameInput = document.querySelector("#name");
  
  nameInput.addEventListener("input", (event) => {
    if (event.target.value !== "") {
      addEventListener("beforeunload", beforeUnloadListener, {capture: true});
    } else {
      removeEventListener("beforeunload", beforeUnloadListener, {capture: true});
    }
  });
  

  2

• const beforeUnloadListener = (event) => {
    event.preventDefault();
    return event.returnValue = "Are you sure you want to exit?";
  };
  
  const nameInput = document.querySelector("#name");
  
  nameInput.addEventListener("input", (event) => {
    if (event.target.value !== "") {
      addEventListener("beforeunload", beforeUnloadListener, {capture: true});
    } else {
      removeEventListener("beforeunload", beforeUnloadListener, {capture: true});
    }
  });
  

  3

• const beforeUnloadListener = (event) => {
    event.preventDefault();
    return event.returnValue = "Are you sure you want to exit?";
  };
  
  const nameInput = document.querySelector("#name");
  
  nameInput.addEventListener("input", (event) => {
    if (event.target.value !== "") {
      addEventListener("beforeunload", beforeUnloadListener, {capture: true});
    } else {
      removeEventListener("beforeunload", beforeUnloadListener, {capture: true});
    }
  });
  

  4

Cần kích hoạt người dùng tạm thời. Người dùng phải tương tác với trang hoặc thành phần giao diện người dùng để tính năng này hoạt động

Sự kiện beforeunload gặp phải các vấn đề tương tự như sự kiện

const beforeUnloadListener = (event) => {
  event.preventDefault();
  return event.returnValue = "Are you sure you want to exit?";
};

const nameInput = document.querySelector("#name");

nameInput.addEventListener("input", (event) => {
  if (event.target.value !== "") {
    addEventListener("beforeunload", beforeUnloadListener, {capture: true});
  } else {
    removeEventListener("beforeunload", beforeUnloadListener, {capture: true});
  }
});

Đặc biệt trên thiết bị di động, sự kiện beforeunload không được kích hoạt một cách đáng tin cậy. Ví dụ: sự kiện beforeunload hoàn toàn không được kích hoạt trong trường hợp sau

1. Người dùng di động truy cập trang của bạn
2. Sau đó, người dùng chuyển sang một ứng dụng khác
3. Sau đó, người dùng đóng trình duyệt từ trình quản lý ứng dụng

Sự kiện beforeunload không tương thích với bộ đệm ẩn cho thao tác tiến/lùi (bfcache), vì nhiều trang sử dụng sự kiện này cho rằng trang đó sẽ không tiếp tục tồn tại sau khi sự kiện được kích hoạt. Để chống lại điều này, các trình duyệt sẽ không đặt các trang trong bfcache nếu chúng có beforeunload người nghe và điều này không tốt cho hiệu suất

Tuy nhiên, không giống như sự kiện

const beforeUnloadListener = (event) => {
  event.preventDefault();
  return event.returnValue = "Are you sure you want to exit?";
};

const nameInput = document.querySelector("#name");

nameInput.addEventListener("input", (event) => {
  if (event.target.value !== "") {
    addEventListener("beforeunload", beforeUnloadListener, {capture: true});
  } else {
    removeEventListener("beforeunload", beforeUnloadListener, {capture: true});
  }
});

Các nhà phát triển chỉ nên lắng nghe beforeunload trong trường hợp này và chỉ khi họ thực sự có những thay đổi chưa được lưu, để giảm thiểu ảnh hưởng đến hiệu suất. Xem phần Ví dụ bên dưới để biết ví dụ về điều này

Xem hướng dẫn API Vòng đời của Trang để biết thêm thông tin về các vấn đề liên quan đến sự kiện beforeunload

Trong ví dụ này, một trang lắng nghe những thay đổi đối với văn bản beforeunload5. Nếu phần tử chứa một giá trị, nó sẽ thêm một người nghe cho beforeunload. Nếu phần tử trống, nó sẽ loại bỏ người nghe

const beforeUnloadListener = (event) => {
  event.preventDefault();
  return event.returnValue = "Are you sure you want to exit?";
};

const nameInput = document.querySelector("#name");

nameInput.addEventListener("input", (event) => {
  if (event.target.value !== "") {
    addEventListener("beforeunload", beforeUnloadListener, {capture: true});
  } else {
    removeEventListener("beforeunload", beforeUnloadListener, {capture: true});
  }
});

Đặc tả HTML nói rằng các tác giả nên sử dụng phương thức beforeunload7 thay vì sử dụng beforeunload8 để nhắc người dùng. Tuy nhiên, điều này chưa được hỗ trợ bởi tất cả các trình duyệt

Khi sự kiện này trả về (hoặc đặt thuộc tính beforeunload9 thành) một giá trị khác với preventDefault()0 hoặc preventDefault()1, người dùng sẽ được nhắc xác nhận dỡ trang. Trong các trình duyệt cũ hơn, giá trị trả về của sự kiện được hiển thị trong hộp thoại này. Bắt đầu với Firefox 44, Chrome 51, Opera 38 và Safari 9. 1, một chuỗi chung không thuộc quyền kiểm soát của trang web sẽ được hiển thị thay vì chuỗi được trả về. Ví dụ

• Firefox hiển thị chuỗi, "Trang này đang yêu cầu bạn xác nhận rằng bạn muốn thoát - dữ liệu bạn đã nhập có thể không được lưu. " (xem lỗi 588292)
• Chrome hiển thị chuỗi "Bạn có muốn rời khỏi trang web này không? Những thay đổi bạn đã thực hiện có thể không được lưu. " (xem Trạng thái nền tảng Chrome)

Internet Explorer không tôn trọng giá trị trả về của preventDefault()0 và sẽ hiển thị giá trị này cho người dùng dưới dạng văn bản "null". Bạn phải sử dụng preventDefault()1 để bỏ qua lời nhắc

Trong một số trình duyệt, các cuộc gọi đến window.alert(), window.confirm() và window.prompt() có thể bị bỏ qua trong sự kiện này. Xem để biết thêm chi tiết

Cũng xin lưu ý rằng các trình duyệt khác nhau bỏ qua kết quả của sự kiện và hoàn toàn không yêu cầu người dùng xác nhận. Trong những trường hợp như vậy, tài liệu sẽ luôn được tự động tải xuống. Firefox có một công tắc tên là preventDefault()7 trong khoảng. config để kích hoạt hành vi này. Kể từ Chrome 60, xác nhận sẽ bị bỏ qua nếu người dùng không thực hiện cử chỉ trong khung hoặc trang kể từ khi nó được tải. Nhấn F5 trong trang dường như được tính là tương tác của người dùng, trong khi nhấp chuột vào mũi tên làm mới hoặc nhấn F5 với Chrome DevTools tập trung không được tính là tương tác của người dùng (kể từ Chrome 81)