За някои сценарии не искате потребителят да затвори браузъра и да излезе от пътуването. Например, ако потребителят попълва формуляр без да го записва или по време на платежна транзакция без да е завършен, тогава можете да подканите потребителя с диалогов прозорец за потвърждение, когато потребителят щракне върху бутона за затваряне на браузъра.

За Chrome изглежда така:

За Firefox изглежда така:

Това може да се постигне чрез събитието beforeunload в браузъра, добавете този JavaScript код към вашата страница:

window.addEventListener('beforeunload', (event) => { 
  // Cancel the event as stated by the standard.
  event.preventDefault(); 
  // Chrome requires returnValue to be set. 
  event.returnValue = ''; 
});

Забележете, че за да задейства това събитие, потребителят трябва да има известно взаимодействие със страницата. В противен случай това не би могло да се задейства. Освен това това ще се задейства в следните три сценария:

1. Потребителят кликва, за да затвори браузъра.
2. Потребителят кликва, за да опресни страницата.
3. Потребителят кликва върху бутона за връщане назад.

Ако искате да премахнете този диалогов прозорец за потвърждение, например след като потребителят е запазил формуляра или е завършил платежните транзакции, можете да го премахнете по следния начин:

window.removeEventListener("beforeunload", callback)

Тъй като основната цел на този диалогов прозорец е да напомни на потребителите да запазят промените, преди техните промени да бъдат загубени, няма допълнителен слушател на събития, който да улови резултата от този диалогов прозорец за изход, т.е. не можете да направите нищо, за да разберете дали потребителят продължава с бутона за напускане или бутона за оставане, върху който потребителят е щракнал.

За повече информация вижте най-новите уеб документи на MDN тук: https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

Първоначално публикувано на https://victorleungtw.com.