Javascript poruka prije zatvaranja prozora. JavaScript - Objekat prozora: Otvaranje i zatvaranje prozora. Šta smo koristili da ovo testiramo?

Već su me nekoliko puta pitali kako se nositi sa zatvaranjem kartice. Recimo da korisnik želi zatvoriti vašu stranicu, a vi napravite neku vrstu iskačućeg prozora i pitate: " Jesi li siguran?", ili preusmjeravanje na drugu stranicu. Naravno, ove metode su veoma neugodne za korisnike, pa preporučujem da ih ne koriste. Srećom, pretraživači također to vrlo loše rješavaju, međutim, još uvijek postoje neke opcije za rukovanje zatvaranjem kartica.

Moguće je pitati korisnika: " Je li siguran da želi zatvoriti stranicu?". Evo kako možete implementirati ovu obradu zatvaranja kartice:


window.onbeforeunload = function() (
return "Nešto za reći korisniku";
}

Ovaj kod će raditi u Firefox-u, IE, Chrome-u, ali neće raditi u Operi (ovaj preglednik uopće ne obrađuje onbeforeunload). U ovom slučaju, sama funkcija obrade može vratiti samo string, odnosno tamo neće raditi nikakva preusmjeravanja.

Vraćeni niz će biti prikazan u prozoru za potvrdu u Chromeu i IE. Ova linija se ne pojavljuje u Firefoxu.

“onbeforeunload događaj ne prikazuje tekst dostavljen sa sajta, samo standardnu ​​poruku”, sudeći po komentarima, konačno i neopozivo. S tim u vezi, htio sam malo napisati o historiji problema.

Mnogi ljudi znaju da zahvaljujući onbeforeunloadu možete zamoliti korisnika da ne napušta web stranicu ako ima nesačuvane podatke (na primjer, napisane u obrascu, ali nije poslao poruku na forum). Da biste to učinili, samo dodajte nešto poput ovog JavaScripta:
window.onbeforeunload = funkcija (evt) ( var message = "Dokument "foo" nije sačuvan. Izgubit ćete promjene ako napustite stranicu."; if (typeof evt == "undefined") ( evt = window.event ; ) if (evt) ( evt.returnValue = poruka; ) povratna poruka; )
Nakon ovoga, idealno, ako korisnik želi napustiti stranicu (na bilo koji način - zatvoriti karticu, zatvoriti cijeli pretraživač, ponovo učitati stranicu, uneti novu adresu u adresnu traku, otići na bookmark, itd.), on će vidjeti zahtjev za potvrdu i napuštanje stranice se može otkazati. Ranije su beskrupulozni autori web stranica pokušavali koristiti ovaj prozor da nadmudre korisnika i zadrže ga na stranici, na primjer, koristeći tekst "Kliknite OK da nastavite raditi s web-mjestom i Otkaži da zatvorite" (u stvari, dugmad su radila na drugom naopako). Ili čak nešto strašnije poput "Kliknite OK da potvrdite naplatu od 1.000 USD na vašoj kreditnoj kartici."

Zatim su pretraživači postali mudriji i počeli da dodaju pomoćni tekst kako bi bilo teže prevariti korisnika. Na primjer, evo kako IE8 to radi:

Skoro sličan tekst je bio u Firefoxu 3:


Ako sve pročitate, postaje jasno šta je sajt prijavio, a šta pretraživač. Međutim, još uvijek možete varati.


Ovdje vidimo jasan opis radnji direktno na dugmadima. Već je prilično teško uvjeriti korisnika da klikne na “Napusti” da ostane i “Ostani” da ode. Po meni je rešenje idealno i ova tema se može zatvoriti. Općenito, kao što znate, bezličan OK u gotovo svakom dijalogu treba zamijeniti imenom radnje (na primjer, „Izbriši datoteke“, „Pretraži“, „Dodaj redak“, „Otvori datoteku“ itd.), ovo smanjuje broj korisničkih grešaka, čak i ako imate potpunu kontrolu nad tekstom dijaloga.

Kakva je bila drama s bubom 641509? Činjenica je da ova potvrda u Firefoxu 4 i novijim izgleda ovako:


Kao što vidite, prilagođeni tekst je potpuno nestao. Od verzije 4, web stranica ne može pružiti nikakvu dodatnu poruku korisniku niti objasniti zašto konkretno ne želi da korisnik napusti. Recimo, ako implementirate sučelje za rad sa više dokumenata u jednom prozoru, a jedan od njih nije sačuvan, mogli biste reći koji konkretno, ali u Firefoxu to nećete razumjeti. Možda ne želite da je sačuvate i kada biste videli poruku, mirno biste napustili stranicu, ali inače ne znate šta se dešava. U listu

