Jquery закрытие страницы. Javascript страницу Как захватить событие закрытия окна браузера? Здесь будет ваше предложение, форма и т.п
событие перезагрузки страницы js (14)
Я хочу захватить событие закрытия окна браузера / вкладки. Я попробовал следующее с jQuery:
JQuery(window).bind("beforeunload", function() { return confirm("Do you really want to close?") })
Но он также работает и с подачей формы, чего я не хочу. Я хочу событие, которое срабатывает только тогда, когда пользователь закрывает окно.
Возможно, просто beforeunload обработчик события beforeunload обработчике событий submit формы:
JQuery("form").submit(function() { jQuery(window).unbind("beforeunload"); ... });
Если ваше представление формы отправляет их на другую страницу (как я полагаю, это так, то есть запуск beforeunload), вы можете попытаться изменить beforeunload формы на вызов ajax. Таким образом, они не покинут вашу страницу при beforeunload формы, и вы можете использовать свой beforeunload привязки beforeunload своему усмотрению.
Попробуйте это также
Window.onbeforeunload = function () { if (pasteEditorChange) { var btn = confirm("Do You Want to Save the Changess?"); if(btn === true){ SavetoEdit();//your function call } else{ windowClose();//your function call } } else { windowClose();//your function call } };
После работал для меня;
$(window).unload(function(event) { if(event.clientY < 0) { //do whatever you want when closing the window.. } });
Я использовал Slaks, но это не работает, как есть, поскольку onbeforeunload returnValue анализируется как строка, а затем отображается в окне подтверждения браузера. Так отображается значение true, например «true».
Просто используя обратную связь. Вот мой код
Var preventUnloadPrompt; var messageBeforeUnload = "my message here - Are you sure you want to leave this page?"; //var redirectAfterPrompt = "http://www.google.co.in"; $("a").live("click", function() { preventUnloadPrompt = true; }); $("form").live("submit", function() { preventUnloadPrompt = true; }); $(window).bind("beforeunload", function(e) { var rval; if(preventUnloadPrompt) { return; } else { //location.replace(redirectAfterPrompt); return messageBeforeUnload; } return rval; })
Var validNavigation = false; jQuery(document).ready(function () { wireUpEvents(); }); function endSession() { // Browser or broswer tab is closed // Do sth here ... alert("bye"); } function wireUpEvents() { /* * For a list of events that triggers onbeforeunload on IE * check http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx */ window.onbeforeunload = function () { debugger if (!validNavigation) { endSession(); } } // Attach the event keypress to exclude the F5 refresh $(document).bind("keypress", function (e) { debugger if (e.keyCode == 116) { validNavigation = true; } }); // Attach the event click for all links in the page $("a").bind("click", function () { debugger validNavigation = true; }); // Attach the event submit for all forms in the page $("form").bind("submit", function () { debugger validNavigation = true; }); // Attach the event click for all inputs in the page $("input").bind("click", function () { debugger validNavigation = true; }); }`enter code here`
Возможно, вы можете обработать OnSubmit и установить флаг, который вы позже проверите в обработчике OnBeforeUnload.
JQuery(window).bind("beforeunload", function (e) { var activeElementTagName = e.target.activeElement.tagName; if (activeElementTagName != "A" && activeElementTagName != "INPUT") { return "Do you really want to close?"; } })
Для решения, которое хорошо работало с сторонними элементами управления, такими как Telerik (например, RadComboBox) и DevExpress, которые используют теги Anchor по разным причинам, рассмотрите следующий код, который представляет собой слегка улучшенную версию кода desm с лучшим селектором для себя привязка тегов привязки:
Var inFormOrLink; $("a:not(), a").live("click", function() { inFormOrLink = true; }); $("form").bind("submit", function() { inFormOrLink = true; }); $(window).bind("beforeunload", function(eventObject) { var returnValue = undefined; if (! inFormOrLink) { returnValue = "Do you really want to close?"; } eventObject.returnValue = returnValue; return returnValue; });
Мой ответ направлен на предоставление простых тестов.
КАКСм. Ответ @SLaks .
$(window).on("beforeunload", function() { return inFormOrLink ? "Do you really want to close?" : null; })
Сколько времени займет браузер, чтобы, наконец, закрыть страницу?Всякий раз, когда пользователь закрывает страницу (кнопка x или CTRL + W), браузер выполняет данный код перед beforeunload , но не на неопределенный срок. Единственным исключением является окно подтверждения (return "Do you really want to close?), Который будет ждать ответа пользователя.
Chrome
: 2 секунды.
Firefox
: ∞ (или двойной щелчок или принудительное закрытие)
Край
: ∞ (или двойной щелчок)
Проводник 11
: 0 секунд.
Safari
: TODO
Что мы использовали для проверки этого:
- Сервер Node.js Express с журналом запросов
- Следующий короткий HTML-файл
То, что он делает, - отправить как можно больше запросов, прежде чем браузер завершит свою страницу (синхронно).
function request() { return $.ajax({ type: "GET", url: "http://localhost:3030/" + Date.now(), async: true }).responseText; } window.onbeforeunload = () => { while (true) { request(); } return null; }
Выход Chrome:
GET /1480451321041 404 0.389 ms - 32 GET /1480451321052 404 0.219 ms - 32 ... GET /hello/1480451322998 404 0.328 ms - 32 1957ms ≈ 2 seconds // we assume it"s 2 seconds since requests can take few milliseconds to be sent.
Для решения кросс-браузера (протестированного в Chrome 21, IE9, FF15) рассмотрите следующий код, который представляет собой слегка измененную версию кода Slaks:
Var inFormOrLink; $("a").live("click", function() { inFormOrLink = true; }); $("form").bind("submit", function() { inFormOrLink = true; }); $(window).bind("beforeunload", function(eventObject) { var returnValue = undefined; if (! inFormOrLink) { returnValue = "Do you really want to close?"; } eventObject.returnValue = returnValue; return returnValue; });
Обратите внимание, что с Firefox 4 появляется сообщение «Вы действительно хотите закрыть?». не отображается. FF просто отображает общее сообщение. См. Примечание в https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload
Событие beforeunload срабатывает всякий раз, когда пользователь покидает вашу страницу по какой-либо причине.
Например, он будет запущен, если пользователь отправит форму, щелкнет ссылку, закроет окно (или вкладку) или перейдет на новую страницу с помощью адресной строки, окна поиска или закладки.
Var inFormOrLink; $("a").on("click", function() { inFormOrLink = true; }); $("form").on("submit", function() { inFormOrLink = true; }); $(window).on("beforeunload", function() { return inFormOrLink ? "Do you really want to close?" : null; })
Для версий jQuery старше 1.7 попробуйте следующее:
Var inFormOrLink; $("a").live("click", function() { inFormOrLink = true; }); $("form").bind("submit", function() { inFormOrLink = true; }); $(window).bind("beforeunload", function() { return inFormOrLink ? "Do you really want to close?" : null; })
live метод не работает с событием submit , поэтому, если вы добавите новую форму, вам также понадобится привязать обработчик к ней.
Обратите внимание: если другой обработчик событий отменяет отправку или навигация, вы потеряете приглашение подтверждения, если окно фактически закрыто позже. Вы можете исправить это, записав время в событиях submit и click и проверив, будет ли beforeunload более чем через пару секунд.
Просто проверьте...
Function wopen_close(){ var w = window.open($url, "_blank", "width=600, height=400, scrollbars=no, status=no, resizable=no, screenx=0, screeny=0"); w.onunload = function(){ if (window.closed) { alert("window closed"); }else{ alert("just refreshed"); } } }
Начиная с jQuery 1.7, метод.live () устарел. Используйте.on () для присоединения обработчиков событий. Пользователи более старых версий jQuery должны использовать.delegate () в предпочтении.live ()
$(window).bind("beforeunload", function() { return true || confirm("Do you really want to close?"); });
события window js (14)
Я хочу захватить событие закрытия окна браузера / вкладки. Я попробовал следующее с jQuery:
JQuery(window).bind("beforeunload", function() { return confirm("Do you really want to close?") })
Но он также работает и с подачей формы, чего я не хочу. Я хочу событие, которое срабатывает только тогда, когда пользователь закрывает окно.
Начиная с jQuery 1.7, метод.live () устарел. Используйте.on () для присоединения обработчиков событий. Пользователи более старых версий jQuery должны использовать.delegate () в предпочтении.live ()
$(window).bind("beforeunload", function() { return true || confirm("Do you really want to close?"); });
$(window).unbind();
JQuery(window).bind("beforeunload", function (e) { var activeElementTagName = e.target.activeElement.tagName; if (activeElementTagName != "A" && activeElementTagName != "INPUT") { return "Do you really want to close?"; } })
Мой ответ направлен на предоставление простых тестов.
КАКСм. Ответ @SLaks .
$(window).on("beforeunload", function() { return inFormOrLink ? "Do you really want to close?" : null; })
Сколько времени займет браузер, чтобы, наконец, закрыть страницу?Всякий раз, когда пользователь закрывает страницу (кнопка x или CTRL + W), браузер выполняет данный код перед beforeunload , но не на неопределенный срок. Единственным исключением является окно подтверждения (return "Do you really want to close?), Который будет ждать ответа пользователя.
Chrome
: 2 секунды.
Firefox
: ∞ (или двойной щелчок или принудительное закрытие)
Край
: ∞ (или двойной щелчок)
Проводник 11
: 0 секунд.
Safari
: TODO
Что мы использовали для проверки этого:
- Сервер Node.js Express с журналом запросов
- Следующий короткий HTML-файл
То, что он делает, - отправить как можно больше запросов, прежде чем браузер завершит свою страницу (синхронно).
function request() { return $.ajax({ type: "GET", url: "http://localhost:3030/" + Date.now(), async: true }).responseText; } window.onbeforeunload = () => { while (true) { request(); } return null; }
Выход Chrome:
GET /1480451321041 404 0.389 ms - 32 GET /1480451321052 404 0.219 ms - 32 ... GET /hello/1480451322998 404 0.328 ms - 32 1957ms ≈ 2 seconds // we assume it"s 2 seconds since requests can take few milliseconds to be sent.
Попробуйте это также
Window.onbeforeunload = function () { if (pasteEditorChange) { var btn = confirm("Do You Want to Save the Changess?"); if(btn === true){ SavetoEdit();//your function call } else{ windowClose();//your function call } } else { windowClose();//your function call } };
Просто проверьте...
Function wopen_close(){ var w = window.open($url, "_blank", "width=600, height=400, scrollbars=no, status=no, resizable=no, screenx=0, screeny=0"); w.onunload = function(){ if (window.closed) { alert("window closed"); }else{ alert("just refreshed"); } } }
К сожалению, будет ли запущена перезагрузка, перенаправление новой страницы или закрытие события браузера. Альтернативой является улавливание идентификатора, инициирующего событие, и если это форма, не вызывает никакой функции, и если она не является идентификатором формы, то делайте то, что вы хотите сделать, когда страница закрывается. Я не уверен, что это также возможно напрямую и утомительно.
Вы можете сделать некоторые мелочи, прежде чем клиент закроет вкладку. javascript обнаруживает браузер закрыть вкладку / закрыть браузер, но если ваш список действий большой, а вкладка закрывается до того, как она будет завершена, вы беспомощны. Вы можете попробовать, но с моим опытом donot зависит от него.
Window.addEventListener("beforeunload", function (e) { var confirmationMessage = "\o/"; /* Do you small action code here */ (e || window.event).returnValue = confirmationMessage; //Gecko + IE return confirmationMessage; //Webkit, Safari, Chrome });
Если ваше представление формы отправляет их на другую страницу (как я полагаю, это так, то есть запуск beforeunload), вы можете попытаться изменить beforeunload формы на вызов ajax. Таким образом, они не покинут вашу страницу при beforeunload формы, и вы можете использовать свой beforeunload привязки beforeunload своему усмотрению.
Для решения, которое хорошо работало с сторонними элементами управления, такими как Telerik (например, RadComboBox) и DevExpress, которые используют теги Anchor по разным причинам, рассмотрите следующий код, который представляет собой слегка улучшенную версию кода desm с лучшим селектором для себя привязка тегов привязки:
Var inFormOrLink; $("a:not(), a").live("click", function() { inFormOrLink = true; }); $("form").bind("submit", function() { inFormOrLink = true; }); $(window).bind("beforeunload", function(eventObject) { var returnValue = undefined; if (! inFormOrLink) { returnValue = "Do you really want to close?"; } eventObject.returnValue = returnValue; return returnValue; });
Я использовал Slaks, но это не работает, как есть, поскольку onbeforeunload returnValue анализируется как строка, а затем отображается в окне подтверждения браузера. Так отображается значение true, например «true».
Просто используя обратную связь. Вот мой код
Var preventUnloadPrompt; var messageBeforeUnload = "my message here - Are you sure you want to leave this page?"; //var redirectAfterPrompt = "http://www.google.co.in"; $("a").live("click", function() { preventUnloadPrompt = true; }); $("form").live("submit", function() { preventUnloadPrompt = true; }); $(window).bind("beforeunload", function(e) { var rval; if(preventUnloadPrompt) { return; } else { //location.replace(redirectAfterPrompt); return messageBeforeUnload; } return rval; })
Var validNavigation = false; jQuery(document).ready(function () { wireUpEvents(); }); function endSession() { // Browser or broswer tab is closed // Do sth here ... alert("bye"); } function wireUpEvents() { /* * For a list of events that triggers onbeforeunload on IE * check http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx */ window.onbeforeunload = function () { debugger if (!validNavigation) { endSession(); } } // Attach the event keypress to exclude the F5 refresh $(document).bind("keypress", function (e) { debugger if (e.keyCode == 116) { validNavigation = true; } }); // Attach the event click for all links in the page $("a").bind("click", function () { debugger validNavigation = true; }); // Attach the event submit for all forms in the page $("form").bind("submit", function () { debugger validNavigation = true; }); // Attach the event click for all inputs in the page $("input").bind("click", function () { debugger validNavigation = true; }); }`enter code here`
Моя проблема: событие «onbeforeunload» будет инициировано только в том случае, если было нечетное количество отправлений (кликов). У меня было сочетание решений из подобных потоков в SO, чтобы мое решение работало. хорошо, мой код будет говорить.
$(document).ready(function() { updatefgallowPrompt(true); window.onbeforeunload = WarnUser; } function WarnUser() { var allowPrompt = getfgallowPrompt(); if(allowPrompt) { saveIndexedDataAlert(); return null; } else { updatefgallowPrompt(true); event.stopPropagation } } function saveIndexedDataAlert() { var allowPrompt = getfgallowPrompt(); var lenIndexedDocs = parseInt($("#sortable3 > li").size()) + parseInt($("#sortable3 > ul").size()); if(allowPrompt && $.trim(lenIndexedDocs) > 0) { event.returnValue = "Your message"; } else { event.returnValue = " "; updatefgallowPrompt(true); } } $(document).click(function(event) { $("a").live("click", function() { updatefgallowPrompt(false); }); }); function updatefgallowPrompt (allowPrompt){ //exit msg dfds $("body").data("allowPrompt", allowPrompt); } function getfgallowPrompt(){ return $("body").data("allowPrompt"); }
После работал для меня;
$(window).unload(function(event) { if(event.clientY < 0) { //do whatever you want when closing the window.. } });
Window.onbeforeunload = function () { return "Do you really want to close?"; };
Возможно, просто beforeunload обработчик события beforeunload обработчике событий submit формы:
JQuery("form").submit(function() { jQuery(window).unbind("beforeunload"); ... });
У меня уже несколько раз спрашивали, как можно обработать закрытие вкладки . Допустим, пользователь хочет закрыть Ваш сайт, а Вы делаете какое-нибудь всплывающее окно и спрашиваете: "А Вы уверены? ", или делаете редирект на другой сайт. Разумеется, эти методы очень сильно раздражают пользователей, поэтому рекомендую не использовать их. К счастью, браузеры это так же очень плохо обрабатывают, однако, кое-какие возможности по обработке закрытия вкладки всё-таки имеются.
Есть возможность спросить у пользователя: "Уверен ли он, что хочет закрыть страницу? ". Вот как можно реализовать такую обработку закрытия вкладки :
window.onbeforeunload = function() {
return "Что-нибудь сообщить пользователю";
}
Вот такой код будет работать в Firefox , IE , Chrome , но не будет работать в Opera (этот браузер onbeforeunload вообще никак не обрабатывает). При этом сама функция обработки может только возвращать строку, то есть никаких редиректов там не сработает.
Возвращаемая строка будет выводиться в окне подтверждения в Chrome и IE . В Firefox эта строка никак себя не проявляет.
«onbeforeunload event does not display site-supplied text, only standard message», судя по комментариям, окончательно и бесповоротно. В связи с этим захотелось написать немного об истории вопроса.
Многим известно, что благодаря onbeforeunload можно попросить пользователя не покидать веб-страницу в случае, если у него есть несохранённые данные (к примеру, написано в форме, но не отправлено сообщение на форум). Для этого достаточно дописать примерно такой JavaScript:
window.onbeforeunload = function (evt) {
var message = "Document "foo" is not saved. You will lost the changes if you leave the page.";
if (typeof evt == "undefined") {
evt = window.event;
}
if (evt) {
evt.returnValue = message;
}
return message;
}
После этого в идеале если пользователь пожелает покинуть страницу (любым способом - закрыть вкладку, весь браузер, перезагрузить страницу, ввести новый адрес в адресную строку, перейти по закладке и т. д.), он увидит запрос подтверждения и уход со страницы можно будет отменить. Ранее недобросовестные авторы сайтов пытались с помощью этого окошка перехитрить пользователя и задержать его на странице, например, используя текст «Нажмите OK, чтобы продолжить работу с сайтом и Cancel, чтобы закрыть» (на самом деле кнопки работали наоборот). Или даже что-нибудь более страшное, например «Нажмите OK, чтобы подтвердить снятие $1000 с вашей кредитной карты».
Затем браузеры поумнели и стали дописывать вспомогательный текст, затрудняющий обман пользователя. Вот, например, как это делает IE8:
Практически аналогичный текст был в Firefox 3:
Если его весь прочитать, то становится понятно, что сообщил сайт, а что - браузер. Однако обмануть всё равно можно.
Здесь мы видим чёткое описание действий прямо на кнопках. Уже весьма трудно убедить пользователя нажать «Уйти», чтобы остаться и «Остаться», чтобы уйти. На мой взгляд, решение идеальное и можно эту тему закрыть. Вообще, как известно, безликое OK почти в любом диалоге следует заменять на название действия (например, «Удалить файлы», «Искать», «Добавить строку», «Открыть файл» и т. д.), это уменьшает количество ошибок пользователя, даже если вы полностью контролируете текст диалога.
В чём же была драма с багом 641509? В том, что это подтверждение в Firefox 4 и выше выглядит так:
Как видно, пользовательский текст исчез вообще. С 4-й версии веб-сайт не может сообщить пользователю никакого дополнительного сообщения и объяснить, почему конкретно он не хочет, чтобы пользователь уходил. Скажем, если вы реализуете интерфейс для работы со многими документами в одном окне, и какой-то из них не сохранён, можно было бы сказать, какой конкретно, но в Firefox вы этого не поймёте. Возможно, вы его и не желаете сохранять и увидев сообщение, спокойно бы ушли со страницы, а так вы не знаете, в чём дело. В простыне