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

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

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 вы этого не поймёте. Возможно, вы его и не желаете сохранять и увидев сообщение, спокойно бы ушли со страницы, а так вы не знаете, в чём дело. В простыне

На этом уроке мы познакомимся с различными методами объекта 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()

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

function myWindowOpen() { var myWindow = window.open("", "", "width=200,height=100"); } function myWindowFocus() { myWindow.focus(); } function myWindowBlur() { myWindow.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).

function openMyWindow() { var myWindow=window.open("","","width=200,height=200"); myWindow.document.write("Oткрытое окно (2)"); $(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"); ... });

2

У меня есть одна родительская страница и дочерняя страница. дочерняя страница открыта на новой вкладке

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

Я использовал OnUnload и onbeforeunload .
Два метода также называются при обновлении страницы и закрытии вкладок.

Window.onunload = function doUnload(e) { alert("Child window is closing..."); }

Window.onbeforeunload = function doUnload(e) { alert("Child window is closing..."); }

Я должен показать предупреждающее сообщение, только закрыть вкладку в браузере.

Помогите мне. Спасибо заранее.

Я использую следующий сценарий. Его работала в IE. Но не работал в FireFox

window.onbeforeunload = function() { if ((window.event.clientX < 0) || (window.event.clientY < 0) || (window.event.clientX < -80)) { alert("Child window is closing..."); } };

Как добиться этого в FireFox и другой браузер.

• 4 ответа

Сортировка:

Активность

1

Для этого афаик никогда не был сценарием кросс-браузера. Решение состоит в том, чтобы НЕ полагаться на недокументированные и изменчивые функции конкретного браузера, чтобы обнаружить что-то важное.

Поскольку у вас есть страница CHILD, вы можете настроить тест у родителя (открывателя), который с интервалом проверяет свойство childWindowHandle.closed и действует на это.

1

Если предположить, что просто пытается стрелять beforeunload Crossbrowser событие, это в значительной степени делает это (за исключением оперы)

Try{ // http://www.opera.com/support/kb/view/827/ opera.setOverrideHistoryNavigationMode("compatible"); history.navigationMode = "compatible"; }catch(e){} //Our Where The F" Are You Going Message function ReturnMessage() { return "WTF!!!"; } //UnBind Function function UnBindWindow() { window.onbeforeunload = null; return true; } //Bind Links we dont want to affect document.getElementById("homebtn").onclick = UnBindWindow; document.getElementById("googlebtn").onclick = UnBindWindow; //Bind Exit Message Dialogue window.onbeforeunload = ReturnMessage;

0

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

вы можете сделать некоторые мелочи, прежде чем клиент закроет вкладку. javascript detect browser close tab/close browser , но если ваш список действий большой, а вкладка закрывается до того, как она будет завершена, вы беспомощны. Вы можете попробовать, но с моим опытом 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 });