U ovoj lekciji ćemo naučiti o različitim metodama objekta prozora, koje vam omogućavaju da otvarate i zatvarate prozore, određujete da li je prozor zatvoren, kao i da dobijete njegovo interno ime itd.

Metode objekta prozora su open(), close(), print(), focus() i blur().

U ovom dijelu ćemo pogledati sljedeće metode objekta prozora:

  • open() - dizajniran za otvaranje prozora (kartica);
  • close() - dizajniran za zatvaranje prozora. Uglavnom se koristi za zatvaranje prozora otvorenih korištenjem open() metode;
  • print() - dizajniran za ispis sadržaja prozora;
  • focus() - dizajniran za prebacivanje fokusa na navedeni prozor;
  • blur() - dizajniran je da ukloni fokus sa navedenog prozora.
open() metoda. Dizajniran je za otvaranje novog prozora (kartica) u pretraživaču i ima sljedeću sintaksu:

Parametri metode:

  • Prvi parametar specificira URL stranice koja se mora učitati u ovaj prozor. Ako vrijednost ovog parametra nije navedena, prazna stranica (about:blank) će biti prikazana u prozoru.
  • Drugi parametar metode open specificira vrijednost ciljnog atributa ili ime prozora. Podržane su sljedeće vrijednosti:
    • _blank - URL se učitava u novi prozor (kartica). Ovo je zadana vrijednost;
    • _parent - URL se učitava u roditeljski okvir. Ako ga nema, onda se URL učitava u trenutni prozor (tab);
    • _self - URL se učitava u trenutni prozor;
    • _top - poništava sve okvire i učitava URL u trenutni prozor pretraživača (kartica). Ako ga nema, onda se URL učitava u trenutni prozor (tab);
    • Također možete odrediti ime prozora koji će se otvoriti kao parametar. Ovo ime je interno i mogu ga koristiti web programeri za pozivanje funkcija i metoda ovog prozora.
  • Treći parametar je namijenjen za specificiranje skupa svojstava prozora, koja se unose odvojeno zarezima. Podržana su sljedeća osnovna svojstva prozora:
    • lijevo , top - koordinate (u pikselima) gornjeg lijevog ugla prozora pretraživača u odnosu na gornji lijevi ugao ekrana. Vrijednosti ovih svojstava moraju biti pozitivne ili jednake 0;
    • visina, širina - visina i širina radnog područja prozora pretraživača. Prilikom određivanja vrijednosti potrebno je voditi računa da širina i visina prozora pretraživača ne mogu biti manje od 100 piksela;
    • resizable je Bulovo svojstvo prozora koje je dizajnirano da omogući ili onemogući mogućnost promjene veličine prozora pretraživača. Ovo svojstvo prihvata sljedeće vrijednosti: da ili 1, i ne ili 0;
    • scrollbars je Bulovo svojstvo prozora koje se koristi za omogućavanje ili onemogućavanje prikaza traka za pomicanje za sadržaj prozora pretraživača. Ovo svojstvo prihvata sljedeće vrijednosti: da ili 1, i ne ili 0;
    • status je logičko svojstvo prozora koje je namijenjeno da omogući ili onemogući prikaz statusne trake pretraživača. Ovo svojstvo prihvaća sljedeće vrijednosti: da ili 1, i ne ili 0.

Razmotrite sljedeće primjere:

1. Otvorite praznu stranicu about:blank u novom prozoru. Ovaj prozor bi trebao imati širinu i visinu od 250px:

Window.open("","","width=250,height=250");

2. Otvorite web stranicu "http://site/" u trenutnom prozoru:

Window.open("http://site/", "_self");

3. Otvorite novi prozor sa određenim svojstvima (top=100, lijevo=100, širina=400, visina=500, scrollbars=yes, resizabie=yes):

Window.open("http://site", "_blank", "top=100, lijevo=100, širina=400, visina=500, scrollbars=yes, resizeable=yes");

Kako komunicirati s prozorom nakon što se otvori?

Open() metoda vam omogućava ne samo da otvorite prozor, već i da dobijete vezu do ovog prozora. Ova veza vam omogućava interakciju s ovim prozorom pozivanjem određenih svojstava i metoda. One. Možemo koristiti JavaScript kod koji se nalazi u jednom prozoru za kontrolu drugog prozora.

Na primjer, za pristup objektu dokumenta otvorenog prozora:

Otvorite prazan novi prozor i prikažite neki tekst u njemu:

