добър ден Наскоро публикувах статия за това как да го направя, но много поискаха да добавят статия с огледален ефект, така че да се появи прозорец, когато посетител напусне сайта, тоест когато се опита да затвори страницата.

Днес ще говорим по тази тема и ще ви покажа проста реализация.

Разбира се, дебатът за това дали трябва или не да добавите затварящ изскачащ прозорец към вашия сайт никога няма да спре. Някои казват, че има специално място в ада, запазено за тези, които го добавят, че това е ужасно вбесяващо, че ако съм решил да си тръгна, тогава ще си тръгна и никакви изскачащи прозорци няма да ме спрат, а само ще ме дразнят. Други казват, че тези изскачащи прозорци увеличават реализациите и работят чудесно. Мисля, че си струва да опитате и след това, въз основа на статистиката, да направите конкретни заключения относно вашата ниша и продукт.

Всъщност, не направих повече шум и просто промених леко предишната статия и добавих няколко реда код на JavaScript. Преди това модален прозорец се появяваше, когато за първи път посетите сайт. Сега ще се показва само при първото посещение на сайта (когато курсорът напусне основната област на сайта и се премести в областта на раздела). Ако потребителят посети сайта отново, този прозорец няма да се покаже. Това се изпълнява по абсолютно същия начин, както в предишната статия, с помощта на бисквитки. Бисквитките се съхраняват 7 дни, можете да посочите произволно количество по ваша преценка.

И все пак, ние не прикачваме събитие към щракване върху кръста в раздела, а просто проверяваме позицията на курсора. Ние не блокираме прозореца, бутоните и т.н., не изискваме нищо, а просто показваме прозореца.

Както миналия път, ще използваме jQuery плъгин arcticModal, което означава, че свързваме самия jQuery:

И ние свързваме темата на приставката, използвам стандартната, но можете да напишете своя собствена:

Сега, за да работят нашите бисквитки, ще добавим приставката за бисквитки от Yandex:

И свържете скрипта config.js със следното съдържание:

