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

Question

У меня есть форма, где поля ввода сохраняются на изменение.В 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();
}

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

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

Answer 1

Вы должны return из onbeforeunload:

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

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

UPDATE

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

ОТ 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;
});

Answer 2

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

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

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

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

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

onbeforeunload = function() {

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


};

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

Answer 3

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

Answer 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>

Answer 5

Причина, по которой ничего не происходит при использовании 'alert ()', вероятно, объясняется MDN: «Спецификация HTML гласит, что вызывает методы window.alert (), window.confirm () и window.prompt () может игнорироваться во время этого события. "

Но есть и другая причина, по которой вы можете вообще не видеть предупреждение, независимо от того, вызывает ли оно alert () или нет, также объясненное на том же сайте:

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

Это то, что я вижу с текущими версиями Chrome и FireFox. Я открываю свою страницу, на которой установлен обработчик beforeunload с этим кодом:

window.addEventListener
('beforeunload'
, function (evt)
  { evt.preventDefault();
    evt.returnValue = 'Hello';
    return "hello 2222"
  }
 );

Если я не нажимаю на свою страницу, другими словами «не взаимодействую» с ней, и нажимаю кнопку закрытия, окно закрывается без предупреждения.

Но если я нажму на страницу, прежде чем пытаться закрыть окно или вкладку, я получу предупреждение и могу отменить закрытие окна.

Таким образом, эти браузеры являются «умными» (и удобными для пользователя) в том смысле, что если вы ничего не сделали со страницей, на ней не может быть никакого пользовательского ввода, который нужно было бы сохранить, поэтому они закроют окно без каких-либо предупреждений. ,

Учтите, что без этой функции любой сайт может эгоистично спросить вас: «Вы действительно хотите покинуть наш сайт?», Когда вы уже четко заявили о своем намерении покинуть их сайт.

SEE: https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload

Answer 6

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

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