Var myWindow = window.open("", "", "width=250, height=250"); myWindow.document.write("

Neki tekst

");

Napomena: Možete komunicirati samo s prozorima koje ste otvorili; ne možete raditi s drugim prozorima.

close() metoda

Dizajniran je za zatvaranje prozora. Ova metoda nema parametre. Obično se koristi za zatvaranje prozora kreiranih metodom open(). U suprotnom, kada pokušate da zatvorite prozor (karticu) koji je otvorio sam korisnik (ne iz JavaScripta), pretraživač će iz sigurnosnih razloga tražiti od korisnika potvrdu da izvrši ovu radnju.

Na primjer, napravimo dugmad za otvaranje i zatvaranje prozora pod nazivom myWindow:

//kreiramo varijablu u koju ćemo pohraniti referencu na objekt prozora otvorenog prozora var myWindow; funkcija myWindowOpen ( myWindow = window.open("http://www.yandex.ru", "myWindow", "width=250, visina=250"); ) funkcija myWindowClose ( if (myWindow) ( myWindow.close() ; myWindow = null; ) ) Otvori prozor Zatvori prozor

print() metoda

Dizajniran je za ispis sadržaja prozora. Ova metoda nema parametre.

funkcija myPrint() ( window.print(); ) Ispis stranice

fokus() metoda

Dizajniran je da da fokus na navedeni prozor. Ova metoda nema parametre.

blur() metoda

Namijenjen je uklanjanju fokusa sa određenog prozora, tj. pomiče ga u pozadinu. Ova metoda nema parametre.

funkcija myWindowOpen() ( var myWindow = window.open("", "", "width=200,height=100"); ) funkcija myWindowFocus() ( myWindow.focus(); ) funkcija myWindowBlur() ( myWindow.blur (; ) Otvorite prozor. Fokusirajte prozor. Premjestite prozor u pozadinu

Svojstva objekta prozora: ime, otvarač, zatvoreno.

U ovom dijelu ćemo pogledati sljedeća svojstva objekta prozora:

  • naziv - namenjen je dobijanju ili postavljanju internog imena prozora;
  • otvarač - omogućava vam da u trenutnom prozoru dobijete vezu do prozora (prozorskog objekta) iz kojeg je ovaj prozor otvoren;
  • zatvoreno je logičko svojstvo koje vraća: true ako je prozor zatvoren i false ako je prozor otvoren.
ime svojstva

Ovo svojstvo se vrlo često koristi za promjenu internog imena prozora nakon što je već otvoren. Osim toga, svojstvo name može vratiti trenutnu vrijednost internog imena prozora.

Interni naziv prozora nije string zatvoren između početne i završne oznake naslova - to je naziv prozora koji je namijenjen programeru. One. ovo ime je nevidljivo za korisnika.

Ovo ime se prvenstveno koristi u hiperlinkovima i obrascima za označavanje prozora u kojem treba otvoriti stranicu. Na primjer, za označavanje internog imena prozora u hipervezi koristi se ciljni atribut. Ako element a ima atribut target="searchWindow", onda kada kliknete na ovu vezu, pretraživač prvo pokušava pronaći prozor sa takvo interno ime (searchWindow), ako ne postoje prozori sa takvim internim imenom, otvara se novi prozor i imenuje ga searchWindow . A ako prozor sa istim imenom postoji, onda se novi prozor ne otvara, već se stranica ponovo učitava pomoću navedene veze u ovom prozoru. Podrazumevano, prozori pretraživača nemaju interno ime.

Na primjer, otvorimo stranicu "http://www.google.com/" u prozoru koji se zove myWindow:

window.name = "myWindow";

Na primjer, otvorimo prozor koristeći open() metodu i prikažimo njegovo ime u njemu:

var wnd = window.open("","myTest","width=200, height=300"); wnd.document.write("

Ovaj prozor ima ime: " + wnd.name + ".");

opener property

Ovo svojstvo vam omogućava da u prozoru dobijete vezu na originalni prozor (prozorski objekat), tj. do prozora sa kojeg je prozor otvoren.

Na primjer, imate originalni prozor (1), u kojem koristite metodu open() da otvorite drugi prozor (2). U ovom prozoru (2) možete koristiti svojstvo otvarača da biste dobili prozor (1).

funkcija openMyWindow() ( var myWindow=window.open("","","width=200,height=200"); myWindow.document.write("Otvori prozor (2)"); $(document).ready (function() ( updatefgallowPrompt(true); window.onbeforeunload = WarnUser; ) funkcija WarnUser() (var allowPrompt = getfgallowPrompt(); if(allowPrompt) ( saveIndexedDataAlert(); vrati null; ) else (događaj updatefgallowPrompt(true); .stopPropagation ) ) funkcija saveIndexedDataAlert() ( var allowPrompt = getfgallowPrompt(); var lenIndexedDocs = parseInt($("#sortable3 > li").size()) + parseInt($("#sortable3 > ul").size( )); if(allowPrompt && $.trim(lenIndexedDocs) > 0) ( event.returnValue = "Vaša poruka"; } 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"); }!}

Poslije je radio za mene;

$(prozor).unload(funkcija(događaj) ( if(event.clientY< 0) { //do whatever you want when closing the window.. } });

Window.onbeforeunload = function () (vraćanje "Da li stvarno želite da zatvorite?"; );

Možda samo obrađivač događaja prije učitavanja u obrascu za obradu događaja za slanje:

JQuery("forma").submit(function() (jQuery(window).unbind("preunload"); ... ));

2

Imam jednu roditeljsku i podređenu stranicu. podređena stranica otvorena u novoj kartici

Želim prikazati jednu poruku upozorenja (podređena stranica se zatvara) kada zatvorim podređenu karticu.
Kako prikazati zatvorenu poruku prilikom zatvaranja kartice? (Nije vrijeme za osvježavanje)

Koristio sam OnUnload i onbeforeunload .
Ove dvije metode se također pozivaju prilikom osvježavanja stranice i zatvaranja kartica.

Window.onunload = funkcija doUnload(e) ( upozorenje("Prozor djeteta se zatvara..."); )

Window.onbeforeunload = funkcija doUnload(e) ( upozorenje("Prozor djeteta se zatvara..."); )

Moram da prikažem poruku upozorenja, samo zatvorite karticu u pretraživaču.

Pomozi mi. Hvala unaprijed.

Koristim sljedeću skriptu. Radilo je u IE. Ali nije radio u FireFoxu

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

Kako to postići u FireFox-u i drugim pretraživačima.

  • 4 odgovora
  • sortiranje:

    Aktivnost

1

Jer ovaj afaik nikada nije bio scenario za više pretraživača. Rješenje je da se NE oslanjate na nedokumentirane i varijabilne karakteristike specifične za pretraživač da biste otkrili bilo šta važno.

Pošto imate CHILD stranicu, možete postaviti test na roditelj (otvarač) koji provjerava svojstvo childWindowHandle.closed u intervalima i djeluje na to.

1

Pod pretpostavkom da samo pokušava pokrenuti događaj Crossbrowser prije deunloada, ovo prilično radi (osim u Operi)

Try( // http://www.opera.com/support/kb/view/827/ opera.setOverrideHistoryNavigationMode("compatible"); history.navigationMode = "compatible"; )catch(e)() //Naše gdje Funkcija F" Idete li poruka ReturnMessage() (vratite "WTF!!!"; ) // Funkcija UnBind Funkcija UnBindWindow() ( window.onbeforeunload = null; vrati true; ) //Vezivanje veza na koje ne želimo utjecati na dokument .getElementById("homebtn").onclick = UnBindWindow; document.getElementById("googlebtn").onclick = UnBindWindow; //Vezivanje izlaznog dijaloga poruke window.onbeforeunload = ReturnMessage;

0

Možda nećete moći to učiniti osim za neke metode zasnovane na kolačićima, što je rad na razvoju zaobilaznih rješenja kao netrajnih kolačića. Druga identifikacija osvježavanja stranice, preusmjeravanja na osnovu obrasca ili obrnutog preusmjeravanja ili zatvaranja pretraživača sa izbacivanjem događaja nije jednostavna i zamorna. Preporučujemo da ne zavisite od ovoga.

možete učiniti neke male stvari prije nego što klijent zatvori karticu. javascript detektuje preglednik zatvaranje kartice/zatvaranje pretraživača, ali ako je vaša lista akcija velika i kartica se zatvori prije nego što se završi, vi ste bespomoćni. Možete probati, ali po mom iskustvu to ne zavisi od toga. Da, u ovom trenutku ne možete razlikovati natrag, ažurirati i zatvoriti. Stoga ne postoji pouzdan način da se utvrdi da li je dijete zaista zatvoreno.

Window.addEventListener("beforeunload", funkcija (e) ( var confirmationMessage = "\o/"; /* Da li ovdje koristite mali kod akcije */ (e || window.event).returnValue = confirmationMessage; //Gecko + IE return confirmationMessage; //Webkit, Safari, Chrome ));