Evenimentul de închidere a ferestrei Javascript. Manevrarea închiderii filetei

În această lecție, vom afla despre diferitele metode ale obiectului fereastră, care vă permit să deschideți și să închideți ferestre, să determinați dacă o fereastră este închisă și, de asemenea, să obțineți numele său intern etc.

Metodele obiectului fereastră sunt open() , close() , print() , focus() și blur() .

În această secțiune, ne vom uita la următoarele metode ale obiectului fereastră:

  • open() - conceput pentru a deschide ferestre (file);
  • close() - conceput pentru a închide ferestrele. Folosit în principal pentru a închide ferestrele deschise folosind metoda open();
  • print() - conceput pentru a tipări conținutul ferestrei;
  • focus() - conceput pentru a transfera focalizarea către fereastra specificată;
  • blur() - este conceput pentru a elimina focalizarea din fereastra specificată.
metoda open(). Este conceput pentru a deschide o nouă fereastră (filă) în browser și are următoarea sintaxă:

Parametrii metodei:

  • Primul parametru specifică adresa URL a paginii care trebuie încărcată în această fereastră. Dacă valoarea acestui parametru nu este specificată, în fereastră va fi afișată o pagină goală (about:blank).
  • Al doilea parametru al metodei deschise specifică valoarea atributului țintă sau numele ferestrei. Sunt acceptate următoarele valori:
    • _blank - URL-ul este încărcat într-o nouă fereastră (filă). Aceasta este valoarea implicită;
    • _parent - URL-ul este încărcat în cadrul părinte. Dacă nu este acolo, atunci URL-ul este încărcat în fereastra curentă (filă);
    • _self - URL-ul este încărcat în fereastra curentă;
    • _top - anulează toate cadrele și încarcă adresa URL în fereastra curentă a browserului (filă). Dacă nu este acolo, atunci URL-ul este încărcat în fereastra curentă (filă);
    • De asemenea, puteți specifica numele ferestrei de deschis ca parametru. Acest nume este intern și poate fi folosit de dezvoltatorii web pentru a apela funcțiile și metodele acestei ferestre.
  • Al treilea parametru este destinat să specifice un set de proprietăți ale ferestrei, care sunt introduse separate prin virgule. Sunt acceptate următoarele proprietăți de bază ale ferestrei:
    • stânga , sus - coordonatele (în pixeli) ale colțului din stânga sus al ferestrei browserului în raport cu colțul din stânga sus al ecranului. Valorile acestor proprietăți trebuie să fie pozitive sau egale cu 0;
    • înălțime , lățime - înălțimea și lățimea zonei de lucru a ferestrei browserului. La specificarea valorilor, este necesar să se țină cont de faptul că lățimea și înălțimea ferestrei browser nu poate fi mai mică de 100 de pixeli;
    • resizable este o proprietate booleană a ferestrei care este concepută pentru a activa sau dezactiva capacitatea de a redimensiona fereastra browserului. Această proprietate acceptă următoarele valori: da sau 1 și nu sau 0;
    • scrollbars este o proprietate booleană a ferestrei care este utilizată pentru a activa sau dezactiva afișarea barelor de defilare pentru conținutul ferestrei browser. Această proprietate acceptă următoarele valori: da sau 1 și nu sau 0;
    • starea este o proprietate logică a ferestrei care are scopul de a activa sau dezactiva afișarea barei de stare a browserului. Această proprietate acceptă următoarele valori: da sau 1 și nu sau 0.

Luați în considerare următoarele exemple:

1. Deschideți o pagină goală about:blank într-o fereastră nouă. Această fereastră ar trebui să aibă o lățime și o înălțime de 250 px:

Window.open("","","lățime=250, înălțime=250");

2. Deschideți pagina web „http://site/” în fereastra curentă:

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

3. Deschideți o nouă fereastră cu anumite proprietăți (sus=100, stânga=100, lățime=400, înălțime=500, bare de defilare=da, resizabie=da):

Window.open("http://site", "_blank", "top=100, left=100, width=400, height=500, scrollbars=yes, resizable=yes");

Cum să interacționezi cu o fereastră după ce este deschisă?

Metoda open() vă permite nu numai să deschideți o fereastră, ci și să obțineți un link către această fereastră. Acest link vă permite să interacționați cu această fereastră apelând anumite proprietăți și metode. Aceste. Putem folosi codul JavaScript situat într-o fereastră pentru a controla o altă fereastră.

