Dojde k události Javascript opuštění stránky. JavaScript - Window Object: Otevírání a zavírání oken. Metody objektu okna: open(), close(), print(), focus() a blur()

události window js (14)

Chci zachytit událost zavření okna prohlížeče/karty. S jQuery jsem zkusil následující:

JQuery(window).bind("beforeunload", function() ( return cancel("Opravdu chcete zavřít?") ))

Ale funguje to i s odesláním formuláře, což není to, co chci. Chci událost, která se spustí pouze tehdy, když uživatel zavře okno.

Od verze jQuery 1.7 je metoda .live() zastaralá. K připojení obslužných rutin událostí použijte .on(). Starší uživatelé verze jQuery by měl používat .delegate() přednostně před .live()

$(window).bind("beforeunload", function() ( return true || potvrdit("Opravdu chcete zavřít?"); ));

$(okno).unbind();

JQuery(window).bind("beforeunload", function (e) ( var activeElementTagName = e.target.activeElement.tagName; if (activeElementTagName != "A" && activeElementTagName != "INPUT") ( return "Opravdu chcete zavřít?"; ) ))

Moje odpověď je zaměřena na poskytování jednoduchých testů.

JAK

Viz odpověď @SLaks.

$(window).on("beforeunload", function() ( return inFormOrLink ? "Opravdu chcete zavřít?" : null; ))

Jak dlouho bude trvat, než prohlížeč stránku konečně zavře?

Kdykoli uživatel zavře stránku (tlačítko x nebo CTRL+W), spustí se prohlížeč tento kód před vyložením, ale ne na neurčito. Jedinou výjimkou je potvrzovací okno (vrácení "Opravdu chcete zavřít?"), které počká na reakci uživatele.

Chrome: 2 sekundy.
Firefox: ∞ (nebo dvojitým kliknutím nebo vynuceným zavřením)
Hrana: ∞ (nebo dvojité kliknutí)
Průzkumník 11: 0 sekund.
Safari: DĚLAT

Co jsme použili k testování:

Server Node.js Express s protokolem požadavků
Následující krátký soubor HTML

Co dělá, je odeslat co nejvíce požadavků, než prohlížeč dokončí svou stránku (synchronně).

function request() ( return $.ajax(( typ: "GET", url: "http://localhost:3030/" + Date.now(), async: true )).responseText; ) window.onbeforeunload = ( ) => ( while (true) (request(); ) return null; )

Chrome výstup:

GET /1480451321041 404 0,389 ms - 32 GET /1480451321052 404 0,219 ms - 32 ... GET /hello/1480451322998 404 ms /předpokládáme 92 ms / 92 ms ≈ 528 2 2 sekundy, protože požadavky mohou trvat několik milisekund být odeslán.

Zkuste to také

Window.onbeforeunload = function () ( if (pasteEditorChange) ( var btn = potvrdit("Chcete uložit změny?"); if(btn === true)( SavetoEdit();//vaše volání funkce) else ( windowClose();//vaše volání funkce ) ) else ( windowClose();//vaše volání funkce ) );

Jen zkontrolujte...

Funkce 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("okno zavřeno"); )else( alert("právě obnoveno"); ) ) )

Bohužel bez ohledu na to, zda bude spuštěno opětovné načtení, nové přesměrování stránky nebo událost zavření prohlížeče. Alternativou je zachytit id, které spouští událost, a pokud je to formulář, nevolejte žádnou funkci, a pokud to není id formuláře, udělejte to, co chcete, když se stránka zavře. Nejsem si jistý, jestli je to také možné přímo a je to zdlouhavé.

Než klient zavře kartu, můžete udělat několik malých věcí. javascript detekuje zavření karty prohlížeče/zavření prohlížeče, ale pokud je váš seznam akcí velký a karta se zavře před dokončením, jste bezmocní. Zkusit to můžeš, ale podle mých zkušeností to na tom nezávisí.

