Javascript zapusti stran. JavaScript - Window Object: odpiranje in zapiranje oken. Metode okenskega objekta: open(), close(), print(), focus() in blur()

okno js dogodki (14)

Želim zajeti dogodek zapiranja okna/zavihka brskalnika. Z jQuery sem poskusil naslednje:

JQuery(window).bind("beforeunload", function() ( return confirm("Ali res želite zapreti?") ))

Deluje pa tudi z oddajo obrazca, česar ne želim. Želim dogodek, ki se sproži le, ko uporabnik zapre okno.

Od jQuery 1.7 je metoda .live() opuščena. Za pripenjanje obdelovalcev dogodkov uporabite .on(). Starejši uporabniki različice jQuery naj raje uporablja .delegate() kot .live()

$(window).bind("beforeunload", function() ( return true || confirm("Ali res želite zapreti?"); ));

$(okno).unbind();

JQuery(window).bind("beforeunload", function (e) ( var activeElementTagName = e.target.activeElement.tagName; if (activeElementTagName != "A" && activeElementTagName != "INPUT") ( return "Ali res želite zapreti?"; ) ))

Moj odgovor je namenjen zagotavljanju preprostih testov.

KAKO

Glej odgovor @SLaks.

$(window).on("beforeunload", function() ( return inFormOrLink ? "Ali res želite zapreti?" : null; ))

Kako dolgo bo trajalo, da brskalnik končno zapre stran?

Kadar koli uporabnik zapre stran (gumb x ali CTRL+W), se brskalnik zažene to kodo pred beforeunload , vendar ne za nedoločen čas. Edina izjema je potrditveno okno (vrne "Ali res želite zapreti?"), ki bo čakalo na odziv uporabnika.

Chrome: 2 sekundi.
Firefox: ∞ (ali dvakrat kliknite ali prisilno zaprite)
Rob: ∞ (ali dvojni klik)
Raziskovalec 11: 0 sekund.
Safari: NAREDITI

Kaj smo uporabili za testiranje tega:

Strežnik Node.js Express z dnevnikom zahtev
Naslednja kratka datoteka HTML

Pošlje čim več zahtev, preden brskalnik dokonča svojo stran (sinhrono).

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

Izhod Chrome:

GET /1480451321041 404 0,389 ms - 32 GET /1480451321052 404 0,219 ms - 32 ... GET /hello/1480451322998 404 0,328 ms - 32 1957 ms ≈ 2 sekundi // predpostavljamo, da sta 2 sekundi saj lahko zahteve trajajo nekaj milisekund poslati.

Poskusite tudi to