De exemplu, pentru a accesa obiectul document al unei ferestre deschise:

Deschideți o nouă fereastră goală și afișați ceva text în ea:

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

Un text

");

Notă: puteți interacționa numai cu ferestrele pe care le-ați deschis, nu puteți lucra cu alte ferestre;

metoda close().

Este conceput pentru a închide fereastra. Această metodă nu are parametri. Este de obicei folosit pentru a închide ferestrele create prin metoda open(). În caz contrar, atunci când încercați să închideți o fereastră (filă) deschisă chiar de utilizator (nu din JavaScript), browserul, din motive de securitate, va cere utilizatorului confirmarea pentru a efectua această acțiune.

De exemplu, să creăm butoane pentru deschiderea și închiderea unei ferestre numită fereastra mea:

//creăm o variabilă în care vom stoca o referință la obiectul fereastră al ferestrei deschise var myWindow; funcția meaWindowOpen ( myWindow = window.open("http://www.yandex.ru", „myWindow", "width=250, height=250"); ) funcția myWindowClose ( if (myWindow) ( myWindow.close() ; myWindow = null ) ) Deschide fereastra Închide fereastra

metoda print().

Este conceput pentru a tipări conținutul unei ferestre. Această metodă nu are parametri.

funcția myPrint() ( window.print(); ) Imprimă o pagină

metoda focus().

Este conceput pentru a pune accentul pe fereastra specificată. Această metodă nu are parametri.

metoda blur().

Este destinat să elimine focalizarea dintr-o fereastră specificată, de ex. îl mută în fundal. Această metodă nu are parametri.

function myWindowOpen() ( var myWindow = window.open("", "", "width=200,height=100"); ) function myWindowFocus() ( myWindow.focus(); ) function myWindowBlur() ( myWindow.blur (); ) Deschide fereastra Acordă focus pe fereastră Mută ​​fereastra în fundal

Proprietățile obiectului fereastră: nume, deschidere, închis.

În această secțiune, ne vom uita la următoarele proprietăți ale obiectului fereastră:

  • nume - are scopul de a obține sau de a seta numele intern al ferestrei;
  • deschidere - vă permite să obțineți în fereastra curentă un link către fereastra (obiect fereastră) din care a fost deschisă această fereastră;
  • closed este o proprietate booleană care returnează: true dacă fereastra este închisă și false dacă fereastra este deschisă.
proprietatea numelui

Această proprietate este foarte des folosită pentru a schimba numele intern al unei ferestre după ce aceasta este deja deschisă. În plus, proprietatea nume poate returna valoarea curentă a numelui intern al ferestrei.

Numele intern al ferestrei nu este un șir cuprins între etichetele de titlu de deschidere și de închidere - este numele ferestrei care este destinat dezvoltatorului. Aceste. acest nume este invizibil pentru utilizator.

Acest nume este folosit în principal în hyperlinkuri și formulare pentru a indica fereastra în care ar trebui să fie deschisă pagina. De exemplu, pentru a indica numele intern al unei ferestre într-un hyperlink, se utilizează atributul target Dacă elementul a are atributul target="searchWindow", atunci când faceți clic pe acest link, browserul încearcă mai întâi să găsească o fereastră cu. un astfel de nume intern (searchWindow), dacă nu există ferestre cu un astfel de nume intern există, se deschide o nouă fereastră și o numește searchWindow . Și dacă există o fereastră cu același nume, atunci o fereastră nouă nu se deschide, dar pagina este reîncărcată folosind linkul specificat în această fereastră. În mod implicit, ferestrele browserului nu au un nume intern.

De exemplu, să deschidem pagina „http://www.google.com/” într-o fereastră numită myWindow:

window.name = "myWindow";

De exemplu, să deschidem o fereastră folosind metoda open() și să afișăm numele acesteia în ea:

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

wnd.document.write("

Această fereastră are numele: " + wnd.name + ".");

proprietatea deschizătorului

Această proprietate vă permite să obțineți un link către fereastra sursă (obiect fereastră) în fereastră, de ex. la fereastra de la care era deschisă fereastra.

De exemplu, aveți o fereastră originală (1), în care utilizați metoda open() pentru a deschide o altă fereastră (2). În această fereastră (2) puteți folosi proprietatea de deschidere pentru a obține fereastra (1)."; } 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"); }!}

