Установка onbeforeunload для элемента body в Chrome и IE с помощью jQuery
-
05-07-2019 - |
Вопрос
У меня есть система, в которой я хочу узнать у пользователя, уверены ли они, что хотят покинуть страницу после установки грязного флага. Р>
Я использую следующий код - в FireFox я могу посмотреть на источник страницы через FireBug, и в тег правильно вставлен атрибут onbeforeunload. Р>
В Chrome и FireFox этого не происходит, и я могу вообще покинуть страницу без предупреждения. Строка jQuery для обновления тега body определенно выполняется, но она просто не выполняется.
if ($("body").attr('onbeforeunload') == null) {
if (window.event) {
// IE and Chrome use this
$("body").attr('onbeforeunload', 'CatchLeavePage(event)');
}
else {
// Firefox uses this
$("body").attr('onbeforeunload', 'return false;CatchLeavePage(event)');
}
}
Есть идеи, как действовать дальше?
Решение
вы не можете прервать выгрузку страницы, вернув false. Вы должны вернуть строку, которая будет показана пользователю в окне сообщения, и он решит, хочет ли он покинуть или остаться на странице (выбрав кнопку «ОК» или «Отмена»), поэтому вам нужно написать свой код, например это:
window.onbeforeunload = function() {
return "Are you sure you want to leave this page bla bla bla?"; // you can make this dynamic, ofcourse...
};
Другие советы
попробуйте это
<script type=\"text/javascript\">
var dont_confirm_leave = 0; //set dont_confirm_leave to 1 when you want the user to be able to leave withou confirmation
var leave_message = 'You sure you want to leave?'
function goodbye(e)
{
if(dont_confirm_leave!==1)
{
if(!e) e = window.event;
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = leave_message;
//e.stopPropagation works in Firefox.
if (e.stopPropagation)
{
e.stopPropagation();
e.preventDefault();
}
//return works for Chrome and Safari
return leave_message;
}
}
window.onbeforeunload=goodbye;
</script>
window.onbeforeunload = function () { return 'Are you sure?' };
Проверьте этот код:
var validNavigation = false;
function wireUpEvents() {
var dont_confirm_leave = 0;
var leave_message = "You sure you want to leave ?";
function goodbye(e) {
if (!validNavigation) {
if (dont_confirm_leave !== 1) {
if (!e) e = window.event;
e.cancelBubble = true;
e.returnValue = leave_message;
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
//return works for Chrome and Safari
return leave_message;
}
}
}
window.onbeforeunload = goodbye;
document.onkeydown = function () {
switch (event.keyCode || e.which) {
case 116 : //F5 button
validNavigation = true;
case 114 : //F5 button
validNavigation = true;
case 82 : //R button
if (event.ctrlKey) {
validNavigation = true;
}
case 13 : //Press enter
validNavigation = true;
}
}
// Attach the event click for all links in the page
$("a").bind("click", function () {
validNavigation = true;
});
// Attach the event submit for all forms in the page
$("form").bind("submit", function () {
validNavigation = true;
});
// Attach the event click for all inputs in the page
$("input[type=submit]").bind("click", function () {
validNavigation = true;
});
}
// Wire up the events as soon as the DOM tree is ready
$(document).ready(function () {
wireUpEvents();
});
Это не красиво, но сработало.
var warnclose = true;
var warn = function(e) {
var warning = 'Your warning message.';
if (warnclose) {
// Disables multiple calls
warnclose = false;
// In case we still need warn to be called again
setTimeout(function(){
warnclose = true;
}, 500);
return warning;
}
};
window.onbeforeunload = warn;