Window.onbeforeunload = function () ( if (pasteEditorChange) ( var btn = confirm("Ali želite shraniti spremembe?"); if(btn === true)( SavetoEdit();//vaš klic funkcije ) else ( windowClose();//vaš klic funkcije ) ) else ( windowClose();//vaš klic funkcije ) );

Samo preveri ...

Funkcija wopen_close())( var w = window.open($url, "_blank", "width=600, height=400, scrollbars=no, status=no, resizable=ne, screenx=0, screeny=0") ; w.onunload = function() ( if (window.closed) ( alert("okno zaprto"); )else( alert("pravkar osveženo"); ) ) )

Na žalost se bo sprožilo ponovno nalaganje, preusmeritev nove strani ali zaprtje brskalnika. Druga možnost je, da ujamete ID, ki sproži dogodek, in če je obrazec, ne kličete nobene funkcije, in če ni ID obrazca, naredite, kar želite, ko se stran zapre. Nisem prepričan, ali je to mogoče tudi neposredno in je dolgočasno.

Preden stranka zapre zavihek, lahko storite nekaj malenkosti. javascript zazna zapiranje zavihka brskalnika/zapiranje brskalnika, a če je vaš seznam dejanj velik in se zavihek zapre, preden je dokončan, ste nemočni. Lahko poskusite, vendar po mojih izkušnjah ni odvisno od tega.

Window.addEventListener("beforeunload", function (e) ( var confirmationMessage = "\o/"; /* Ali imate kodo majhnega dejanja tukaj */ (e || window.event).returnValue = confirmationMessage; //Gecko + IE vrni potrditveno sporočilo; //Webkit, Safari, Chrome ));

Če jih vaš pogled obrazca pošilja na drugo stran (kar verjamem, da je, tj. izvaja se beforeunload), lahko poskusite spremeniti obrazec beforeunload v klic ajax. Na ta način ne bodo zapustili vaše strani, ko je obrazec beforeunloaded, vi pa lahko svoje vezave beforeunload uporabljate, kot želite.

Za rešitev, ki je dobro delovala s kontrolniki tretjih oseb, kot sta Telerik (kot je RadComboBox) in DevExpress, ki uporabljajo sidrne oznake iz različnih razlogov, upoštevajte naslednjo kodo, ki je nekoliko izboljšana različica kode desm z boljšim izbirnikom za sidrno oznako vezava:

Var inFormOrLink; $("a:not(), a").live("klik", funkcija() ( inFormOrLink = true; )); $("obrazec").bind("pošlji", funkcija() ( inFormOrLink = true; )); $(window).bind("beforeunload", function(eventObject) ( var returnValue = undefined; if (! inFormOrLink) ( returnValue = "Ali res želite zapreti?)"; } eventObject.returnValue = returnValue; return returnValue; });!}

Uporabil sem Slaks, vendar ne deluje, kot je, ker je onbeforeunload returnValue razčlenjen kot niz in nato prikazan v potrditvenem oknu brskalnika. Tako je prikazano prav, na primer "true".

Samo z uporabo povratne informacije. Tukaj je moja koda

Var preventUnloadPrompt; var messageBeforeUnload = "moje sporočilo tukaj - Ali ste prepričani, da želite zapustiti to stran?"; //var redirectAfterPrompt = "http://www.google.co.in"; $("a").live("klik", funkcija() ( preventUnloadPrompt = true; )); $("forma").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(dokument).pripravljen(funkcija () ( wireUpEvents(); )); funkcija endSession() ( // Brskalnik ali zavihek brskalnika je zaprt // Naredite sth tukaj ... alert("bye"); ) funkcija wireUpEvents() ( /* * Za seznam dogodkov, ki sproži onbeforeunload v IE * preverite http ://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx */ window.onbeforeunload = function () (debugger if (!validNavigation) ( endSession(); ) ) // Pripni pritisk tipke dogodka, da izključite osvežitev F5 $(document).bind("pritisk tipke", funkcija (e) ( razhroščevalnik if (e.keyCode == 116) ( validNavigation = true; ) )); // Priložite klik dogodka za vse povezave na strani $("a").bind("klik", funkcija () ( debugger validNavigation = true; )); // Pripni oddajo dogodka za vse obrazce na strani $("form").bind( "submit", function () (debugger validNavigation = true; )); // Pripni klik dogodka za vse vnose na strani $("input").bind("click", function () ( debugger validNavigation = true; )); )`tukaj vnesite kodo`

Moja težava: Dogodek "onbeforeunload" se bo sprožil le, če je bilo liho število predložitev (klikov). Imel sem kombinacijo rešitev iz podobnih niti na SO, da je moja rešitev delovala. ok, moja koda bo govorila.

$(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 = "Vaše sporočilo"; } 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"); }!}

Kasneje je delal zame;

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

Window.onbeforeunload = function () ( return "Ali res želite zapreti?"; );

Morda samo rutina za obravnavo dogodka beforeunload v rokovalniku dogodkov za oddajo obrazca:

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

Imam eno nadrejeno stran in podrejeno stran. podrejena stran se je odprla v novem zavihku

Ko zaprem podrejeni zavihek, želim prikazati eno opozorilno sporočilo (podrejena stran se zapre).
Kako prikazati zaprto sporočilo ob zapiranju zavihka? (Ni čas za osvežitev)

Uporabil sem OnUnload in onbeforeunload.
Obe metodi se pokličeta tudi pri osveževanju strani in zapiranju zavihkov.

Window.onunload = funkcija doUnload(e) ( opozorilo("Podrejeno okno se zapira ..."); )

Window.onbeforeunload = funkcija doUnload(e) ( opozorilo("Otroško okno se zapira ..."); )

Moram prikazati opozorilno sporočilo, samo zaprite zavihek v brskalniku.

Pomagaj mi. Hvala vnaprej.

Uporabljam naslednji skript. V IE je delovalo. Toda v FireFoxu ni delovalo

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

Kako to doseči v FireFoxu in drugih brskalnikih.

4 odgovori

Razvrščanje:

dejavnost

Kajti ta afaik nikoli ni bil scenarij med brskalniki. Rešitev je, da se NE zanašate na nedokumentirane in spremenljive funkcije, specifične za brskalnik, da bi odkrili kar koli pomembnega.

Ker imate stran CHILD, lahko nastavite preizkus nadrejenega (odpirač), ki v intervalih preverja lastnost childWindowHandle.closed in ukrepa v skladu s tem.

Ob predpostavki, da samo poskuša sprožiti dogodek beforeunload Crossbrowser, to v veliki meri uspe (razen v Operi)

Try( // http://www.opera.com/support/kb/view/827/ opera.setOverrideHistoryNavigationMode("compatible"); history.navigationMode = "compatible"; )catch(e)() //Our Where Funkcija sporočila F" Are You Going ReturnMessage() ( vrni "WTF!!!"; ) //Funkcija funkcije UnBind UnBindWindow() ( window.onbeforeunload = null; return true; ) //Povezave povezav, za katere ne želimo, da vplivajo na dokument .getElementById("homebtn")

Tega morda ne boste mogli storiti, razen pri nekaterih metodah, ki temeljijo na piškotkih, kar je razvojna rešitev, saj ni obstojna piškotki. Druga identifikacija osveževanja strani, preusmeritve na podlagi obrazca ali povratne preusmeritve ali zaprtja brskalnika z odlaganjem dogodkov ni enostavna in dolgočasna. Priporočam, da se ne zanašate na to.

lahko naredite nekaj malenkosti, preden stranka zapre zavihek. javascript zazna brskalnik zapri zavihek/zapri brskalnik , a če je vaš seznam dejanj velik in se zavihek zapre, preden je dokončan, ste nemočni. Lahko poskusite, vendar po mojih izkušnjah ni odvisno od tega. Da, trenutno ne morete razlikovati nazaj, posodobiti in zapreti. Zato ni zanesljivega načina, da bi ugotovili, ali je otrok resnično zaprt.

dogodek ponovnega nalaganja strani js (14)

Želim zajeti dogodek zapiranja okna/zavihka brskalnika. Z jQuery sem poskusil naslednje:

JQuery(window).bind("beforeunload", function() ( return confirm("Ali res želite zapreti?") ))

Deluje pa tudi z oddajo obrazca, česar ne želim. Želim dogodek, ki se sproži le, ko uporabnik zapre okno.

Morda samo rutina za obravnavo dogodka beforeunload v rokovalniku dogodkov za oddajo obrazca:

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

Poskusite tudi to

Kasneje je delal zame;

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

Uporabil sem Slaks, vendar ne deluje, kot je, ker je onbeforeunload returnValue razčlenjen kot niz in nato prikazan v potrditvenem oknu brskalnika. Tako se prikaže vrednost true, na primer "true".

Samo z uporabo povratnih informacij. Tukaj je moja koda

Morda lahko upravljate OnSubmit in nastavite zastavico, ki jo pozneje preverite v upravljalniku OnBeforeUnload.

Moj odgovor je namenjen zagotavljanju preprostih testov.

KAKO

Glej odgovor @SLaks.

$(window).on("beforeunload", function() ( return inFormOrLink ? "Ali res želite zapreti?" : null; ))

Kako dolgo bo trajalo, da brskalnik končno zapre stran?

Kadar koli uporabnik zapre stran (gumb x ali CTRL + W), brskalnik izvede to kodo pred beforeunload, vendar ne v nedogled. Edina izjema je potrditveno okno (vrne "Ali res želite zapreti?"), ki bo čakalo na odziv uporabnika.

Chrome: 2 sekundi.
Firefox: ∞ (ali dvakrat kliknite ali prisilno zaprite)
Rob: ∞ (ali dvojni klik)
Raziskovalec 11: 0 sekund.
Safari: NAREDITI

Kaj smo uporabili za testiranje tega:

Strežnik Node.js Express z dnevnikom zahtev
Naslednja kratka datoteka HTML

Pošlje čim več zahtev, preden brskalnik dokonča svojo stran (sinhrono).

Izhod Chrome:

Za rešitev med brskalniki (preizkušeno v Chromu 21, IE9, FF15) razmislite o naslednji kodi, ki je rahlo spremenjena različica kode Slaks:

Var inFormOrLink; $("a").live("klik", funkcija() ( inFormOrLink = true; )); $("obrazec").bind("pošlji", funkcija() ( inFormOrLink = true; )); $(window).bind("beforeunload", function(eventObject) ( var returnValue = undefined; if (! inFormOrLink) ( returnValue = "Ali res želite zapreti?)"; } eventObject.returnValue = returnValue; return returnValue; }); !}

Upoštevajte, da se pri Firefoxu 4 prikaže sporočilo "Ali ste prepričani, da želite zapreti?" ni prikazano. FF preprosto prikaže splošno sporočilo. Glej opombo na https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload

Dogodek beforeunload se sproži vsakič, ko uporabnik iz katerega koli razloga zapusti vašo stran.

Sproži se na primer, če uporabnik odda obrazec, klikne povezavo, zapre okno (ali zavihek) ali se premakne na nova stran z uporabo naslovne vrstice, iskalnega polja ali zaznamka.

Var inFormOrLink; $("a").on("klik", funkcija() ( inFormOrLink = true; )); $("obrazec").on("oddaj", funkcija() ( inFormOrLink = true; )); $(window).on("beforeunload", function() ( return inFormOrLink ? "Ali res želite zapreti?" : null; ))

Za različice jQuery, starejše od 1.7, poskusite to:

live metoda ne deluje z dogodkom oddaje, tako da če dodate nova uniforma, boste morali z njim povezati tudi upravljalnik.

Upoštevajte, da če drug obravnavalec dogodkov prekliče predložitev ali navigacijo, boste izgubili potrditveni poziv, če se okno pozneje dejansko zapre. To lahko popravite tako, da zabeležite čas v dogodkih pošiljanja in klikanja ter preverite, ali je beforeunload oddaljen več kot nekaj sekund.

Samo preveri ...

Od jQuery 1.7 je metoda .live() opuščena. Za pripenjanje obdelovalcev dogodkov uporabite .on(). Uporabniki starejših različic jQuery naj uporabljajo .delegate() namesto .live()

$(window).bind("beforeunload", function() ( return true || confirm("Ali res želite zapreti?"); ));

Dober večer. Pred kratkim sem objavil članek o tem, kako to storiti, vendar so mnogi prosili, da dodajo članek z zrcalnim učinkom, tako da se prikaže okno, ko obiskovalec zapusti spletno mesto, to je, ko poskuša zapreti stran.

Danes se bomo pogovarjali o tej temi in pokazal vam bom preprosto izvedbo.

Seveda se razprava o tem, ali bi morali svojemu spletnemu mestu dodati pojavno okno za zapiranje ali ne, ne bo nikoli prenehala. Nekateri pravijo, da je v peklu posebno mesto rezervirano za tiste, ki ga dodajajo, da je to divje jezno, da če sem se odločil oditi, potem bom odšel in nobeno pojavno okno me ne bo ustavilo, ampak me bo samo motilo. Drugi pravijo, da ta pojavna okna povečajo konverzije in delujejo odlično. Mislim, da je vredno poskusiti in nato na podlagi statističnih podatkov narediti konkretne zaključke glede vaše niše in izdelka.

Kako narediti pojavno okno, ko zaprete stran

Pravzaprav se nisem več trudil in sem samo nekoliko spremenil prejšnji članek ter dodal nekaj vrstic kode javascript. Prej se je modalno okno pojavilo, ko ste prvič obiskali spletno mesto. Zdaj bo prikazan le ob prvem obisku spletnega mesta (ko kazalec zapusti glavno območje spletnega mesta in se premakne na območje zavihkov). Če uporabnik ponovno obišče spletno mesto, to okno ne bo prikazano. To se izvaja na popolnoma enak način kot v prejšnjem članku, z uporabo piškotkov. Piškotki se hranijo 7 dni, poljubno količino lahko določite po lastni presoji.

Pa vendar, kliku na križec v zavihku ne pripenjamo dogodka, ampak preprosto preverimo položaj kazalca. Ne blokiramo okna, gumbov itd., ne zahtevamo ničesar, ampak preprosto pokažemo okno.

Kot zadnjič bomo uporabili vtičnik jQuery arcticModal, kar pomeni, da bomo povezali sam jQuery:

In povežemo temo vtičnika, uporabljam standardno, vendar lahko napišete svojo:

Da bodo naši piškotki delovali, bomo dodali Yandexov vtičnik za piškotke:

In povežite skript config.js z naslednjo vsebino:

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

Če ste prebrali zadnji članek, ste opazili, da se ni nič spremenilo, le da se je nekoliko spremenila skripta v datoteki config.js. To pomeni, da se je preprosto pojavil drug pogoj, ki se sproži, ko kazalec zapusti območje spletnega mesta, to je v območju zavihkov.

Mimogrede, zadnjič sem pozabil razložiti, kaj pomenijo ti parametri:

CloseOnOverlayClick: res, closeOnEsc: res

closeOnOverlayClick - omogoča, da zaprete okno, ko kliknete katero koli območje zunaj okna.
closeOnEsc - zapre okno, ko pritisnete Escape

Zdaj pa o sami postavitvi strani. Čisto nič se ni spremenilo.

Tukaj bo vaš predlog, obrazec itd. Vstavite lahko obrazec ali ponudbo, da vam sledim na družbenih omrežjih

Bom malo razložil. modalInner — ovoj modalno okno, z display:none v slogih. ponudba je razred samega modalnega okna. Če ga spremenite, ne pozabite spremeniti razreda v skriptu.

Tukaj je preprosta izvedba pojavnega okna ob zapiranju strani. Ali menite, da je vredno uporabiti podoben učinek na spletnem mestu?

»dogodek onbeforeunload ne prikaže besedila, ki ga posreduje spletno mesto, ampak samo standardno sporočilo«, sodeč po komentarjih, dokončno in nepreklicno. V zvezi s tem sem želel napisati nekaj o zgodovini vprašanja.

Mnogi vedo, da lahko zahvaljujoč onbeforeunload uporabnika prosite, naj ne zapusti spletne strani, če ima neshranjene podatke (na primer zapisan v obrazcu, vendar ni poslal sporočila na forum). Če želite to narediti, preprosto dodajte nekaj podobnega temu JavaScript:
window.onbeforeunload = funkcija (evt) ( var message = "Dokument "foo" ni shranjen. Če zapustite stran, boste izgubili spremembe."; if (typeof evt == "undefined") ( evt = window.event ; ) if (evt) ( evt.returnValue = message; ) povratno sporočilo; )
Po tem, v idealnem primeru, če želi uporabnik zapustiti stran (na kakršen koli način – zapreti zavihek, zapreti celoten brskalnik, znova naložiti stran, vnesti nov naslov V naslovna vrstica, pojdite na zaznamek itd.), bo videl zahtevo za potrditev in zapustitev strani bo lahko preklicana. Prej so brezvestni avtorji spletnih mest poskušali uporabiti to okno, da bi prelisičili uporabnika in ga obdržali na strani, na primer z besedilom »Kliknite V redu, da nadaljujete z delom s spletnim mestom, in Prekliči, da ga zaprete« (pravzaprav so gumbi delovali drugače naokoli). Ali celo kaj bolj strašnega, kot je "Kliknite V redu, da potrdite bremenitev vaše kreditne kartice v višini 1000 USD."

Nato so brskalniki postali modrejši in začeli dodajati pomožno besedilo, da bi bilo težje zavajati uporabnika. Tukaj je na primer, kako to počne IE8:

Skoraj podobno besedilo je bilo v Firefoxu 3:

Če preberete vse, postane jasno, kaj je poročalo spletno mesto in kaj brskalnik. Vendar pa lahko še vedno goljufate.

Tukaj vidimo jasen opis dejanj neposredno na gumbih. Uporabnika je že kar težko prepričati, da klikne »Odhod«, da ostane, in »Ostani«, da odide. Po mojem mnenju je rešitev idealna in to temo lahko zaključimo. Na splošno, kot veste, je treba brezlični OK v skoraj vsakem pogovornem oknu zamenjati z imenom dejanja (na primer »Izbriši datoteke«, »Išči«, »Dodaj vrstico«, »Odpri datoteko« itd.), to zmanjša število uporabniških napak, tudi če imate popoln nadzor nad besedilom dialoga.

Kakšna je bila drama s hroščem 641509? Dejstvo je, da je ta potrditev v Firefoxu 4 in novejših videti takole:

Kot je razvidno, besedilo po meri popolnoma izginil. Od različice 4 naprej spletno mesto ne more zagotoviti nobenega dodatnega sporočila uporabniku ali pojasniti, zakaj točno ne želi, da uporabnik zapusti spletno mesto. Recimo, če implementirate vmesnik za delo s številnimi dokumenti v enem oknu in eden od njih ni shranjen, bi lahko ugotovili, kateri posebej, vendar v Firefoxu tega ne boste razumeli. Morda ga ne želite shraniti in če bi videli sporočilo, bi stran mirno zapustili, sicer pa ne veste, kaj se dogaja. V listu