Подтвердить что ты не робот

Window.onbeforeunload не работает

У меня есть форма, в которой поля ввода сохраняются в элементе. В firefox (5) это работает, даже когда окно закрыто, но для Chrome и IE это не так, и я должен быть уверен, что я сохраню эти данные, даже если они попытаются закрыть окно после того, как они набрали поле, но событие onBlur не произошло (т.е. они набрали что-то в текстовое поле, но не вышли из него).

Я прочитал следующие статьи SO об использовании window.onbeforeunload: статья 1 статья 2

если я использую следующее:

window.onbeforeunload = function() {
    return "onbeforeunload";
}

тогда я получаю всплывающее окно с надписью "onbeforeunload".

но если я попробую:

window.onbeforeunload = function() {
    alert("onbeforeunload");
}

тогда ничего не происходит в любом браузере, даже в firefox.

что я хочу достичь:

window.onbeforeunload = function() {
    saveFormData();
}

Я был бы признателен, если бы кто-нибудь мог указать, где я могу ошибиться.

Большое спасибо

4b9b3361

ОТВЕТЫ

Ответ 1

Вы должны return от onbeforeunload:

window.onbeforeunload = function() {
    saveFormData();
    return null;
}

function saveFormData() {
    console.log('saved');
}

UPDATE

в соответствии с комментариями, предупреждение больше не работает над более новыми версиями, все остальное:)

FROM MDN

С 25 мая 2011 года спецификация HTML5 заявляет, что во время этого события могут игнорироваться вызовы методов window.showModalDialog(), window.alert(), window.confirm() и window.prompt().

Также рекомендуется использовать это через интерфейс addEventListener:

Вы можете и должны обрабатывать это событие через событие window.addEventListener() и beforeunload.

Обновленный код будет выглядеть следующим образом:

window.addEventListener("beforeunload", function (e) {
  saveFormData();

  (e || window.event).returnValue = null;
  return null;
});

Ответ 2

Кажется, что существует много дезинформации о том, как использовать это событие (даже в ответах на эту страницу).

API-интерфейс onbeforeunload предоставлен браузером для определенной цели: единственное, что вы можете сделать , которое стоит сделать в этом методе, - это вернуть строку, которую браузер затем предложит пользователь должен указать им, что действие должно быть предпринято до того, как они будут перемещаться от страницы. Вы НЕ МОЖЕТЕ предотвратить их переход от страницы (представьте, какой кошмар будет для конечного пользователя).

Поскольку браузеры используют запрос подтверждения, чтобы показать пользователю строку, которую вы вернули из прослушивателя событий, вы не можете ничего сделать в этом методе (например, выполнить запрос ajax).

В приложении, которое я написал, я хочу предложить пользователю сообщить им, что у них есть несохраненные изменения, прежде чем они покинут страницу. Браузер запрашивает их с сообщением, и после этого он из моих рук, пользователь может выбрать остаться или уйти, но вы больше не контролируете приложение в этой точке.

Пример того, как я его использую (псевдокод):

onbeforeunload = function() {

  if(Application.hasUnsavedChanges()) {
    return 'You have unsaved changes. Please save them before leaving this page';
  }


};

Если (и только если) приложение имеет несохраненные изменения, браузер просит пользователя либо игнорировать мое сообщение (и оставить страницу в любом случае), либо не покидать страницу. Если они предпочитают оставлять страницу в любом случае, слишком плохо, вы ничего не можете сделать (и не должны этого делать).

Ответ 3

вы просто не можете сделать alert() в onbeforeunload, что-нибудь еще работает

Ответ 4

Чтобы вывести сообщение, когда пользователь покидает страницу, чтобы подтвердить удержание, вы просто выполните:

<script>
    window.onbeforeunload = function(e) {
      return 'Are you sure you want to leave this page?  You will lose any unsaved data.';
    };
</script>

Чтобы вызвать функцию:

<script>
    window.onbeforeunload = function(e) {
       callSomeFunction();
       return null;
    };
</script>

Ответ 5

Да, что все говорят выше.

Для вашей непосредственной ситуации вместо onChange вы можете использовать onInput, новый в html5. Событие ввода одно и то же, но оно срабатывает при каждом нажатии клавиши, независимо от фокуса. Также работает над выборами и всем остальным, как onChange.