Js событие закрытия страницы. Как определить событие закрытия окна (новая вкладка)? Что мы использовали для проверки этого

У меня уже несколько раз спрашивали, как можно обработать закрытие вкладки . Допустим, пользователь хочет закрыть Ваш сайт, а Вы делаете какое-нибудь всплывающее окно и спрашиваете: "А Вы уверены? ", или делаете редирект на другой сайт. Разумеется, эти методы очень сильно раздражают пользователей, поэтому рекомендую не использовать их. К счастью, браузеры это так же очень плохо обрабатывают, однако, кое-какие возможности по обработке закрытия вкладки всё-таки имеются.

Есть возможность спросить у пользователя: "Уверен ли он, что хочет закрыть страницу? ". Вот как можно реализовать такую обработку закрытия вкладки :

window.onbeforeunload = function() {
return "Что-нибудь сообщить пользователю";
}

Вот такой код будет работать в Firefox , IE , Chrome , но не будет работать в Opera (этот браузер onbeforeunload вообще никак не обрабатывает). При этом сама функция обработки может только возвращать строку, то есть никаких редиректов там не сработает.

Возвращаемая строка будет выводиться в окне подтверждения в Chrome и IE . В Firefox эта строка никак себя не проявляет.

события 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, которые позволяют открывать и закрывать окна, определять закрыто ли окно, а также получать его внутреннее имя и др.

Методы объекта window: open() , close() , print() , focus() и blur() .

В этом разделе мы рассмотрим следующие методы объекта window:

open() - предназначен для открытия окон (вкладок);
close() - предназначен для закрытия окон. В основном используется для закрытия окон открытых методом open() ;
print() - предназначен для печати содержимого окна;
focus() - предназначен для передачи фокусу указанному окну;
blur() - предназначен для удаления фокуса с указанного окна.

Метод open() . Он предназначен для открытия нового окна (вкладки) в браузере и имеет следующий синтаксис:

Параметры метода:

В первом параметре указывается URL страницы, которую необходимо загрузить в это окно. Если значение данного параметра не задавать, то в окне будет отображена пустая страница (about:blank).
Во втором параметре метода open указывается значение атрибута target или имя окна. Поддерживаются следующие значения:

_blank - URL загружается в новое окно (вкладку). Это значение используется по умолчанию;
_parent - URL загружается в родительский фрейм. Если его нет, то URL загружается в текущее окно (вкладку);
_self - URL загружается в текущее окно;
_top - отменяет все фреймы и загружает URL в текущее окно (вкладку) браузера. Если его нет, то URL загружается в текущее окно (вкладку);
В качестве параметра Вы также можете указать имя открываемого окна. Данное имя является внутренним и может использоваться веб-разработчиками для вызова функций и методов этого окна.

Третий параметр предназначен для указания набора свойств окна, которые вводятся через запятую. Поддерживаются следующие основные свойства окна:

left , top - координаты (в пикселях) левого верхнего угла окна браузера относительно левого верхнего угла экрана. Значения этих свойств должны быть положительными или равными 0;
height , width - высота и ширина рабочей области окна браузера. При указании значений необходимо учитывать, что ширина и высота окна браузера не может быть меньше 100 пикселей;
resizable - логическое свойство окна, которое предназначено для включения или выключения возможности изменения размеров окна браузера. Данное свойство принимает следующие значения: yes или 1 , и no или 0 ;
scrollbars - логическое свойство окна, которое предназначено для включения или выключения отображение полос прокрутки для содержимого окна браузера. Данное свойство принимает следующие значения: yes или 1 , и no или 0 ;
status - логическое свойство окна, которое предназначено для включения или выключения отображения статусной строки браузера. Данное свойство принимает следующие значения: yes или 1 , и no или 0 .

Рассмотрим следующий примеры:

1. Открыть пустую страницу about:blank в новом окне. Данное окно должно иметь ширину и высоту, равную 250рх:

Window.open("","","width=250,height=250");

2. Открыть веб-страницу "http://сайт/" в текущем окне:

Window.open("http://сайт/", "_self");

