Мне нужно, чтобы пользователь подтвердил уход со страницы, например, если пользователь нажимает кнопку возврата в браузере. Для этого я использовал библиотеку jquery -confirm. Это мое решение до сих пор:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
<script>
if (window.history && history.pushState) {
addEventListener('load', function() {
var isDoublePagePushed = localStorage.getItem("isDoublePagePushed");
if (isDoublePagePushed != "1") {
history.pushState(null, null, null); // creates new history entry with same URL
localStorage.setItem("isDoublePagePushed", "1"); // in case of refresh, so no doubles are pushed
}
var isLeaveConfirmed = false;
addEventListener("popstate", function() {
if (!isLeaveConfirmed) {
$.confirm({
title: 'Warning',
type: 'orange',
boxWidth: '500px',
useBootstrap: false,
content: 'If you leave this page you may lose your progress. Do you want to continue?',
opacity: 0.5,
buttons: {
'confirm': {
text: 'Yes',
action: function() {
isLeaveConfirmed = true;
history.back();
localStorage.setItem("isDoublePagePushed", null);
}
},
'cancel': {
text: 'No',
btnClass: 'btn-blue',
action: function() {
history.pushState(null, null, null);
}
},
}
});
} else {
isLeaveConfirmed = false;
}
});
});
}
</script>
</head>
<body>
<h1>TEST PAGE</h1>
</body>
</html>
Я подписываюсь на popstate событие, чтобы выполнить sh this. Он работает в Firefox, Edge и IE, но диалог не будет отображаться в Chrome. В Chrome иногда это работает, когда я проверяю страницу. Я часами пытался выяснить, почему он не появляется, поэтому, если у кого-то есть исправление или, возможно, альтернативное решение, все будет оценено.