Window.addEventListener("beforeunload", funkce (e) ( var potvrzeníMessage = "\o/"; /* Máte zde malý kód akce */ (e || window.event).returnValue = potvrzeníMessage; //Gecko + IE vrátit potvrzující zprávu; //Webkit, Safari, Chrome ));

Pokud je vaše zobrazení formuláře posílá na jinou stránku (což se domnívám, že je, tj. běží před uvolněním), můžete zkusit změnit přednačtení formuláře na volání ajax. Tímto způsobem neopustí vaši stránku, když je formulář před uvolněním formuláře, a své vazby před uvolněním můžete použít, jak chcete.

Pro řešení, které dobře fungovalo s ovládacími prvky třetích stran, jako je Telerik (jako RadComboBox) a DevExpress, které z různých důvodů používají značky Anchor, zvažte následující kód, který je mírně vylepšenou verzí kódu desm s lepším selektorem pro značku kotvy. vazba:

Var inFormOrLink; $("a:not(), a").live("click", function() ( inFormOrLink = true; )); $("form").bind("odeslat", function() ( inFormOrLink = true; )); $(window).bind("beforeunload", function(eventObject) ( var returnValue = undefined; if (! inFormOrLink) ( returnValue = "Opravdu chcete zavřít?"; } eventObject.returnValue = returnValue; return returnValue; });!}

Použil jsem Slaks, ale nefunguje to tak, jak je, protože onbeforeunload returnValue je analyzován jako řetězec a poté zobrazen v okně potvrzení prohlížeče. Takto se zobrazuje skutečný, například "pravda".

Jen používat zpětná vazba. Zde je můj kód

Var preventUnloadPrompt; var messageBeforeUnload = "moje zpráva zde - Opravdu chcete opustit tuto stránku?"; //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(funkce () ( wireUpEvents(); )); function endSession() ( // Karta prohlížeče nebo prohlížeče je zavřená // Udělejte to zde ... alert("bye"); ) function wireUpEvents() ( /* * Seznam událostí, které se spouštějí onbeforeunload na IE * zkontrolujte http ://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx */ window.onbeforeunload = function () ( debugger if (!validNavigation) ( endSession(); ) ) // Připojte soubor event keypress pro vyloučení F5 refresh $(document).bind("keypress", function (e) ( debugger if (e.keyCode == 116) ( validNavigation = true; ) )); // Připojit událost click for all odkazy na stránce $("a").bind("click", function () ( debugger validNavigation = true; )); // Připojte odeslání události pro všechny formuláře na stránce $("form").bind( "submit", function () ( debugger validNavigation = true; )); // Připojí událost click pro všechny vstupy na stránce $("input").bind("click", function () ( debugger validNavigation = true; )); )„sem zadejte kód“.

Můj problém: Událost „onbeforeunload“ se spustí pouze v případě lichého počtu příspěvků (kliknutí). Měl jsem kombinaci řešení z podobných vláken na SO, aby moje řešení fungovalo. dobře, můj kód bude mluvit.

$(document).ready(function() ( updatefgallowPrompt(true); window.onbeforeunload = WarnUser; ) funkce WarnUser() ( var allowPrompt = getfgallowPrompt(); if(allowPrompt) ( saveIndexedDataAlert(); return null; ) else ( updatefgallowPrompt(true); event.stopPropagation ) ) funkce saveIndexedDataAlert() ( var allowPrompt = getfgallowPrompt(); var lenIndexedDocs = parseInt($("#class3 > li").size()) + parseInt($("#řadit3 >) ul").size()); if(allowPrompt && $.trim(lenIndexedDocs) > 0) ( event.returnValue = "Vaše zpráva"; } 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"); }!}

Poté pracoval pro mě;

$(okno).unload(funkce(událost) ( if(událost.klientY< 0) { //do whatever you want when closing the window.. } });

Window.onbeforeunload = function () ( return "Opravdu chcete zavřít?"; );

Možná jen obslužná rutina události beforeunload v obslužné rutině události odeslání formuláře:

JQuery("form").submit(function() ( jQuery(window).unbind("beforeunload"); ... ));

Mám jednu nadřazenou stránku a podřízenou stránku. podřízená stránka otevřena na nové kartě

Chci zobrazit jednu varovnou zprávu (podřízená stránka se zavře), když zavřu podřízenou kartu.
Jak zobrazit zavřené zprávy při zavírání karty? (Není to osvěžující čas)

Použil jsem OnUnload a onbeforeunload .
Tyto dvě metody se také volají při obnovování stránky a zavírání karet.

Window.onunload = funkce doUnload(e) ( alert("Dětské okno se zavírá..."); )

Window.onbeforeunload = funkce doUnload(e) ( alert("Dětské okno se zavírá..."); )

Musím zobrazit varovnou zprávu, stačí zavřít kartu v prohlížeči.

Pomoz mi. Díky předem.

Používám následující skript. V IE to fungovalo. Ale nefungovalo to ve FireFoxu

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

Jak toho dosáhnout ve FireFoxu a dalších prohlížečích.

4 odpovědi

řazení:

Aktivita

Pro tento afaik nikdy nebyl scénář pro různé prohlížeče. Řešením je nespoléhat se na nezdokumentované a proměnlivé funkce specifické pro prohlížeč k detekci čehokoli důležitého.

Vzhledem k tomu, že máte stránku CHILD, můžete nastavit test na nadřazeném prvku (otvíracím nástroji), který v intervalech kontroluje vlastnost childWindowHandle.closed a podle toho pracuje.

Za předpokladu, že se to jen pokusí spustit událost beforeunload Crossbrowser, tak to do značné míry udělá (kromě Opery)

Try( // http://www.opera.com/support/kb/view/827/ opera.setOverrideHistoryNavigationMode("kompatibilní"); history.navigationMode = "kompatibilní"; )catch(e)() //Our Where Funkce F" Are You Going Message ReturnMessage() ( return "WTF!!!"; ) //Funkce UnBind Function UnBindWindow() ( window.onbeforeunload = null; return true; ) //Bind Links, které nechceme ovlivnit .getElementById("homebtn").onclick = UnBindWindow; document.getElementById("googlebtn").onclick = UnBindWindow; //Bind Exit Message Dialogue window.onbeforeunload = ReturnMessage;

Možná to nebudete moci udělat kromě některých metod založených na souborech cookie, což je řešení pro vývoj, protože není trvalé cookies. Druhá identifikace obnovení stránky, přesměrování založeného na formuláři nebo zpětného přesměrování nebo uzavření prohlížeče s dumpingem událostí není jednoduché a zdlouhavé. Doporučuji nespoléhat se na toto.

můžete udělat několik malých věcí, než klient zavře kartu. javascript detekuje prohlížeč zavřít kartu/zavřít prohlížeč , ale pokud je váš seznam akcí velký a karta se zavře před dokončením, jste bezmocní. Zkusit to můžeš, ale podle mých zkušeností to na tom nezávisí. Ano, v tuto chvíli nelze rozlišit zpět, aktualizovat a zavřít. Proto neexistuje žádný spolehlivý způsob, jak zjistit, zda je dítě skutečně uzavřené.

událost opětovného načtení stránky js (14)

Chci zachytit událost zavření okna prohlížeče/karty. S jQuery jsem zkusil následující:

JQuery(window).bind("beforeunload", function() ( return cancel("Opravdu chcete zavřít?") ))

Ale funguje to i s odesláním formuláře, což není to, co chci. Chci událost, která se spustí pouze tehdy, když uživatel zavře okno.

Možná jen obslužná rutina události beforeunload v obslužné rutině události odeslání formuláře:

JQuery("form").submit(function() ( jQuery(window).unbind("beforeunload"); ... ));

Zkuste to také

Poté pracoval pro mě;

$(okno).unload(funkce(událost) ( if(událost.klientY< 0) { //do whatever you want when closing the window.. } });

Použil jsem Slaks, ale nefunguje to tak, jak je, protože onbeforeunload returnValue je analyzován jako řetězec a poté zobrazen v okně potvrzení prohlížeče. Takto se zobrazuje hodnota true, například "true".

Pouze pomocí zpětné vazby. Zde je můj kód

Možná můžete zpracovat OnSubmit a nastavit příznak, který později zaškrtnete v obslužné rutině OnBeforeUnload.

Moje odpověď je zaměřena na poskytování jednoduchých testů.

JAK

Viz odpověď @SLaks.

$(window).on("beforeunload", function() ( return inFormOrLink ? "Opravdu chcete zavřít?" : null; ))

Jak dlouho bude trvat, než prohlížeč stránku konečně zavře?

Kdykoli uživatel zavře stránku (tlačítko x nebo CTRL + W), prohlížeč spustí tento kód před unloadem, ale ne na dobu neurčitou. Jedinou výjimkou je potvrzovací okno (vrácení "Opravdu chcete zavřít?"), které počká na reakci uživatele.

Chrome: 2 sekundy.
Firefox: ∞ (nebo dvojitým kliknutím nebo vynuceným zavřením)
Hrana: ∞ (nebo dvojité kliknutí)
Průzkumník 11: 0 sekund.
Safari: DĚLAT

Co jsme použili k testování:

Server Node.js Express s protokolem požadavků
Následující krátký soubor HTML

Co dělá, je odeslat co nejvíce požadavků, než prohlížeč dokončí svou stránku (synchronně).

function request() ( return $.ajax(( typ: "GET", url: "http://localhost:3030/" + Date.now(), async: true )).responseText; ) window.onbeforeunload = ( ) => ( while (true) (request(); ) return null; )

Chrome výstup:

Pro řešení pro různé prohlížeče (testováno v Chrome 21, IE9, FF15) zvažte následující kód, který je mírně upravenou verzí kódu Slaks:

Var inFormOrLink; $("a").live("click", function() ( inFormOrLink = true; )); $("form").bind("odeslat", function() ( inFormOrLink = true; )); $(window).bind("beforeunload", function(eventObject) ( var returnValue = undefined; if (! inFormOrLink) ( returnValue = "Opravdu chcete zavřít?"; } eventObject.returnValue = returnValue; return returnValue; }); !}

Všimněte si, že ve Firefoxu 4 se zobrazí zpráva „Opravdu chcete zavřít?“. nezobrazeno. FF jednoduše zobrazí obecnou zprávu. Viz poznámka na https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload

Událost beforeunload se spustí vždy, když uživatel z jakéhokoli důvodu opustí vaši stránku.

Spustí se například, pokud uživatel odešle formulář, klikne na odkaz, zavře okno (nebo kartu) nebo přejde na nová stránka pomocí adresního řádku, vyhledávacího pole nebo záložky.

Var inFormOrLink; $("a").on("click", function() ( inFormOrLink = true; )); $("form").on("submit", function() ( inFormOrLink = true; )); $(window).on("beforeunload", function() ( return inFormOrLink ? "Opravdu chcete zavřít?" : null; ))

Pro verze jQuery starší než 1.7 vyzkoušejte toto:

live metoda nefunguje s událostí odeslání, takže pokud přidáte nová uniforma, budete k němu muset také přiřadit handler.

Všimněte si, že pokud jiná obsluha události zruší odeslání nebo navigaci, ztratíte výzvu k potvrzení, pokud se okno později skutečně zavře. Můžete to opravit tím, že zaznamenáte čas v událostech odeslání a kliknutí a zkontrolujete, zda před uvolněním zbývá více než pár sekund.

Jen zkontrolujte...

Od verze jQuery 1.7 je metoda .live() zastaralá. K připojení obslužných rutin událostí použijte .on(). Uživatelé starších verzí jQuery by měli používat .delegate() přednostně před .live()

$(window).bind("beforeunload", function() ( return true || potvrdit("Opravdu chcete zavřít?"); ));

Dobré odpoledne. Nedávno jsem zveřejnil článek o tom, jak na to, ale mnozí žádali o přidání článku se zrcadlovým efektem, aby se zobrazilo okno, když návštěvník opustí web, tedy když se pokusí stránku zavřít.

Dnes budeme mluvit o tomto tématu a ukážu vám jednoduchou implementaci.

Samozřejmě, debata o tom, zda byste měli nebo neměli přidat zavřené vyskakovací okno na vaše stránky, nikdy nepřestane. Někteří říkají, že v pekle je zvláštní místo vyhrazené pro ty, kteří si to přidají, že je to divoce rozčilující, že pokud jsem se rozhodl odejít, odejdu a žádná vyskakovací okna mě nezastaví, ale budou mě jen otravovat. Jiní říkají, že tato vyskakovací okna zvyšují konverze a fungují skvěle. Myslím, že to stojí za vyzkoušení a poté na základě statistik vyvodit konkrétní závěry týkající se vašeho výklenku a produktu.

Jak vytvořit vyskakovací okno při zavírání stránky

Ve skutečnosti jsem nedělal žádné další povyky a jen mírně změnil předchozí článek a přidal několik řádků kódu javascript. Dříve se při první návštěvě webu zobrazovalo modální okno. Nyní se zobrazí pouze při první návštěvě webu (když kurzor opustí hlavní oblast webu a přesune se do oblasti karty). Pokud uživatel stránku navštíví znovu, toto okno se nezobrazí. To je implementováno úplně stejným způsobem jako v předchozím článku, pomocí cookies. Soubory cookie jsou uchovávány po dobu 7 dnů, můžete zadat libovolné množství podle svého uvážení.

A přesto ke kliknutí na křížek v záložce nepřipojujeme událost, ale jednoduše kontrolujeme polohu kurzoru. Neblokujeme okno, tlačítka atd., nic nevyžadujeme, ale okno jednoduše ukážeme.

Stejně jako minule použijeme plugin jQuery arcticModal, což znamená, že připojíme samotné jQuery:

A připojujeme téma pluginu, používám standardní, ale můžete si napsat vlastní:

Nyní, aby naše soubory cookie fungovaly, přidáme plugin pro soubory cookie od společnosti Yandex:

A propojte skript config.js s následujícím obsahem:

$(document).ready(function () ( if (!$.cookie("smartCookies")) ( $(document).mouseleave(function (e) ( function getWindow() ( $(".offer").arcticmodal (( closeOnOverlayClick: true, closeOnEsc: true )); ); setTimeout(getWindow, 1); $.cookie("smartCookies", true, (platnost: 7, cesta: "/" )); )); ); ) );

Pokud jste četli minulý článek, všimli jste si, že se nic nezměnilo, kromě toho, že se mírně změnil skript v souboru config.js. To znamená, že se jednoduše objevila další podmínka, která se spustí, když kurzor opustí oblast webu, to znamená, že se nachází v oblasti karet.

Mimochodem, minule jsem zapomněl vysvětlit, co tyto parametry znamenají:

CloseOnOverlayClick: true, closeOnEsc: true

closeOnOverlayClick - umožňuje zavřít okno, když kliknete na jakoukoli oblast mimo okno.
closeOnEsc - zavře okno při stisknutí Escape

Nyní o samotném rozvržení stránky. Absolutně nic se nezměnilo.

Zde bude váš návrh, formulář atd. Můžete vložit formulář nebo nabídku sledovat vás na sociálních sítích

Trochu to vysvětlím. modalInner — obal modální okno, se zobrazením: žádné ve stylech. nabídka je třída samotného modálního okna. Pokud ji změníte, nezapomeňte změnit třídu ve skriptu.

Zde je jednoduchá implementace vyskakovacího okna při zavírání stránky. Myslíte si, že se vyplatí použít podobný efekt na webu?

„událost onbeforeunload nezobrazuje text dodaný webem, pouze standardní zprávu“, soudě podle komentářů, konečně a neodvolatelně. V tomto ohledu jsem chtěl napsat něco málo o historii problematiky.

Mnoho lidí ví, že díky onbeforeunload můžete požádat uživatele, aby neopouštěl webovou stránku, pokud má neuložená data (například napsaná ve formuláři, ale neodeslanou zprávu do fóra). Chcete-li to provést, přidejte něco jako tento JavaScript:
window.onbeforeunload = function (evt) ( var message = "Dokument "foo" není uložen. Pokud stránku opustíte, změny ztratíte."; if (typeof evt == "undefined") ( evt = window.event ; ) if (evt) ( evt.returnValue = zpráva; ) vrátit zprávu; )
Poté, v ideálním případě, pokud si uživatel přeje opustit stránku (jakýmikoli prostředky - zavřete kartu, zavřete celý prohlížeč, znovu načtěte stránku, zadejte nová adresa PROTI adresní řádek, přejít na záložku atd.), zobrazí se mu žádost o potvrzení a opuštění stránky může být zrušeno. Dříve se bezohlední autoři webových stránek snažili pomocí tohoto okna přelstít uživatele a udržet ho na stránce, například pomocí textu „Kliknutím na OK pokračujte v práci s webem a na Storno pro zavření“ (ve skutečnosti tlačítka fungovala jako druhá cestou kolem). Nebo dokonce něco děsivějšího jako „Kliknutím na OK potvrďte platbu ve výši 1 000 USD na vaši kreditní kartu.“

Pak prohlížeče zmoudřely a začaly přidávat pomocný text, aby bylo obtížnější uživatele oklamat. Například zde je návod, jak to dělá IE8:

Téměř podobný text byl ve Firefoxu 3:

Pokud si to všechno přečtete, je jasné, co hlásil web a co hlásil prohlížeč. Stále však můžete podvádět.

Zde vidíme přehledný popis akcí přímo na tlačítkách. Už nyní je poměrně obtížné přesvědčit uživatele, aby kliknul na „Odejít“ pro pobyt a „Zůstat“ pro odchod. Dle mého názoru je řešení ideální a toto téma lze uzavřít. Obecně, jak víte, anonymní OK v téměř každém dialogu by mělo být nahrazeno názvem akce (například „Smazat soubory“, „Hledat“, „Přidat řádek“, „Otevřít soubor“ atd.), tím se snižuje počet uživatelských chyb, i když máte plnou kontrolu nad textem dialogu.

Jaké bylo drama s chybou 641509? Faktem je, že toto potvrzení ve Firefoxu 4 a vyšším vypadá takto:

Jak je vidět, vlastní text zmizel úplně. Od verze 4 nemůže webová stránka poskytnout uživateli žádnou další zprávu ani vysvětlit, proč konkrétně nechce, aby uživatel odešel. Řekněme, že pokud implementujete rozhraní pro práci s mnoha dokumenty v jednom okně a jeden z nich není uložen, mohli byste říci, který konkrétně, ale ve Firefoxu tomu nebudete rozumět. Možná si to nechcete uložit a kdybyste tu zprávu viděli, klidně byste stránku opustili, ale jinak nevíte, co se děje. V listu