Hei acolo! Sunt furnizor de deschizători de ferestre și de multe ori mi se pun câteva întrebări interesante despre partea tehnică a lucrurilor. O întrebare care apare destul de mult este: „Pot accesa DOM -ul deschizătorului ferestrei de la fereastra copilului?” Să ne aruncăm în acest subiect și să vedem ce este.
În primul rând, să explicăm rapid care este DOM. Modelul obiectului de document, sau DOM pe scurt, este ca un arbore - reprezentare structurată a tuturor elementelor de pe o pagină web. Permite JavaScript să interacționeze cu aceste elemente, schimbându -și stilurile, conținutul și așa mai departe. Acum, când vorbim despre un deschizător de ferestre și o fereastră pentru copii, de obicei avem de -a face cu scenarii în care o pagină web deschide alta.
Imaginați -vă că sunteți pe o pagină principală (deschizătorul ferestrei) și faceți clic pe un buton care deschide o nouă filă sau fereastră (fereastra copilului). Întrebarea este: fereastra copilului poate ajunge înapoi și să se încurce cu DOM -ul paginii principale? Ei bine, răspunsul nu este un simplu da sau nu.
Aceeași politică de origine
Marea regulă aici este aceeași politică de origine. Aceasta este o măsură de securitate în browserele web care restricționează o pagină de la accesarea DOM a unei alte pagini, dacă au origini diferite. O origine este practic o combinație a protocolului (cum ar fi HTTP sau HTTPS), domeniul (de exemplu, www.example.com) și numărul portului.
Dacă deschizătorul ferestrei și fereastra copilului au aceeași origine, lucrurile devin mult mai flexibile. De exemplu, dacă deschideți o fereastră nouă de pe propriul site web, fereastra Copil poate accesa DOM al ferestrei deschizătorului. Puteți utilizafereastră.OPENERobiect în JavaScript pentru a face acest lucru. Iată un exemplu simplu:
) ) if (someElement) {someElement.style.color = 'roșu'; }}Dar dacă originile sunt diferite, browserele vor bloca accesul. Acest lucru este pentru a împiedica site -urile rău intenționate să fure informații sensibile de pe alte site -uri. De exemplu, dacă deschideți o fereastră pentru copii de pe site -ul dvs. E - Comerț la o gateway de plată a părții a treia, fereastra Gateway -ului de plată nu poate accesa DOM -ul site -ului e -Commerce.
De ce ai vrea să accesezi DOM al deschizătorului ferestrei?
În calitate de furnizor de deschizători de ferestre, mă pot gândi la câteva motive pentru care cineva ar putea dori să facă acest lucru. Să spunem că aveți un catalog de produse pe pagina principală, iar când un utilizator face clic pe un produs, deschide o fereastră pentru copii cu informații mai detaliate. S -ar putea să doriți ca fereastra copilului să actualizeze DOM -ul paginii principale pentru a arăta că produsul a fost vizualizat sau pentru a -l adăuga la o listă „vizualizată recent”.
Un alt caz de utilizare ar putea fi într -un instrument de configurare. Deschideți o fereastră a copilului pentru a configura un produs de deschizător de ferestre, cum ar fi unComutator orb motorizat. Odată ce utilizatorul finalizează configurația în fereastra copilului, puteți utiliza accesul la DOM al deschizătorului ferestrei pentru a actualiza pagina principală cu opțiunile de configurare selectate.
Crucea de manipulare - situații de origine
Dacă aveți nevoie să accesați DOM al deschizătorului ferestrei într -o situație de origine încrucișată, există câteva soluții de rezolvare. O opțiune este utilizarea API -ului postmessage. Acest lucru permite Windows cu origini diferite să comunice într -un mod sigur.
Ideea de bază este că o fereastră poate trimite un mesaj către o altă fereastră folosindPostmessagemetoda, iar fereastra de primire pot asculta aceste mesaje folosindWindow.addeventListener ('Mesaj', Callback)eveniment.
Iată cum funcționează:
// În fereastra copilului var TargetOrigin = 'https://www.example.com'; Window.Opener.PostMessage („Câteva date de la fereastra copilului”, TargetOrigin); // În fereastra de deschidere a ferestrei.addeventListener ('mesaj', funcție (eveniment) {if (event.origin === 'https: // child - fereastră - domeniu.com') {console.log ('mesaj primit:', event.data);}});În acest fel, puteți schimba date între cele două ferestre fără a accesa direct DOM, care este blocată de aceeași politică de origine.
Real - Exemple mondiale în afacerea deschizătorilor de ferestre
Să vorbim despre câteva scenarii reale - mondiale în afacerea deschizătorilor de ferestre. Să presupunem că aveți o pagină principală care listează diferite tipuri de deschizători de ferestre, cum ar fiMotor electronic de 45 mmşiMotor limită mecanică de precizie. Când un utilizator face clic pe un motor pentru a afla mai multe, se deschide o fereastră pentru copii.
Puteți utiliza accesul DOM (dacă este posibil) pentru a actualiza numărul de vizualizări al paginii principale pentru acel produs. Sau, dacă fereastra copilului are un buton „Adăugare la coș”, puteți utiliza accesul pentru a actualiza pictograma coșului de pe pagina principală.
Dacă Cross - Originea este o problemă, puteți utiliza în continuare API -ul PostMessage. De exemplu, fereastra Copilului poate trimite un mesaj către pagina principală spunând că un produs a fost adăugat în coș. Pagina principală poate apoi să actualizeze numărul de coșuri și să arate un mesaj de confirmare.
Linia de jos
Deci, puteți accesa DOM -ul deschizătorului ferestrei de la fereastra copilului? Depinde de aceeași politică de origine. Dacă originile sunt aceleași, puteți utilizafereastră.OPENERObiect pentru a accesa DOM. Dacă nu, va trebui să utilizați API -ul PostMessage pentru a comunica între ferestre.
În calitate de furnizor de deschizători de ferestre, înțelegerea acestor concepte vă poate ajuta să creați experiențe mai bune de utilizator pe site -ul dvs. web. Indiferent dacă oferă informații despre produs mai detaliate sau eficientizarea procesului de cumpărături, posibilitatea de a interacționa între diferite ferestre poate face o diferență mare.
Dacă sunteți pe piață pentru deschizători de ferestre, motoare sau comutatoare de înaltă calitate și doriți să aflați mai multe despre modul în care produsele noastre se pot încadra în proiectele dvs., ne -ar plăcea să discutăm. Ajungeți la noi pentru a începe o discuție de achiziții și să lucrăm împreună pentru a găsi cele mai bune soluții pentru nevoile dvs.
Referințe
- MDN Web Docs - Același - Politica de origine
- MDN Web Docs - Window.PostMessage ()
- W3Schools - Obiectul ferestrei JavaScript