Как и почему работает onbeforeunload
Вчера в багзилле mozilla.org с резолюцией WONTFIX закрыли баг №641509 «onbeforeunload event does not display site-supplied text, only standard message», судя по комментариям, окончательно и бесповоротно. В связи с этим захотелось написать немного об истории вопроса.
Многим известно, что благодаря onbeforeunload можно попросить пользователя не покидать веб-страницу в случае, если у него есть несохранённые данные (к примеру, написано в форме, но не отправлено сообщение на форум). Для этого достаточно дописать примерно такой JavaScript:
После этого в идеале если пользователь пожелает покинуть страницу (любым способом — закрыть вкладку, весь браузер, перезагрузить страницу, ввести новый адрес в адресную строку, перейти по закладке и т. д.), он увидит запрос подтверждения и уход со страницы можно будет отменить. Ранее недобросовестные авторы сайтов пытались с помощью этого окошка перехитрить пользователя и задержать его на странице, например, используя текст «Нажмите OK, чтобы продолжить работу с сайтом и Cancel, чтобы закрыть» (на самом деле кнопки работали наоборот). Или даже что-нибудь более страшное, например «Нажмите OK, чтобы подтвердить снятие $1000 с вашей кредитной карты».
Затем браузеры поумнели и стали дописывать вспомогательный текст, затрудняющий обман пользователя. Вот, например, как это делает IE8:
Практически аналогичный текст был в Firefox 3:
Если его весь прочитать, то становится понятно, что сообщил сайт, а что — браузер. Однако обмануть всё равно можно.
Правильнее поступили авторы Safari и Chrome. В этих браузерах окошки выглядят так:
Здесь мы видим чёткое описание действий прямо на кнопках. Уже весьма трудно убедить пользователя нажать «Уйти», чтобы остаться и «Остаться», чтобы уйти. На мой взгляд, решение идеальное и можно эту тему закрыть. Вообще, как известно, безликое OK почти в любом диалоге следует заменять на название действия (например, «Удалить файлы», «Искать», «Добавить строку», «Открыть файл» и т. д.), это уменьшает количество ошибок пользователя, даже если вы полностью контролируете текст диалога.
В чём же была драма с багом 641509? В том, что это подтверждение в Firefox 4 и выше выглядит так:
Как видно, пользовательский текст исчез вообще. С 4-й версии веб-сайт не может сообщить пользователю никакого дополнительного сообщения и объяснить, почему конкретно он не хочет, чтобы пользователь уходил. Скажем, если вы реализуете интерфейс для работы со многими документами в одном окне, и какой-то из них не сохранён, можно было бы сказать, какой конкретно, но в Firefox вы этого не поймёте. Возможно, вы его и не желаете сохранять и увидев сообщение, спокойно бы ушли со страницы, а так вы не знаете, в чём дело. В простыне комментариев к багу вы найдёте много других примеров недовольных веб-программистов о том, что они хотели бы сказать пользователю в этом окошке.
Команда Firefox объясняет своё решение тем, что если веб-страница должна объяснять, зачем она не отпускает пользователя, то это плохая веб-страница. Остаётся открытым вопрос, всегда ли это верно и вообще дело ли это браузера запрещать плохим веб-страницам работать. Здесь ведь не идёт речь о тысяче поп-апов с порнобаннерами. Так или иначе, авторам веб-сайтов следует помнить, что пользователь, если он использует Firefox, может и не увидеть сообщения, которое вы ему показываете.
Вы спросите, почему я не упомянул Оперу? А в ней вообще никакого окошка не выдаётся. Страница молча закрывается. Как сообщают разработчики, Опера осознанно не поддерживает событие onbeforeunload.
Источник
window.onbeforeunload не работает
У меня есть форма, где поля ввода сохраняются на изменение. В Firefox (5) это работает, даже когда окно закрыто, но для Chrome и IE это не так, и я должен быть уверен, что я сохраняю эти данные, даже если они пытаются закрыть окно после того, как они ввели поле, но событие onBlur не произошло (т. е. они что-то набрали в текстовое поле, но не вывели из него табуляции).
Я прочитал следующие статьи SO об использовании window.onbeforeunload: статья 1 статья 2
Если я использую следующее:
Тогда я получаю всплывающее окно с «onbeforeunload» в.
Но если я попробую:
Тогда ничего не происходит в любом браузере, даже Firefox.
Я был бы признателен, если бы кто-то мог указать, где я могу пойти не так.
5 ответов
Вы должны return из onbeforeunload :
ОБНОВЛЕНИЕ
В соответствии с комментариями, предупреждение больше не работает на более новых версиях, все остальное идет 🙂
С 25 мая 2011 года в спецификации HTML5 говорится, что вызовы методов window.showModalDialog() , window.alert() , window.confirm() и window.prompt() могут игнорироваться во время этого события.
Также предлагается использовать это через интерфейс addEventListener :
Вы можете и должны обработать это событие с помощью window.addEventListener() и beforeunload события.
Обновленный код теперь будет выглядеть так:
Вы просто не можете сделать alert () в onbeforeunload, все остальное работает
Да, что все говорят выше.
Для вашей непосредственной ситуации вместо onChange вы можете использовать onInput, новый в html5. Событие ввода такое же, но оно срабатывает при каждом нажатии клавиши независимо от фокуса. Также работает на выбор и все остальное, как и onChange.
Причина, по которой ничего не происходит при использовании ‘alert ()’, вероятно, объясняется MDN: «Спецификация HTML гласит, что вызовы методов window.alert (), window.confirm () и window.prompt () могут быть проигнорированы. во время этого события. «
Но есть и другая причина, по которой вы можете вообще не видеть предупреждение, независимо от того, вызывает ли оно alert () или нет, также объясненное на том же сайте:
«. браузеры могут не отображать приглашения, созданные в обработчиках событий до загрузки, если со страницей не взаимодействовали»
Это то, что я вижу с текущими версиями Chrome и FireFox. Я открываю свою страницу, на которой установлен обработчик beforeunload с этим кодом:
Если я не нажимаю на свою страницу, другими словами «не взаимодействую» с ней, и нажимаю кнопку закрытия, окно закрывается без предупреждения.
Но если я нажму на страницу, прежде чем пытаться закрыть окно или вкладку, я получу предупреждение и могу отменить закрытие окна.
Таким образом, эти браузеры являются «умными» (и удобными для пользователя) в том смысле, что если вы ничего не сделали со страницей, на ней не может быть никакого пользовательского ввода, который нужно было бы сохранить, поэтому они закроют окно без каких-либо предупреждений.
Учтите, что без этой функции любой сайт может эгоистично спросить вас: «Вы действительно хотите покинуть наш сайт?», Когда вы уже четко указали свое намерение покинуть их сайт.
Чтобы вывести сообщение, когда пользователь покидает страницу, чтобы подтвердить уход, вы просто делаете:
Источник
окно.onbeforeunload не работает
у меня есть форма, где поля ввода сохраняются onChange. В firefox (5) это работает даже тогда, когда окно закрыто, но для Chrome и IE это не так, и мне нужно быть уверенным, что я сохраняю эти данные, даже если они пытаются закрыть окно После того, как они ввели поле, но событие onBlur не произошло (т. е. они ввели что-то в текстовое поле, но не вышли из него).
Я прочитал следующие статьи SO об использовании окна.onbeforeunload: статьи 1 статья 2
Если я использую следующий:
затем я получаю всплывающее окно с «onbeforeunload».
но если я попробую:
ничего не происходит в любом браузере, даже в Firefox.
чего я хочу добиться-это:
Я был бы благодарен, если бы кто-нибудь мог указать, где я могу ошибаться.
5 ответов
вы должны return С onbeforeunload :
обновление
согласно комментариям, alert, похоже, больше не работает над более новыми версиями, все остальное идет:)
С 25 мая 2011 года в спецификации HTML5 указано, что вызовы window.showModalDialog() , window.alert() , window.confirm() и window.prompt() методы могут быть проигнорированы во время этого событие.
также предлагается использовать это через :
вы can и должны обрабатывать это событие через window.addEventListener() и beforeunload событие.
обновленный код будет выглядеть так:
Кажется, что есть много дезинформации о том, как использовать это событие (даже в upvoted ответах на этой странице).
на onbeforeunload event API поставляется браузером для определенной цели: единственное можно сделать это стоит сделать в этом методе, чтобы вернуть строку, которую браузер затем предложит пользователю указать им, что действие должно быть принято, прежде чем они перейдут от страницы. Вы не может предотвратить их от переход от страницы (представьте, какой кошмар это было бы для конечного пользователя).
поскольку браузеры используют приглашение подтверждения, чтобы показать пользователю строку, которую вы вернули из прослушивателя событий, вы также не можете ничего сделать в методе (например, выполнить запрос ajax).
в приложении, которое я написал, Я хочу предложить пользователю сообщить им, что у них есть несохраненные изменения, прежде чем они покинут страницу. Браузер запрашивает их с сообщением и, после этого, это из моих рук, пользователь может выбрать остаться или уйти, но вы больше не контролируете приложение в этот момент.
пример того, как я его использую (псевдо-код):
если (и только если) приложение имеет несохраненные изменения, браузер предлагает пользователю либо игнорировать мое сообщение (и оставить страницу в любом случае), либо не покидать страницу. Если они решат оставить страницу в любом случае, слишком плохо, вы ничего не можете сделать (и не должны быть в состоянии делать с этим.
Источник
window.onbeforeunload not working in chrome
This is the code which i used for window.onbeforeunload
this works with IE and Mozilla but does not work with Chrome. please help. thanks in advance.
10 Answers 10
It seems that the only thing you can do with onbeforeunload in recent version of Chrome is to set the warning message.
Will work. Other code in the function seems to be ignored by Chrome
UPDATE: As of Chrome V51, the returned string will be ignored and a default message shown instead.
Know I’m late to this, but was scratching my head why my custom beforeunload message wasn’t working in Chrome and was reading this. So in case anyone else does the same, Chrome from Version 51 onwards no longer supports custom messages on beforeunload. Apparently it’s because the feature has been misused by various scams. Instead you get a predefined Chrome message which may or may not suit your purposes. More details at:
Personally do not think the message they’ve chosen is a great one as it mentions leaving the site and one of the most common legitimate uses for onbeforeunload is for dirty flag processing/checking on a web form so it’s not a great wording as a lot of the time the user will still be on your site, just have clicked the cancel or reload button by mistake.
You should try this:
This works on latest Chrome. We had the same issue the e.returnValue with value of onbeforeunload solved my problem.
Your code should be like this:
Confirmed this behavior on chrome 21.0.1180.79
this seems to work with the same restritions as XSS, if you are refreshing the page or open a page on same domain+port the the script is executed, otherwise it will only be executed if you are returning a string (or similar) and a dialog will be shown asking the user if he wants to leans or stay in the page.
this is an incredible stupid thing to do, because onunload/onbeforeunload are not only used to ask/prevent page changes.
In my case i was using it too save some changes done during page edition and i dont want to prevent the user from changing the page (at least chrome should respect a returning true or change the page without the asking if the return is not a string), script running time restrictions would be enought.
This is specially annoying in chrome because onblur event is not sent to editing elements when unloading a page, chrome simply igores the curent page and jumps to another. So the only change of saving the changes was the unload process and it now can’t be done without the STUPID question if the user wants to change it. of course he wants and I didnt want to prevent that.
hope chrome resolves this in a more elegant way soon.
Источник
WindowEventHandlers.onbeforeunload
Свойство обработчика события WindowEventHandlers.onbeforeunload содержит код, который выполняется при отправке события beforeunload (en-US) . Это событие срабатывает, когда окно браузера unload (en-US) свои ресурсы. При этом документ остаётся видимым и событие всё ещё можно отменить.
Примечание: Для борьбы с нежелательными всплывающими окнами, некоторые браузеры не отображают текст передаваемый в beforeunload событии, если они не связаны с самой страницей; некоторые не показывают их вообще. Список конкретных браузеров смотрите в секции: Совместимость_с_браузерами.
Синтаксис
- funcRef является ссылкой на функцию или выражение функции.
- Функция должна назначать строковое значение свойству returnValue объекта Event и возвращать ту же строку.
Пример
Примечания
Когда это событие возвращает (или выставляет свойство returnValue) значение, отличное от null или undefined, пользователю предлагается подтвердить unload (en-US) страницы в prompt . В некоторых браузерах возвращаемое значение отображается в этом диалоговом окне. Начиная с Firefox 4, Chrome 51, Opera 38 и Safari 9.1 вместо возвращаемой строки будет показана общая строка, не контролируемая страницей. Например, Firefox отображает строку: «This page is asking you to confirm that you want to leave — data you have entered may not be saved.». Смотрите баг 588292 и Chrome Platform Status.
С 25 мая 2011, в спецификации HTML5 указано, что исполнение методов window.alert() , window.confirm() и window.prompt() может игнорироваться во время этого события. Смотрите спецификацию HTML5 чтобы узнать подробности.
Также необходимо отметить, что различные мобильные браузеры игнорируют результат этого события (это является причиной, почему они не запрашивают подтверждения пользователя). Firefox имеет скрытую настройку в about:config для того, чтобы вести себя также. В сущности это значит, что пользователь постоянно подтверждает, что документ может быть выгружен.
Вы можете и должны обрабатывать данное событие через window.addEventListener() и событие beforeunload (en-US) . Больше документации доступно здесь.
Спецификации
Событие было первоначально добавлено Microsoft в Internet Explorer 4 и стандартизовано в HTML5 спецификации.
Источник