Javascript som forlater sidehendelsen skjer. JavaScript - Vinduobjekt: Åpning og lukking av vinduer. Vinduobjektmetoder: open(), close(), print(), focus() og blur()

window js-hendelser (14)

Jeg ønsker å fange nettleservinduet/fanelukkingshendelsen. Jeg prøvde følgende med jQuery:

JQuery(window).bind("beforeunload", function() ( return confirm("Vil du virkelig lukke?") ))

Men det fungerer også med skjemainnlevering, som ikke er det jeg ønsker. Jeg vil ha en hendelse som bare utløses når brukeren lukker vinduet.

Fra og med jQuery 1.7 er .live()-metoden avviklet. Bruk .on() for å legge ved hendelsesbehandlere. Eldre brukere jQuery-versjoner bør bruke .delegate() fremfor .live()

$(window).bind("beforeunload", function() ( return true || confirm("Vil du virkelig lukke?"); ));

$(vindu).unbind();

JQuery(window).bind("beforeunload", function (e) ( var activeElementTagName = e.target.activeElement.tagName; if (activeElementTagName != "A" && activeElementTagName != "INPUT") ( returner "Vil du virkelig å lukke?"; ) ))

Mitt svar er rettet mot å gi enkle tester.

HVORDAN

Se @SLaks svar.

$(window).on("beforeunload", function() ( return inFormOrLink ? "Vil du virkelig lukke?" : null; ))

Hvor lang tid vil det ta før nettleseren endelig lukker siden?

Hver gang brukeren lukker siden (x-knappen eller CTRL + W), kjører nettleseren denne koden før før avlasting, men ikke på ubestemt tid. Det eneste unntaket er bekreftelsesvinduet (retur "Vil du virkelig lukke?"), som vil vente på brukerens svar.

Chrome: 2 sekunder.
Firefox: ∞ (eller dobbeltklikk eller tving lukking)
Kant: ∞ (eller dobbeltklikk)
Utforsker 11: 0 sekunder.
Safari: Å GJØRE

Hva vi brukte for å teste dette:

Node.js Express-server med forespørselslogg
Følgende korte HTML-fil

Det den gjør er å sende så mange forespørsler som mulig før nettleseren fullfører siden sin (synkront).

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

Chrome-utgang:

GET /1480451321041 404 0,389 ms - 32 GET /1480451321052 404 0,219 ms - 32 ... GET /hei/1480451322998 404 0,328 ms - 5 sek. 2 sekunder siden forespørsler kan ta noen få millisekunder bli sent.

Prøv dette også

Window.onbeforeunload = funksjon () ( if (pasteEditorChange) ( var btn = confirm("Vil du lagre endringen?"); if(btn === true)( SavetoEdit();//funksjonskallet ditt ) else ( windowClose();//funksjonskallet ditt ) ) else ( windowClose();//funksjonskallet ditt ) );

Bare sjekk...

Funksjon 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("vindu lukket"); )else( alert("bare oppdatert"); ) ) )

Dessverre, om en ominnlasting, en ny sideviderekobling eller en nettleserlukkingshendelse utløses. Alternativet er å fange opp id-en som utløser hendelsen, og hvis det er et skjema, ikke kall noen funksjon, og hvis det ikke er skjema-ID, så gjør det du vil når siden lukkes. Jeg er ikke sikker på om dette også er mulig direkte og er kjedelig.

Det er noen små ting du kan gjøre før klienten lukker fanen. javascript oppdager nettleser lukk fane/lukk nettleser, men hvis listen over handlinger er stor og fanen lukkes før den er fullført, er du hjelpeløs. Du kan prøve, men med min erfaring er det ikke avhengig av det.

