Vyskytne sa udalosť odchodu JavaScriptu zo stránky. JavaScript - Window Object: Otváranie a zatváranie okien. Metódy objektu okna: open(), close(), print(), focus() a blur()

udalosti windows js (14)

Chcem zachytiť udalosť zatvorenia okna prehliadača/karty. S jQuery som skúšal nasledovné:

JQuery(window).bind("beforeunload", function() ( return cancel("Naozaj chcete zavrieť?") ))

Ale funguje to aj s odoslaním formulára, čo nie je to, čo chcem. Chcem udalosť, ktorá sa spustí iba vtedy, keď používateľ zavrie okno.

Od verzie jQuery 1.7 je metóda .live() zastaraná. Na pripojenie obsluhy udalostí použite .on(). Starší používatelia verzie jQuery mali by ste použiť .delegate() pred .live()

$(okno).bind("pred načítaním", function() ( return true || potvrdit("Naozaj chcete zavrieť?"); ));

$(okno).unbind();

JQuery(window).bind("beforeunload", function (e) ( var activeElementTagName = e.target.activeElement.tagName; if (activeElementTagName != "A" && activeElementTagName != "INPUT") ( return "Naozaj chcete zavrieť?"; ) ))

Moja odpoveď je zameraná na poskytnutie jednoduchých testov.

AKO

Pozri odpoveď @SLaks.

$(window).on("beforeunload", function() ( return inFormOrLink ? "Naozaj chcete zatvoriť?" : null; ))

Ako dlho bude trvať, kým prehliadač konečne zatvorí stránku?

Kedykoľvek používateľ zatvorí stránku (tlačidlo x alebo CTRL + W), prehliadač sa spustí tento kód pred vyložením, ale nie na neurčito. Jedinou výnimkou je potvrdzovacie okno (návrat „Naozaj chcete zatvoriť?“), ktoré počká na odpoveď používateľa.

Chrome: 2 sekundy.
Firefox: ∞ (alebo dvakrát kliknite alebo vynútené zatvorenie)
Okraj: ∞ (alebo dvakrát kliknite)
Prieskumník 11: 0 sekúnd.
Safari: ROBIŤ

Čo sme použili na testovanie:

Server Node.js Express s protokolom požiadaviek
Nasledujúci krátky súbor HTML

Čo robí, je odosielanie čo najväčšieho počtu žiadostí predtým, ako prehliadač dokončí svoju stránku (synchrónne).

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

Výstup Chrome:

GET /1480451321041 404 0,389 ms - 32 GET /1480451321052 404 0,219 ms - 32 ... GET /ahoj/1480451322998 404 ms -328 predpokladajme 9" 0,328 sekúnd s 2 sekundy, pretože žiadosti môžu trvať niekoľko milisekúnd byť zaslané.

Skúste aj toto