funcția openMyWindow() ( var myWindow=window.open("","","width=200,height=200"); myWindow.document.write("Deschide fereastra (2)"); $(document).ready (function() ( updatefgallowPrompt(true); window.onbeforeunload = WarnUser; ) function WarnUser() ( var allowPrompt = getfgallowPrompt(); if(allowPrompt) ( saveIndexedDataAlert(); return null; ) else ( updatefgallowPrompt(true); .stopPropagation ) ) funcția saveIndexedDataAlert() ( var allowPrompt = getfgallowPrompt(); var lenIndexedDocs = parseInt($("#sortable3 > li").size()) + parseInt($("#sortable3 > ul").size( )); if(allowPrompt && $.trim(lenIndexedDocs) > 0) ( event.returnValue = "Mesajul dvs.

Apoi a lucrat pentru mine;< 0) { //do whatever you want when closing the window.. } });

$(window).unload(funcție(eveniment) ( if(event.clientY

Window.onbeforeunload = function () ( returneaza "Chiar vrei sa inchizi?"; );

Poate doar un handler de evenimente înainte de descărcare în handlerul de evenimente de trimitere al formularului:

2

JQuery(„form”).submit(function() ( jQuery(window).unbind(„înainte de descărcare”); ... ));

Am o pagină părinte și o pagină secundară. pagina copil deschisă într-o filă nouă
Vreau să afișez un mesaj de avertizare (pagina copil se închide) când închid fila copil.

Cum să afișați mesajele închise când închideți fila? (Nu este un timp răcoritor)
Am folosit OnUnload și onbeforeunload.

Cele două metode sunt apelate și la reîmprospătarea paginii și la închiderea filelor.

Window.onunload = funcția doUnload(e) ( alert(„Fereastra copilului se închide...”); )

Window.onbeforeunload = funcția doUnload(e) ( alert(„Fereastra copilului se închide...”); )

Trebuie să arăt mesajul de avertizare, doar închideți fila din browser.

Ajutați-mă. Mulţumesc anticipat.

Folosesc următorul script. A funcționat în IE. Dar nu a funcționat în FireFox< 0) || (window.event.clientY < 0) || (window.event.clientX < -80)) { alert("Child window is closing..."); } };

Cum să realizați acest lucru în FireFox și în alt browser.

  • 4 raspunsuri
  • Triere:

    Activitate

1

Pentru acest afaik nu a fost niciodată un scenariu între browsere. Soluția este să NU te bazezi pe caracteristici nedocumentate și variabile specifice browserului pentru a detecta ceva important.

Deoarece aveți o pagină CHILD, puteți configura un test pe părinte (deschizător) care verifică proprietatea childWindowHandle.closed la intervale și acționează în funcție de aceasta.

1

Presupunând că încearcă doar să declanșeze evenimentul înainte de descărcare Crossbrowser, aceasta reușește destul de mult (cu excepția în Opera)

Încercați( // http://www.opera.com/support/kb/view/827/ opera.setOverrideHistoryNavigationMode(„compatibil”); history.navigationMode = „compatibil”; )catch(e)() //Undele noastre Funcția F" Are You Going Message ReturnMessage() ( returnează "WTF!!!"; ) // Funcția Funcție UnBind UnBindWindow() ( window.onbeforeunload = null; return true; ) //Legături pe care nu dorim să le afectăm documentul .getElementById("homebtn").onclick = UnBindWindow document.getElementById("googlebtn").onclick = UnBindWindow //Legarea mesajului de ieșire window.onbeforeunload = ReturnMessage;

0

Este posibil să nu puteți face acest lucru, cu excepția unor metode bazate pe cookie-uri, care este munca de dezvoltare a soluțiilor ca cookie-uri nepersistente. A doua identificare a reîmprospătării paginii, a redirecționării bazate pe formular sau a redirecționării inverse sau a browserului închis cu dumpingul evenimentului nu este simplă și plictisitoare. Recomand să nu depinzi de asta.

puteți face câteva lucruri mici înainte ca clientul să închidă fila. javascript detect browser close tab/close browser , dar dacă lista de acțiuni este mare și fila se închide înainte de a fi finalizată, ești neajutorat. Puteți încerca, dar din experiența mea nu depinde de asta. Da, nu puteți diferenția înapoi, actualiza și închide în acest moment. Prin urmare, nu există o modalitate fiabilă de a spune dacă un copil este cu adevărat închis.

Window.addEventListener("înainte de descărcare", funcția (e) ( var confirmationMessage = "\o/"; /* Ai un mic cod de acțiune aici */ (e || window.event).returnValue = confirmationMessage; //Gecko + IE return confirmationMessage //Webkit, Safari, Chrome ));

Bună ziua. Am postat recent un articol despre cum se face, dar mulți au cerut să adauge un articol cu ​​efect de oglindă, astfel încât să apară o fereastră atunci când un vizitator părăsește site-ul, adică atunci când încearcă să închidă pagina.

Astăzi vom vorbi despre acest subiect și vă voi arăta o implementare simplă.

Desigur, dezbaterea dacă ar trebui să adăugați sau nu un pop-up apropiat pe site-ul dvs. nu va înceta niciodată. Unii spun că există un loc special în Iad rezervat celor care îl adaugă, că acest lucru este extrem de enervant, că dacă am decis să plec, atunci voi pleca și nicio fereastră pop-up nu mă va opri, ci doar mă va enerva. Alții spun că aceste ferestre pop-up cresc conversiile și funcționează excelent. Cred că merită încercat și apoi, pe baza statisticilor, trageți concluzii specifice cu privire la nișa și produsul dvs.

Cum se face un pop-up la închiderea unei pagini

De fapt, nu am făcut nicio problemă și am schimbat puțin articolul anterior și am adăugat câteva rânduri de cod javascript. Anterior, a apărut o fereastră modală când ați vizitat prima dată un site. Acum va fi afișat doar la prima vizită a site-ului (când cursorul părăsește zona principală a site-ului și se mută în zona file). Dacă utilizatorul vizitează din nou site-ul, această fereastră nu va fi afișată. Acest lucru este implementat exact în același mod ca în articolul precedent, folosind cookie-uri. Cookie-urile sunt stocate timp de 7 zile, puteți specifica orice cantitate la discreția dvs.

Și totuși, nu atribuim un eveniment unui clic pe cruce din filă, ci pur și simplu verificăm poziția cursorului. Nu blocăm fereastra, butoanele etc., nu avem nevoie de nimic, ci pur și simplu arătăm fereastra.

Ca și data trecută, vom folosi pluginul jQuery arcticModal, ceea ce înseamnă că vom conecta jQuery în sine:

Și conectăm tema pluginului, eu o folosesc pe cea standard, dar poți să o scrii pe a ta:

Acum, pentru ca cookie-urile noastre să funcționeze, vom adăuga pluginul pentru cookie-uri de la Yandex:

Și conectați scriptul config.js cu următorul conținut:

$(document).ready(funcție () ( dacă (!$.cookie("smartCookies")) ( $(document).mouseleave(funcție (e) (funcția getWindow() ( $(".ofertă").arcticmodal (( closeOnOverlayClick: true, closeOnEsc: true )); setTimeout(getWindow, 1("smartCookies", true, ( expiră: "/" ));

Dacă ai citit ultimul articol, ai observat că nimic nu s-a schimbat, cu excepția faptului că scriptul din fișierul config.js s-a schimbat ușor. Adică, pur și simplu a apărut o altă condiție care se declanșează atunci când cursorul părăsește zona site-ului, adică se află în zona filelor.

Apropo, ultima dată am uitat să explic ce înseamnă acești parametri:

CloseOnOverlayClick: adevărat, closeOnEsc: adevărat

  • closeOnOverlayClick - vă permite să închideți o fereastră când faceți clic pe orice zonă din afara ferestrei.
  • closeOnEsc - închide fereastra când apăsați Escape

Acum despre aspectul paginii în sine. Absolut nimic nu s-a schimbat.

Propunerea dvs., formularul etc. vor fi aici. Puteți introduce un formular sau o ofertă pentru a vă urmări pe rețelele sociale

O să explic puțin. modalInner este un înveliș de fereastră modal, cu display:none în stiluri. oferta este clasa ferestrei modale în sine. Dacă îl schimbați, nu uitați să schimbați clasa din script.

Iată o implementare simplă a unei ferestre pop-up la închiderea unei pagini. Crezi că merită să folosești un efect similar pe un site web?