$(document).ready(function () ( if (!$.cookie("smartCookies")) ( $(document).mouseleave(function (e) ( function getWindow() ( $(".offer").arcticmodal (( closeOnOverlayClick: true, closeOnEsc: true ));

Ако прочетете последната статия, забелязахте, че нищо не се е променило, освен че скриптът във файла config.js се е променил леко. Тоест просто се появи друго условие, което се задейства, когато курсорът напусне областта на сайта, тоест е в областта на разделите.

Между другото, последния път забравих да обясня какво означават тези параметри:

CloseOnOverlayClick: вярно, closeOnEsc: вярно

• closeOnOverlayClick - позволява ви да затворите прозорец, когато щракнете върху произволна област извън прозореца.
• closeOnEsc - затваря прозореца при натискане на Escape

Сега за самото оформление на страницата. Абсолютно нищо не се е променило.

Вашето предложение, формуляр и т.н. ще бъдат тук. Можете да вмъкнете формуляр или да предложите да ви следват в социалните мрежи

Ще обясня малко. modalInner е модална обвивка на прозорец с display:none в стиловете. оферта е класът на самия модален прозорец. Ако го промените, не забравяйте да промените класа в скрипта.

Ето една проста реализация на изскачащ прозорец при затваряне на страница. Смятате ли, че си струва да използвате подобен ефект на уебсайт?

Искам да заснема събитието за затваряне на прозорец/раздел на браузъра. Опитах следното с jQuery:

JQuery(window).bind("beforeunload", function() ( return confirm("Наистина ли искате да затворите?") ))

Но работи и с изпращане на формуляр, което не е това, което искам. Искам събитие, което се задейства само когато потребителят затвори прозореца.

От jQuery 1.7 методът .live() е отхвърлен. Използвайте .on(), за да прикачите манипулатори на събития. Потребителите на по-стари версии на jQuery трябва да използват .delegate() вместо .live()

$(window).bind("beforeunload", function() ( return true || confirm("Наистина ли искате да затворите?"); ));

$(прозорец).unbind();

JQuery(window).bind("beforeunload", function (e) ( var activeElementTagName = e.target.activeElement.tagName; if (activeElementTagName != "A" && activeElementTagName != "INPUT") ( return "Наистина ли искате да затворя?"; )))

Моят отговор е насочен към предоставяне на прости тестове.

Вижте отговора на @SLaks.

$(window).on("beforeunload", function() ( return inFormOrLink ? "Наистина ли искате да затворите?" : null; ))

Всеки път, когато потребителят затвори страницата (бутон x или CTRL + W), браузърът се изпълнява този кодпреди beforeunload , но не за неопределено време. Единственото изключение е прозорецът за потвърждение (връщане „Наистина ли искате да затворите?“), който ще изчака отговора на потребителя.

Chrome: 2 секунди.
Firefox: ∞ (или щракнете два пъти или затворете принудително)
Ръб: ∞ (или щракнете двукратно)
Explorer 11: 0 секунди.
Safari: ЗАДАЧА

Какво използвахме, за да тестваме това:

• Node.js Express сървър с регистър на заявките
• Следният кратък HTML файл

Това, което прави, е да изпраща възможно най-много заявки, преди браузърът да завърши своята страница (синхронно).

функция 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 секунди // приемаме, че е 2 секунди s тъй като заявките могат да отнемат няколко милисекунди да бъдат изпратени.

Опитайте и това

Window.onbeforeunload = функция () ( if (pasteEditorChange) ( var btn = confirm("Искате ли да запазите промените?"); if(btn === true)( SavetoEdit();//вашето извикване на функция) else ( windowClose();//вашето извикване на функция ) ) else ( windowClose();//вашето извикване на функция ) );

Просто проверете...

Функция 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 открива затваряне на раздела на браузъра/затваряне на браузъра, но ако списъкът ви с действия е голям и разделът се затваря, преди да е завършен, вие сте безпомощни. Можете да опитате, но според моя опит не зависи от това.

Window.addEventListener("beforeunload", function (e) ( var confirmationMessage = "\o/"; /* Имате ли малък код за действие тук */ (e || window.event).returnValue = confirmationMessage; //Gecko + IE връщане на съобщение за потвърждение; //Webkit, Safari, Chrome ));

Ако вашият изглед на формуляр ги изпраща на друга страница (което вярвам, че го прави, т.е. изпълнява се beforeunload), можете да опитате да промените beforeunload на формуляра на извикване на ajax. По този начин те няма да напуснат страницата ви, когато формулярът е beforeunloaded, и можете да използвате обвързванията си beforeunload както желаете.

За решение, което работи добре с контроли на трети страни като Telerik (напр. RadComboBox) и DevExpress, които използват тагове за котва по различни причини, помислете за следния код, който е леко подобрена версия на кода 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 = "Наистина ли искате да затворите?)"; } eventObject.returnValue = returnValue; return returnValue; });!}

Използвах Slaks, но не работи както е, защото onbeforeunload returnValue се анализира като низ и след това се показва в прозореца за потвърждение на браузъра. Ето как се показва стойността true, например "true".

Просто използвам обратна връзка. Ето моят код

Var preventUnloadPrompt; var messageBeforeUnload = "моето съобщение тук - Сигурни ли сте, че искате да напуснете тази страница?"; //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(документ).готов(функция () ( wireUpEvents(); ));

функция endSession() ( // Браузърът или разделът на браузъра е затворен // Направете sth тук ... alert("чао"); ) функция wireUpEvents() ( /* * За списък със събития, които задействат onbeforeunload в IE * проверете http ://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx */ window.onbeforeunload = function () (debugger if (!validNavigation) ( endSession(); ) ) // Прикачете натискане на клавиш за събитие, за да изключите F5 refresh $(document).bind("keypress", function (e) (debugger if (e.keyCode == 116) ( validNavigation = true; ) )); // Прикачете събитието click for all връзки в страницата $("a").bind("click", function () ( debugger validNavigation = true; )); "submit", function () (debugger validNavigation = true; )); // Прикачване на събитието click за всички входове в страницата $("input").bind("click", function () (debugger validNavigation = true; )); )`въведете код тук`"; } 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"); }!}

Моят проблем: Събитието "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 ) функция saveIndexedDataAlert() ( var allowPrompt = getfgallowPrompt(); var lenIndexedDocs = parseInt($("#sortable3 > li").size()) + parseInt($("#sortable3 > ul").size()); if(allowPrompt && $.trim(lenIndexedDocs) > 0) ( event.returnValue = "Вашето съобщение< 0) { //do whatever you want when closing the window.. } });

След това работи за мен;

$(window).unload(function(event) ( if(event.clientY

Window.onbeforeunload = function () ( return "Наистина ли искате да затворите?"; );

Може би просто манипулатор на събития beforeunload в манипулатора на събития за изпращане на формуляра:

Много хора знаят, че благодарение на onbeforeunload можете да помолите потребителя да не напуска уеб страница, ако има незапазени данни (например, написани във формуляр, но не изпратено съобщение до форума). За да направите това, просто добавете нещо като този JavaScript:
window.onbeforeunload = function (evt) ( var message = "Документът "foo" не е записан. Ще загубихпромени, ако напуснете страницата."; if (typeof evt == "undefined") ( evt = window.event; ) if (evt) ( evt.returnValue = message; ) върне съобщение; )
След това, в идеалния случай, ако потребителят желае да напусне страницата (по всякакъв начин - затворете раздела, затворете целия браузър, презаредете страницата, въведете нов адрес V адресна лента, отидете на отметката и т.н.), той ще види заявка за потвърждение и напускането на страницата може да бъде отменено. Преди това безскрупулни автори на уебсайтове се опитваха да използват този прозорец, за да надхитрят потребителя и да го задържат на страницата, например, използвайки текста „Щракнете върху OK, за да продължите да работите със сайта и Отказ, за ​​да затворите“ (всъщност бутоните работеха с другия наоколо). Или дори нещо по-страшно като „Щракнете върху OK, за да потвърдите таксата от $1000 към вашата кредитна карта.“

Тогава браузърите станаха по-мъдри и започнаха да добавят помощен текст, за да направят по-трудно измамването на потребителя. Например, ето как го прави IE8:

Почти подобен текст беше във Firefox 3:


Ако се прочете всичко, става ясно какво е съобщил сайтът и какво е съобщил браузърът. Все пак можете да изневерите.

Тук виждаме ясно описание на действията директно върху бутоните. Вече е доста трудно да убедите потребителя да щракне върху „Напускане“, за да остане и „Остани“, за да напусне. Според мен решението е идеално и тази тема може да се затваря. Като цяло, както знаете, безличният OK в почти всеки диалогов прозорец трябва да бъде заменен с името на действието (например „Изтриване на файлове“, „Търсене“, „Добавяне на ред“, „Отваряне на файл“ и т.н.), това намалява броя на потребителските грешки, дори ако имате пълен контрол върху текста на диалога.

Каква беше драмата с грешка 641509? Факт е, че това потвърждение във Firefox 4 и по-нова версия изглежда така:


Както можете да видите, персонализираният текст е изчезнал напълно. От версия 4 уебсайтът не може да предостави допълнително съобщение на потребителя или да обясни защо конкретно не иска потребителят да напусне. Да речем, ако внедрявате интерфейс за работа с много документи в един прозорец и един от тях не е записан, можете да кажете кой конкретно, но във Firefox няма да разберете това. Може би не искате да го запазите и ако видите съобщението, спокойно ще напуснете страницата, но в противен случай не знаете какво се случва. В листа

Вече няколко пъти ме питаха как да се справя със затварянето на раздел. Да приемем, че потребител иска да затвори вашия сайт и вие правите някакъв изскачащ прозорец и питате: " сигурен ли си", или пренасочване към друг сайт. Разбира се, тези методи са много досадни за потребителите, така че препоръчвам да не ги използвате. За щастие, браузърите също се справят с това много зле, но все пак има някои възможности за обработка на затварянето на раздели.

Възможно е да попитате потребителя: " Сигурен ли е, че иска да затвори страницата?". Ето как можете да приложите тази обработка на затваряне на раздел:

window.onbeforeunload = функция() (
return "Нещо за казване на потребителя";
}

Този код ще работи във Firefox, IE, Chrome, но няма да работи в Opera (този браузър изобщо не обработва onbeforeunload). В този случай самата функция за обработка може да върне само низ, тоест никакви пренасочвания няма да работят там.

Върнатият низ ще се покаже в прозореца за потвърждение в Chrome и IE. Този ред не се показва във Firefox.

2

Имам една родителска страница и дъщерна страница. дъщерната страница се отвори в нов раздел

Искам да показвам едно предупредително съобщение (дъщерната страница се затваря), когато затворя дъщерния раздел.
Как да покажа затворено съобщение при затваряне на раздел? (Не е време за опресняване)

Използвах OnUnload и onbeforeunload.
Двата метода се извикват и при опресняване на страницата и затваряне на раздели.

Window.onunload = функция doUnload(e) ( alert("Дете прозорец се затваря..."); )

Window.onbeforeunload = функция doUnload(e) ( alert("Дете прозорец се затваря..."); )

Трябва да покажа предупредителното съобщение, просто затворете раздела в браузъра.

помогни ми Благодаря предварително

Използвам следния скрипт. Работеше в 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

За този afaik никога не е бил сценарий за кръстосани браузъри. Решението е да НЕ разчитате на недокументирани и променливи функции, специфични за браузъра, за да откриете нещо важно.

Тъй като имате страница CHILD, можете да настроите тест на родителя (opener), който проверява свойството childWindowHandle.closed на интервали и действа спрямо това.

1

Ако приемем, че просто се опитва да задейства събитието beforeunload Crossbrowser, това почти го прави (освен в Opera)

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 Връзки, които не искаме да засягаме документа .getElementById("homebtn").onclick = UnBindWindow; document.getElementById("googlebtn").onclick = UnBindWindow; //Bind Exit Message Dialogue.onbeforeunload = ReturnMessage;

0

Може да не сте в състояние да направите това, с изключение на някои методи, базирани на бисквитки, което е заобиколно решение за разработка, тъй като не е постоянно бисквитки. Второто идентифициране на опресняване на страницата, пренасочване на базата на формуляр или обратно пренасочване или затваряне на браузъра с изхвърляне на събития не е лесно и досадно. Препоръчайте да не разчитате на това.

можете да направите някои малки неща, преди клиентът да затвори раздела. javascript открива браузър затваряне на раздела/затваряне на браузъра, но ако вашият списък с действия е голям и разделът се затваря, преди да е завършен, вие сте безпомощни. Можете да опитате, но според моя опит не зависи от това. Да, не можете да разграничите обратно, актуализиране и затваряне в този момент. Следователно няма надежден начин да се разбере дали едно дете е наистина затворено.

Window.addEventListener("beforeunload", function (e) ( var confirmationMessage = "\o/"; /* Имате ли малък код за действие тук */ (e || window.event).returnValue = confirmationMessage; //Gecko + IE връщане на съобщение за потвърждение; //Webkit, Safari, Chrome ));