3. Открыть новое окно, имеющее определённые свойства (top=100, left=100, width=400, height=500, scrollbars=yes, resizabie=yes):

Window.open("http://сайт", "_blank", "top=100, left=100, width=400, height=500, scrollbars=yes, resizable=yes");

Как взаимодействовать с окном после его открытия?

Метод open() позволяет не только открыть окно, но и получить ссылку на данное окно. Данная ссылка позволяет взаимодействовать с этим окном посредством вызова определённых свойств и методов. Т.е. мы можем с помощью JavaScript кода, расположенного в одном окне управлять другим окном.

Например, для того чтобы обратиться к объекту document открытого окна:

Открыть пустое новое окно и вывести в ней некоторый текст:

Var myWindow = window.open("", "", "width=250, height=250"); myWindow.document.write("

Некоторый текст

");

Примечание: Взаимодействовать Вы можете только с теми окнами, которые сами открыли, с другими окнами Вы работать не можете.

Метод close()

Он предназначен для закрытия окна. Данный метод не имеет параметров. Он обычно используется для закрытия окон созданных методом open() . В противном случае, когда Вы попытаетесь закрыть окно (вкладку), открытое самим пользователем (не из JavaScript), то браузер из-за соображений безопасности запросит у пользователя подтверждение на выполнение этого действия.

Например, cоздадим кнопки для открытия и закрытия окна с именем myWindow:

//создать переменную, в которой будем хранить ссылку на объект window открытого окна var myWindow; function myWindowOpen { myWindow = window.open("http://www.yandex.ru", “myWindow", "width=250, height=250"); } function myWindowClose { if (myWindow) { myWindow.close(); myWindow = null; } } Oткрыть oкно Закрыть окно

Метод print()

Он предназначен для печати содержимого окна. Данный метод не имеет параметров.

function myPrint() { window.print(); } Печать страницы

Метод focus()

Он предназначен для передачи фокусу указанному окну. Данный метод не имеет параметров.

Метод blur()

Он предназначен, чтобы убрать фокус с указанного окна, т.е. перемещает его на задний план. Данный метод не имеет параметров.

Свойства объекта window: name , opener , closed .

В этом разделе рассмотрим следующие свойства объекта window:

name - предназначено для получения или установления внутреннего имени окна;
opener - позволяет получить в текущем окне, ссылку на окно (объект window), с которого было открыто данное окно;
closed - свойство логического типа, которое возвращает: true , если окно закрыто и false , если окно открыто.

Свойство name

Данное свойство очень часто используется для изменения внутреннего имени окна, после того как оно уже открыто. Кроме этого, свойство name может вернуть текущее значение внутреннего имени окна.

Внутреннее имя окна, это не строка, заключённая между открывающим и закрывающим тегом title - это имя окна которое предназначено для разработчика. Т.е. данное имя невидимо для пользователя.

Данное имя в основном используется в гиперссылках и формах для указания окна, в котором необходимо открыть страницу. Например, для указания внутреннего имя окна в гиперссылке используется атрибут target , Если элемент а имеет атрибут target="searchWindow" , то при нажатии на данную ссылку браузер сначала пытается найти окно с таким внутренним именем (searchWindow), если окна с таким внутренним именем не существует, то он открывает новое окно и присваивает ему имя searchWindow . А если окно с таким именем существует, то новое окно не открывается, а перезагружается страница по указанной ссылке а этом окне. По умолчанию окна а браузере не имеют внутреннего имени.

Например, откроем страницу "http://www.google.com/" в окне, имеющем имя myWindow:

window.name = "myWindow";

Например, откроем окно с помощью метода open() и выведем в нём его имя:

var wnd = window.open("","myTest","width=200, height=300"); wnd.document.write("

Это окно имеет имя:" + wnd.name +".");

Свойство opener

Данное свойство позволяет получить в окне, ссылку на исходное окно (объект window), т.е. на окно из которого было открыто данное окно.

Например, у Вас есть исходное окно (1), в котором Вы с помощью метода ореn() открываете другое окно (2). В этом окне (2) Вы можете с помощью свойства opener получить окно (1).