Window.addEventListener("beforeunload", function (e) ( var confirmationMessage = "\o/"; /* Har du liten handlingskode her */ (e || window.event).returnValue = confirmationMessage; //Gecko + IE return confirmationMessage; //Webkit, Safari, Chrome ));

Hvis skjemavisningen din sender dem til en annen side (som jeg tror det er, dvs. kjører før avlasting), kan du prøve å endre skjemaets før avlasting til et ajax-anrop. På denne måten vil de ikke forlate siden din når skjemaet er lastet ut før, og du kan bruke føravlastingsbindingene dine som du ønsker.

For en løsning som fungerte bra med tredjepartskontroller som Telerik (som RadComboBox) og DevExpress, som bruker Anchor-tagger av forskjellige grunner, bør du vurdere følgende kode, som er en litt forbedret versjon av desm-koden med en bedre velger for seg selv ankertagg bindende:

Var inFormOrLink; $("a:not(), a").live("klikk", function() ( inFormOrLink = true; )); $("form").bind("submit", function() ( inFormOrLink = true; )); $(window).bind("beforeunload", function(eventObject) ( var returnValue = undefined; if (! inFormOrLink) ( returnValue = "Vil du virkelig lukke?"; } eventObject.returnValue = returnValue; return returnValue; });!}

Jeg brukte Slaks, men det fungerer ikke som det er fordi onbeforeunload returnValue blir analysert som en streng og deretter vist i nettleserens bekreftelsesvindu. Slik vises det ekte, for eksempel "sant".

Bare bruker tilbakemelding. Her er koden min

Var preventUnloadPrompt; var messageBeforeUnload = "min melding her - Er du sikker på at du vil forlate denne siden?"; //var redirectAfterPrompt = "http://www.google.co.in"; $("a").live("klikk", function() ( preventUnloadPrompt = true; )); $("form").live("submit", function() ( preventUnloadPrompt = true; )); $(window).bind("beforeunload", function(e) ( var rval; if(preventUnloadPrompt) (retur; ) else ( //location.replace(redirectAfterPrompt); return messageBeforeUnload; ) return rval; ))

Var validNavigation = false; jQuery(document).ready(function () (wireUpEvents(); )); function endSession() ( // Nettleser- eller nettleserfanen er lukket // Gjør sth her ... alert("bye"); ) function wireUpEvents() ( /* * For en liste over hendelser som utløser ubeforeunload på IE * sjekk http ://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx */ window.onbeforeunload = function () ( debugger if (!validNavigation) ( endSession(); ) ) // Legg ved hendelsestastetrykk for å ekskludere F5-oppdateringen $(document).bind("tastetrykk", funksjon (e) (debugger if (e.keyCode == 116) ( validNavigation = true; ) )); // Legg ved hendelsesklikk for alle lenker på siden $("a").bind("klikk", funksjon () ( debugger validNavigation = true; )); // Legg ved hendelsesinnsending for alle skjemaer på siden $("form").bind( "submit", function () ( debugger validNavigation = true; )); // Legg ved hendelsesklikket for alle innganger på siden $("input").bind("click", function () ( debugger validNavigation = true; )); )`skriv inn kode her`

Mitt problem: «onbeforeunload»-hendelsen vil kun bli utløst hvis det har vært et oddetall av innsendinger (klikk). Jeg hadde en kombinasjon av løsninger fra lignende tråder på SO for å få løsningen min til å fungere. ok, koden min vil snakke.

$(document).ready(function() ( updatefgallowPrompt(true); window.onbeforeunload = WarnUser; ) funksjon WarnUser() ( var allowPrompt = getfgallowPrompt(); if(allowPrompt) ( saveIndexedDataAlert(); return null; ) else ( updatefgallowPrompt(true); event.stopPropagation ) ) funksjon saveIndexedDataAlert() ( var allowPrompt = getfgallowPrompt(); var lenIndexedDocs = parseInt($("#sortable3 > li").size()) + parseInt($("#sortable3) ul").size()); if(allowPrompt && $.trim(lenIndexedDocs) > 0) ( event.returnValue = "Din melding"; } 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"); }!}

Etterpå jobbet for meg;

$(window).unload(function(event) ( if(event.clientY< 0) { //do whatever you want when closing the window.. } });

Window.onbeforeunload = funksjon () ( returner "Vil du virkelig lukke?"; );

Kanskje bare en beforeunload hendelsesbehandler i skjemaets innsendingshendelsesbehandler:

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

Jeg har én overordnet side og en barneside. underordnet side åpnet i ny fane

Jeg ønsker å vise én advarselsmelding (underordnet side lukkes) når jeg lukker underkategorien.
Hvordan vise lukkede meldinger når du lukker fanen? (Ikke en forfriskende tid)

Jeg brukte OnUnload og onbeforeunload.
De to metodene kalles også når du oppdaterer siden og lukker faner.

Window.onunload = funksjon doUnload(e) ( alert("Barnevinduet lukkes..."); )

Window.onbeforeunload = funksjon doUnload(e) ( alert("Barnevinduet lukkes..."); )

Jeg må vise advarselsmeldingen, bare lukk fanen i nettleseren.

Hjelp meg. Takk på forhånd.

Jeg bruker følgende skript. Det fungerte i IE. Men fungerte ikke i FireFox

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

Hvordan oppnå dette i FireFox og andre nettlesere.

4 svar

Sortering:

Aktivitet

For dette var aldri et scenario på tvers av nettlesere. Løsningen er å IKKE stole på udokumenterte og variable nettleserspesifikke funksjoner for å oppdage noe viktig.

Siden du har en CHILD-side, kan du sette opp en test på den overordnede (åpneren) som sjekker egenskapen childWindowHandle.closed med intervaller og handler på det.

Forutsatt at den bare prøver å avfyre beforeunload Crossbrowser-hendelsen, gjør dette stort sett det (bortsett fra i Opera)

Prøv( // http://www.opera.com/support/kb/view/827/ opera.setOverrideHistoryNavigationMode("compatible"); history.navigationMode = "compatible"; )catch(e)() //Our Where F" Are You Going Message-funksjonen ReturnMessage() ( returner "WTF!!!"; ) //UnBind-funksjonsfunksjonen UnBindWindow() ( window.onbeforeunload = null; return true; ) //Bind-lenker vi ikke ønsker skal påvirke dokumentet .getElementById("homebtn").onclick = UnBindWindow; document.getElementById("googlebtn").onclick = UnBindWindow; //Bind Exit Message Dialogue window.onbeforeunload = ReturnMessage;

Du kan kanskje ikke gjøre dette bortsett fra enkelte informasjonskapselbaserte metoder, som er en utviklingsløsning siden den ikke er vedvarende informasjonskapsler. Den andre identifiseringen av sideoppdatering, skjemabasert omdirigering eller omvendt omdirigering eller nettleser nær hendelsesdumping er ikke enkel og kjedelig. Anbefaler å ikke være avhengig av dette.

du kan gjøre noen små ting før klienten lukker fanen. javascript oppdage nettleser lukk fane/lukk nettleser , men hvis handlingslisten din er stor og fanen lukkes før den er fullført, er du hjelpeløs. Du kan prøve, men med min erfaring er det ikke avhengig av det. Ja, du kan ikke skille tilbake, oppdatere og lukke på dette tidspunktet. Derfor er det ingen pålitelig måte å fortelle om et barn virkelig er lukket.

js-sideinnlastingshendelse (14)

Jeg ønsker å fange nettleservinduet/fanelukkingshendelsen. Jeg prøvde følgende med jQuery:

JQuery(window).bind("beforeunload", function() ( return confirm("Vil du virkelig lukke?") ))

Men det fungerer også med skjemainnlevering, som ikke er det jeg ønsker. Jeg vil ha en hendelse som bare utløses når brukeren lukker vinduet.

Kanskje bare en beforeunload hendelsesbehandler i skjemaets innsendingshendelsesbehandler:

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

Prøv dette også

Etterpå jobbet for meg;

$(window).unload(function(event) ( if(event.clientY< 0) { //do whatever you want when closing the window.. } });

Jeg brukte Slaks, men det fungerer ikke som det er fordi onbeforeunload returnValue blir analysert som en streng og deretter vist i nettleserens bekreftelsesvindu. Slik vises verdien sann, for eksempel "true".

Bare å bruke tilbakemelding. Her er koden min

Kanskje du kan håndtere OnSubmit og sette et flagg som du senere sjekker i OnBeforeUnload-handleren.

Mitt svar er rettet mot å gi enkle tester.

HVORDAN

Se @SLaks svar.

$(window).on("beforeunload", function() ( return inFormOrLink ? "Vil du virkelig lukke?" : null; ))

Hvor lang tid vil det ta før nettleseren endelig lukker siden?

Hver gang brukeren lukker siden (x-knappen eller CTRL + W), kjører nettleseren denne koden før beforeunload , men ikke på ubestemt tid. Det eneste unntaket er bekreftelsesvinduet (retur "Vil du virkelig lukke?"), som vil vente på brukerens svar.

Chrome: 2 sekunder.
Firefox: ∞ (eller dobbeltklikk eller tving lukking)
Kant: ∞ (eller dobbeltklikk)
Utforsker 11: 0 sekunder.
Safari: Å GJØRE

Hva vi brukte for å teste dette:

Node.js Express-server med forespørselslogg
Følgende korte HTML-fil

Det den gjør er å sende så mange forespørsler som mulig før nettleseren fullfører siden sin (synkront).

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

Chrome-utgang:

GET /1480451321041 404 0,389 ms - 32 GET /1480451321052 404 0,219 ms - 32 ... GET /hei/1480451322998 404 0,328 ms - 5 sek. 2 sekunder siden forespørsler kan ta noen få millisekunder bli sent.

For en løsning på tvers av nettlesere (testet i Chrome 21, IE9, FF15), bør du vurdere følgende kode, som er en litt modifisert versjon av Slaks-koden:

Var inFormOrLink; $("a").live("klikk", function() ( inFormOrLink = true; )); $("form").bind("submit", function() ( inFormOrLink = true; )); $(window).bind("beforeunload", function(eventObject) ( var returnValue = undefined; if (! inFormOrLink) ( returnValue = "Vil du virkelig lukke?"; } eventObject.returnValue = returnValue; return returnValue; }); !}

Merk at med Firefox 4 vises meldingen "Er du sikker på at du vil lukke?". ikke vist. FF viser ganske enkelt en generell melding. Se merknaden på https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload

Beforeunload-hendelsen utløses hver gang en bruker forlater siden din av en eller annen grunn.

Den vil for eksempel utløses hvis brukeren sender inn et skjema, klikker på en lenke, lukker et vindu (eller en fane) eller navigerer til ny side ved å bruke adresselinjen, søkeboksen eller bokmerket.

Var inFormOrLink; $("a").on("klikk", function() ( inFormOrLink = true; )); $("form").on("submit", function() ( inFormOrLink = true; )); $(window).on("beforeunload", function() ( return inFormOrLink ? "Vil du virkelig lukke?" : null; ))

For jQuery-versjoner eldre enn 1.7, prøv dette:

live-metoden fungerer ikke med submit event, så hvis du legger til ny uniform, må du også binde en behandler til den.

Merk at hvis en annen hendelsesbehandler avbryter innsendingen eller navigasjonen, vil du miste bekreftelsesmeldingen hvis vinduet faktisk lukkes senere. Du kan fikse dette ved å registrere tiden i innsendings- og klikkhendelsene og sjekke om det er mer enn et par sekunder unna før avlasting.

Bare sjekk...

Fra og med jQuery 1.7 er .live()-metoden avviklet. Bruk .on() for å legge ved hendelsesbehandlere. Brukere av eldre versjoner av jQuery bør bruke .delegate() fremfor .live()

$(window).bind("beforeunload", function() ( return true || confirm("Vil du virkelig lukke?"); ));

God ettermiddag. Jeg la nylig ut en artikkel om hvordan man gjør det, men mange ba om å legge til en artikkel med speileffekt, slik at et vindu skulle dukke opp når en besøkende forlater siden, det vil si når de prøver å lukke siden.

I dag skal vi snakke om dette emnet, og jeg vil vise deg en enkel implementering.

Selvfølgelig vil debatten om hvorvidt du bør legge til en nær popup på nettstedet ditt aldri opphøre. Noen sier at det er et spesielt sted i helvete reservert for de som legger det til, at dette er voldsomt irriterende, at hvis jeg bestemte meg for å dra, så vil jeg dra og ingen popup-vinduer vil stoppe meg, men vil bare irritere meg. Andre sier at disse popup-vinduene øker konverteringene og fungerer utmerket. Jeg tror det er verdt et forsøk, og deretter, basert på statistikk, trekke spesifikke konklusjoner angående din nisje og produkt.

Hvordan lage en popup når du lukker en side

Faktisk gjorde jeg ikke noe mer og endret den forrige artikkelen litt og la til noen få linjer med javascript-kode. Tidligere dukket det opp et modalt vindu når du først besøkte et nettsted. Nå vil det bare vises ved første besøk på nettstedet (når markøren forlater hovedområdet på nettstedet og flytter til faneområdet). Hvis brukeren besøker nettstedet igjen, vil ikke dette vinduet vises. Dette implementeres på nøyaktig samme måte som i forrige artikkel, ved hjelp av informasjonskapsler. Informasjonskapsler lagres i 7 dager, du kan spesifisere hvilken som helst mengde etter eget skjønn.

Og likevel, vi legger ikke ved en hendelse til et klikk på krysset i fanen, men bare kontrollerer posisjonen til markøren. Vi blokkerer ikke vinduet, knapper osv., vi krever ingenting, men viser bare vinduet.

Som forrige gang vil vi bruke jQuery-pluginen arcticModal, som betyr at vi kobler til selve jQuery:

Og vi kobler til plugin-temaet, jeg bruker standarden, men du kan skrive din egen:

Nå, for at informasjonskapslene våre skal fungere, legger vi til plugin-modulen for informasjonskapsler fra Yandex:

Og koble config.js-skriptet med følgende innhold:

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

Hvis du leste den siste artikkelen, la du merke til at ingenting har endret seg, bortsett fra at skriptet i config.js-filen har endret seg litt. Det vil si at det ganske enkelt har dukket opp en annen tilstand som utløses når markøren forlater områdeområdet, det vil si er i området til fanene.

Forresten, forrige gang glemte jeg å forklare hva disse parameterne betyr:

CloseOnOverlayClick: true, closeOnEsc: true

closeOnOverlayClick - lar deg lukke et vindu når du klikker på et hvilket som helst område utenfor vinduet.
closeOnEsc - lukker vinduet når du trykker på Escape

Nå om selve sideoppsettet. Absolutt ingenting har endret seg.

Ditt forslag, skjema osv. vil være her. Du kan sette inn et skjema eller tilby å følge deg på sosiale nettverk

Jeg skal forklare litt. modalInner — wrapper modalt vindu, med display: ingen i stilene. tilbudet er klassen til selve modale vinduet. Hvis du endrer det, ikke glem å endre klassen i skriptet.

Her er en enkel implementering av et popup-vindu når du lukker en side. Synes du det er verdt å bruke en lignende effekt på et nettsted?

"onbeforeunload-hendelsen viser ikke tekst fra nettstedet, kun standardmelding", etter kommentarene å dømme, endelig og ugjenkallelig. I denne forbindelse ønsket jeg å skrive litt om sakens historie.

Mange vet at takket være onbeforeunload kan du be brukeren om ikke å forlate en nettside hvis han har ulagrede data (for eksempel skrevet i et skjema, men ikke sendt en melding til forumet). For å gjøre dette, bare legg til noe som dette JavaScript:
window.onbeforeunload = funksjon (evt) ( var melding = "Dokumentet "foo" er ikke lagret. Du vil miste endringene hvis du forlater siden."; if (typeof evt == "undefined") ( evt = window.event ; ) if (evt) ( evt.returnValue = melding; ) returner melding; )
Etter dette, ideelt sett, hvis brukeren ønsker å forlate siden (på noen måte - lukk fanen, lukk hele nettleseren, last inn siden på nytt, skriv inn ny adresse V adressefeltet, gå til et bokmerke osv.), vil han se en bekreftelsesforespørsel, og det kan avbrytes å forlate siden. Tidligere har skruppelløse nettstedforfattere prøvd å bruke dette vinduet for å overliste brukeren og holde ham på siden, for eksempel ved å bruke teksten "Klikk OK for å fortsette å jobbe med nettstedet og Avbryt for å lukke" (faktisk fungerte knappene den andre vei rundt). Eller til og med noe skumlere som "Klikk OK for å bekrefte belastningen på $1000 til kredittkortet ditt."

Så ble nettlesere klokere og begynte å legge til hjelpetekst for å gjøre det vanskeligere å lure brukeren. For eksempel, her er hvordan IE8 gjør det:

Nesten lignende tekst var i Firefox 3:

Hvis du leser alt, blir det klart hva nettstedet rapporterte og hva nettleseren rapporterte. Du kan imidlertid fortsatt jukse.

Her ser vi en tydelig beskrivelse av handlingene direkte på knappene. Det er allerede ganske vanskelig å overbevise brukeren om å klikke "Leave" for å bli og "Stay" for å forlate. Etter min mening er løsningen ideell og dette emnet kan lukkes. Generelt, som du vet, bør den ansiktsløse OK i nesten enhver dialog erstattes med navnet på handlingen (for eksempel "Slett filer", "Søk", "Legg til linje", "Åpne fil", etc.), dette reduserer antall brukerfeil, selv om du har full kontroll over teksten i dialogen.

Hva var dramaet med bug 641509? Faktum er at denne bekreftelsen i Firefox 4 og høyere ser slik ut:

Som sett, tilpasset tekst forsvant helt. Fra og med versjon 4 kan ikke nettstedet gi noen tilleggsmelding til brukeren eller forklare hvorfor den spesifikt ikke ønsker at brukeren skal forlate. La oss si at hvis du implementerer et grensesnitt for å jobbe med mange dokumenter i ett vindu, og ett av dem ikke er lagret, kan du fortelle hvilket spesifikt, men i Firefox vil du ikke forstå dette. Kanskje du ikke vil lagre den, og hvis du så meldingen, ville du rolig forlatt siden, men ellers vet du ikke hva som skjer. I arket