Window.onbeforeunload = funkcia () ( if (pasteEditorChange) ( var btn = potvrdiť("Chcete uložiť zmeny?"); if(btn === true)( SavetoEdit();//volanie vašej funkcie) else ( windowClose();//vaše volanie funkcie ) ) else ( windowClose();//vaše volanie funkcie ) );

Len skontrolujte...

Funkcia 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 zatvorené"); )else( alert("práve obnovené"); ) ) )

Žiaľ, či už sa spustí opätovné načítanie, nové presmerovanie stránky alebo zatvorenie prehliadača. Alternatívou je zachytiť id, ktorý spúšťa udalosť, a ak je to formulár, nevolajte žiadnu funkciu, a ak to nie je id formulára, urobte to, čo chcete, keď sa stránka zatvorí. Nie som si istý, či je to možné aj priamo a je to zdĺhavé.

Pred zatvorením karty klientom môžete urobiť niekoľko malých vecí. javascript deteguje zatvorenie karty prehliadača/zatvorenie prehliadača, ale ak je váš zoznam akcií veľký a karta sa zatvorí pred dokončením, ste bezmocní. Môžete to skúsiť, ale podľa mojich skúseností to na tom nezávisí.

Window.addEventListener("beforeunload", funkcia (e) ( var potvrdenieMessage = "\o/"; /* Máte tu malý kód akcie */ (e || window.event).returnValue = potvrdenieSpráva; //Gecko + IE návratová správa; //Webkit, Safari, Chrome ));

Ak ich zobrazenie formulára pošle na inú stránku (čo predpokladám, že áno, t. j. spustené pred uvoľnením), môžete skúsiť zmeniť pred uvoľnením formulára na volanie ajax. Týmto spôsobom neopustia vašu stránku, keď je formulár pred uvoľnením, a svoje väzby pred uvoľnením môžete použiť podľa vlastného uváženia.

Pre riešenie, ktoré dobre fungovalo s ovládacími prvkami tretích strán, ako sú Telerik (ako RadComboBox) a DevExpress, ktoré používajú značky Anchor z rôznych dôvodov, zvážte nasledujúci kód, ktorý je mierne vylepšenou verziou kódu desm s lepším selektorom pre značku Anchor. viazanie:

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 = "Naozaj chcete zatvoriť?"; } eventObject.returnValue = returnValue; return returnValue; });!}

Použil som Slaks, ale nefunguje to tak, ako je, pretože návratová hodnota onbeforeunload sa analyzuje ako reťazec a potom sa zobrazí v okne s potvrdením prehliadača. Takto sa zobrazuje pravda, napríklad "pravda".

Len pomocou spätná väzba. Tu je môj kód

Var preventUnloadPrompt; var messageBeforeUnload = "moja správa tu - Naozaj chcete opustiť túto 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(funkcia () ( wireUpEvents(); )); function endSession() ( // Karta prehliadača alebo prehliadača je zatvorená // Urobte tu ... alert("bye"); ) function wireUpEvents() ( /* * Zoznam udalostí, ktoré sa spustia onbeforeunload na IE * skontrolujte http ://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx */ window.onbeforeunload = function () ( debugger if (!validNavigation) ( endSession(); ) ) // Pripojte súbor event keypress pre vylúčenie F5 refresh $(document).bind("keypress", function (e) ( debugger if (e.keyCode == 116) ( validNavigation = true; ) ))); odkazy na stránke $("a").bind("kliknutie", funkcia () ( debugger validNavigation = true; ) // Pripojte odoslanie udalosti pre všetky formuláre na stránke $("form").bind(). "submit", funkcia () ( debugger validNavigation = true; )); // Pripojenie udalosti click pre všetky vstupy na stránke $("input").bind("click", function () ( debugger validNavigation = true; )); )„sem zadajte kód“.

Môj problém: Udalosť „onbeforeunload“ sa spustí iba v prípade nepárneho počtu odoslaní (kliknutí). Mal som kombináciu riešení z podobných vlákien na SO, aby moje riešenie fungovalo. ok, môj kód bude hovoriť.

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

Potom pracoval pre mňa;

$(okno).unload(funkcia(udalosť) ( if(udalosť.klientY< 0) { //do whatever you want when closing the window.. } });

Window.onbeforeunload = function () ( return "Naozaj chcete zavrieť?"; );

Možno len obslužný program udalosti pred uvoľnením v obslužnom nástroji udalosti odoslania formulára:

JQuery("form").submit(funkcia() ( jQuery(okno).unbind("pred načítaním"); ... ));

Mám jednu nadradenú stránku a podradenú stránku. podradená stránka sa otvorila na novej karte

Chcem zobraziť jedno varovné hlásenie (zatvorí sa podradená stránka), keď zatvorím podradenú kartu.
Ako zobraziť zatvorenú správu pri zatváraní karty? (Nie je to osviežujúci čas)

Použil som OnUnload a onbeforeunload .
Tieto dve metódy sa volajú aj pri obnovovaní stránky a zatváraní kariet.

Window.onunload = funkcia doUnload(e) ( alert("Dieťa sa zatvára..."); )

Window.onbeforeunload = funkcia doUnload(e) ( alert("Dieťa sa zatvára..."); )

Musím zobraziť varovnú správu, stačí zavrieť kartu v prehliadači.

Pomôž mi. Vopred ďakujem.

Používam nasledujúci skript. V IE to fungovalo. Ale nefungovalo to vo FireFox

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

Ako to dosiahnuť vo FireFoxe a inom prehliadači.

4 odpovede

Triedenie:

Aktivita

Pre tento afaik nikdy nebol scenár krížového prehliadača. Riešením je nespoliehať sa na nezdokumentované a variabilné funkcie špecifické pre prehliadač, aby ste zistili čokoľvek dôležité.

Keďže máte stránku CHILD, môžete nastaviť test na rodičovi (otvárači), ktorý v intervaloch kontroluje vlastnosť childWindowHandle.closed a podľa toho koná.

Za predpokladu, že sa to len pokúsi spustiť udalosť Crossbrowser pred uvoľnením, v podstate to robí (okrem Opery)

Skúste( // http://www.opera.com/support/kb/view/827/ opera.setOverrideHistoryNavigationMode("kompatibilné"); history.navigationMode = "kompatibilné"; )catch(e)() //Náš kde Funkcia F" Are You Going Message ReturnMessage() ( return "WTF!!!"; ) //Funkcia UnBind Function UnBindWindow() ( window.onbeforeunload = null; return true; ) //Zviazať odkazy, ktoré nechceme ovplyvniť .getElementById("homebtn").onclick = UnBindWindow; document.getElementById("googlebtn").onclick = UnBindWindow //Bind Exit Message Dialogue window.onbeforeunload = ReturnMessage;

Možno to nebudete môcť urobiť, s výnimkou niektorých metód založených na súboroch cookie, čo je vývojové riešenie, pretože nie je trvalé cookies. Druhá identifikácia obnovenia stránky, presmerovania na základe formulára alebo spätného presmerovania alebo ukončenia prehliadača s dumpingom udalostí nie je jednoduché a únavné. Odporúčame na to nezávisieť.

môžete urobiť niekoľko malých vecí predtým, ako klient zatvorí kartu. javascript deteguje prehliadač zavrieť kartu/zavrieť prehliadač , ale ak je váš zoznam akcií veľký a karta sa zatvorí skôr, ako sa dokončí, ste bezmocní. Môžete to skúsiť, ale podľa mojich skúseností to na tom nezávisí. Áno, momentálne nemôžete rozlíšiť späť, aktualizovať a zavrieť. Preto neexistuje žiadny spoľahlivý spôsob, ako zistiť, či je dieťa skutočne uzavreté.

udalosť opätovného načítania stránky js (14)

Chcem zachytiť udalosť zatvorenia okna prehliadača/karty. S jQuery som skúšal nasledovné:

JQuery(window).bind("beforeunload", function() ( return cancel("Naozaj chcete zavrieť?") ))

Ale funguje to aj s odoslaním formulára, čo nie je to, čo chcem. Chcem udalosť, ktorá sa spustí iba vtedy, keď používateľ zavrie okno.

Možno len obslužný program udalosti pred uvoľnením v obslužnom nástroji udalosti odoslania formulára:

JQuery("form").submit(funkcia() ( jQuery(okno).unbind("pred načítaním"); ... ));

Skúste aj toto

Potom pracoval pre mňa;

$(okno).unload(funkcia(udalosť) ( if(udalosť.klientY< 0) { //do whatever you want when closing the window.. } });

Stačí použiť spätnú väzbu. Tu je môj kód

Možno môžete spracovať OnSubmit a nastaviť príznak, ktorý neskôr skontrolujete v obslužnom programe OnBeforeUnload.

Moja odpoveď je zameraná na poskytnutie jednoduchých testov.

AKO

Pozri odpoveď @SLaks.

$(window).on("beforeunload", function() ( return inFormOrLink ? "Naozaj chcete zatvoriť?" : null; ))

Ako dlho bude trvať, kým prehliadač konečne zatvorí stránku?

Kedykoľvek používateľ zatvorí stránku (tlačidlo x alebo CTRL + W), prehliadač spustí tento kód pred uvoľnením, ale nie na neurčito. Jedinou výnimkou je potvrdzovacie okno (návrat „Naozaj chcete zatvoriť?“), ktoré počká na odpoveď používateľa.

Chrome: 2 sekundy.
Firefox: ∞ (alebo dvakrát kliknite alebo vynútené zatvorenie)
Okraj: ∞ (alebo dvakrát kliknite)
Prieskumník 11: 0 sekúnd.
Safari: ROBIŤ

Čo sme použili na testovanie:

Server Node.js Express s protokolom požiadaviek
Nasledujúci krátky súbor HTML

Čo robí, je odosielanie čo najväčšieho počtu žiadostí predtým, ako prehliadač dokončí svoju stránku (synchrónne).

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

Výstup Chrome:

Pre riešenie pre viaceré prehliadače (testované v Chrome 21, IE9, FF15) zvážte nasledujúci kód, ktorý je mierne upravenou verziou kódu Slaks:

Var inFormOrLink; $("a").live("kliknutie", function() ( inFormOrLink = true; )); $("form").bind("submit", function() ( inFormOrLink = true; )); $(window).bind("beforeunload", function(eventObject) ( var returnValue = undefined; if (! inFormOrLink) ( returnValue = "Naozaj chcete zatvoriť?"; } eventObject.returnValue = returnValue; return returnValue; }); !}

Všimnite si, že vo Firefoxe 4 sa zobrazí správa „Ste si istý, že chcete zavrieť?“. nezobrazuje sa. FF jednoducho zobrazí všeobecnú správu. Pozrite si poznámku na https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload

Udalosť beforeunload sa spustí vždy, keď používateľ z akéhokoľvek dôvodu opustí vašu stránku.

Napríklad sa spustí, ak používateľ odošle formulár, klikne na odkaz, zatvorí okno (alebo kartu) alebo prejde na nová stránka pomocou panela s adresou, vyhľadávacieho poľa alebo záložky.

Var inFormOrLink; $("a").on("click", function() ( inFormOrLink = true; )); $("form").on("submit", function() ( inFormOrLink = true; )); $(window).on("beforeunload", function() ( return inFormOrLink ? "Naozaj chcete zatvoriť?" : null; ))

Pre verzie jQuery staršie ako 1.7 skúste toto:

live metóda nefunguje s udalosťou odoslať, takže ak pridáte nová uniforma, budete k nemu musieť priviazať aj handler.

Upozorňujeme, že ak iný obslužný program udalosti zruší odoslanie alebo navigáciu, stratíte výzvu na potvrdenie, ak sa okno skutočne zatvorí neskôr. Môžete to vyriešiť tak, že zaznamenáte čas v udalostiach odoslania a kliknutia a skontrolujete, či pred uvoľnením zostáva viac ako pár sekúnd.

Len skontrolujte...

Od verzie jQuery 1.7 je metóda .live() zastaraná. Na pripojenie obsluhy udalostí použite .on(). Používatelia starších verzií jQuery by mali používať .delegate() pred .live()

$(okno).bind("pred načítaním", function() ( return true || potvrdit("Naozaj chcete zavrieť?"); ));

Dobrý deň. Nedávno som uverejnil článok o tom, ako na to, no mnohí žiadali pridať článok so zrkadlovým efektom, aby sa pri odchode návštevníka zo stránky, teda pri pokuse o zatvorenie stránky, zobrazilo okno.

Dnes budeme hovoriť o tejto téme a ukážem vám jednoduchú implementáciu.

Samozrejme, diskusia o tom, či by ste mali alebo nemali pridať zatváracie vyskakovacie okno na svoju stránku, nikdy neprestane. Niektorí hovoria, že v pekle je špeciálne miesto vyhradené pre tých, ktorí ho pridajú, že je to divoko rozhorčujúce, že ak sa rozhodnem odísť, tak odídem a žiadne vyskakovacie okná ma nezastavia, ale budú ma len otravovať. Iní hovoria, že tieto kontextové okná zvyšujú konverzie a fungujú skvele. Myslím, že to stojí za to vyskúšať a potom na základe štatistík vyvodiť konkrétne závery týkajúce sa vášho výklenku a produktu.

Ako vytvoriť kontextové okno pri zatváraní stránky

V skutočnosti som nerobil žiadne ďalšie povyky a len mierne zmenil predchádzajúci článok a pridal som niekoľko riadkov kódu javascript. Predtým sa pri prvej návšteve lokality zobrazilo modálne okno. Teraz sa zobrazí iba pri prvej návšteve stránky (keď kurzor opustí hlavnú oblasť stránky a presunie sa do oblasti karty). Ak používateľ znova navštívi stránku, toto okno sa nezobrazí. Toto je implementované presne rovnakým spôsobom ako v predchádzajúcom článku, pomocou cookies. Súbory cookie sa uchovávajú 7 dní, podľa vlastného uváženia môžete určiť ľubovoľné množstvo.

Napriek tomu nepripájame udalosť ku kliknutiu na krížik na karte, ale jednoducho kontrolujeme polohu kurzora. Neblokujeme okno, tlačidlá a pod., nič nevyžadujeme, ale okno jednoducho ukážeme.

Rovnako ako minule použijeme doplnok jQuery arcticModal, čo znamená, že pripojíme samotný jQuery:

A pripájame tému pluginu, používam štandardnú tému, ale môžete si napísať svoju vlastnú:

Teraz, aby naše súbory cookie fungovali, pridáme doplnok súborov cookie od spoločnosti Yandex:

A pripojte skript config.js s nasledujúcim obsahom:

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

Ak ste čítali posledný článok, všimli ste si, že sa nič nezmenilo, okrem toho, že sa mierne zmenil skript v súbore config.js. To znamená, že sa jednoducho objavila ďalšia podmienka, ktorá sa spustí, keď kurzor opustí oblasť lokality, to znamená, že sa nachádza v oblasti kariet.

Mimochodom, minule som zabudol vysvetliť, čo tieto parametre znamenajú:

CloseOnOverlayClick: true, closeOnEsc: true

closeOnOverlayClick - umožňuje zatvoriť okno, keď kliknete na ľubovoľnú oblasť mimo okna.
closeOnEsc - zatvorí okno pri stlačení Escape

Teraz o samotnom rozložení stránky. Absolútne nič sa nezmenilo.

Tu bude váš návrh, formulár atď. Môžete vložiť formulár alebo ponuku na sledovanie na sociálnych sieťach

Trochu to vysvetlím. modalInner — obal modálne okno, so zobrazením:žiadne v štýloch. ponuka je trieda samotného modálneho okna. Ak ho zmeníte, nezabudnite zmeniť triedu v skripte.

Tu je jednoduchá implementácia vyskakovacieho okna pri zatváraní stránky. Myslíte si, že sa oplatí použiť podobný efekt na webe?

„udalosť onbeforeunload nezobrazuje text dodaný webom, iba štandardnú správu“, súdiac podľa komentárov, konečne a neodvolateľne. V tejto súvislosti som chcel napísať niečo málo o histórii problematiky.

Mnoho ľudí vie, že vďaka onbeforeunload môžete používateľa požiadať, aby neopúšťal webovú stránku, ak má neuložené údaje (napríklad napísané vo formulári, ale neodoslal správu do fóra). Ak to chcete urobiť, pridajte niečo ako tento JavaScript:
window.onbeforeunload = funkcia (evt) ( var message = "Dokument "foo" nie je uložený. Ak stránku opustíte, zmeny stratíte."; if (typeof evt == "undefined") ( evt = window.event ; ) if (evt) ( evt.returnValue = správa; ) vrátiť správu )
Potom v ideálnom prípade, ak chce používateľ opustiť stránku (akýmkoľvek spôsobom - zatvorte kartu, zatvorte celý prehliadač, znova načítajte stránku, zadajte Nová adresa V adresný riadok, prejsť na záložku atď.), zobrazí sa mu žiadosť o potvrdenie a opustenie stránky môže byť zrušené. Predtým sa bezohľadní autori webových stránok pokúšali použiť toto okno na to, aby prekabátili používateľa a udržali ho na stránke, napríklad pomocou textu „Kliknutím OK pokračujte v práci s webom a kliknutím na tlačidlo Zrušiť zatvorte“ (v skutočnosti tlačidlá fungovali ako iné cesta okolo). Alebo dokonca niečo desivejšie, ako napríklad „Kliknutím na tlačidlo OK potvrďte platbu vo výške 1 000 USD na vašu kreditnú kartu.“

Potom sa prehliadače umúdrili a začali pridávať pomocný text, aby bolo ťažšie oklamať používateľa. Napríklad, tu je návod, ako to robí IE8:

Takmer rovnaký text bol vo Firefoxe 3:

Ak si to všetko prečítate, je jasné, čo hlásila stránka a čo hlásil prehliadač. Stále však môžete podvádzať.

Tu vidíme prehľadný popis akcií priamo na tlačidlách. Už teraz je dosť ťažké presvedčiť používateľa, aby klikol na „Odísť“, aby zostal a „Zostať“, aby odišiel. Riešenie je podľa mňa ideálne a táto téma sa dá uzavrieť. Vo všeobecnosti, ako viete, anonymné OK v takmer každom dialógovom okne by sa malo nahradiť názvom akcie (napríklad „Odstrániť súbory“, „Hľadať“, „Pridať riadok“, „Otvoriť súbor“ atď.), tým sa znižuje počet chýb používateľa, aj keď máte úplnú kontrolu nad textom dialógu.

Aká bola dráma s chybou 641509? Faktom je, že toto potvrdenie vo Firefoxe 4 a novšom vyzerá takto:

Ako je vidieť, vlastný textúplne zmizla. Od verzie 4 nemôže webová lokalita poskytnúť používateľovi žiadnu dodatočnú správu ani vysvetliť, prečo konkrétne nechce, aby používateľ odišiel. Povedzme, že ak implementujete rozhranie na prácu s mnohými dokumentmi v jednom okne a jeden z nich nie je uložený, môžete povedať, ktorý konkrétne, ale vo Firefoxe to nepochopíte. Možno si to nechcete uložiť a keby ste videli správu, pokojne by ste stránku opustili, ale inak neviete, čo sa deje. V liste