Hej tamo! Ja sam dobavljač otvarača prozora i često mi postavljaju zanimljiva pitanja o tehničkoj strani stvari. Jedno pitanje koje se prilično pojavljuje je: "Mogu li pristupiti DOM -u otvarača prozora iz dječjeg prozora?" Zaronimo u ovu temu i vidimo što je što.
Prvo, brzo objasnimo što je DOM. Model objekta dokumenta ili Dom ukratko je poput stabla - strukturiranog prikaza svih elemenata na web stranici. Omogućuje JavaScript da komunicira s tim elementima, mijenjajući njihove stilove, sadržaj i tako dalje. Sada, kada govorimo o otvaraču prozora i dječjem prozoru, obično se bavimo scenarijima u kojima jedna web stranica otvara drugu.
Zamislite da ste na glavnoj stranici (otvarač prozora) i kliknete gumb koji otvara novu karticu ili prozor (dječji prozor). Pitanje je, može li se dječji prozor vratiti i nered s Domom glavne stranice? Pa, odgovor nije jednostavan da ili ne.
Isto - politika podrijetla
Veliko pravilo ovdje je ista politika podrijetla. Ovo je sigurnosna mjera u web preglednicima koja ograničava stranicu pristupa DOM -u druge stranice ako imaju različito podrijetlo. Podrijetlo je u osnovi kombinacija protokola (poput http ili https), domene (npr. Www.example.com) i broja priključka.
Ako otvarač prozora i dječji prozor imaju isto podrijetlo, stvari postaju puno fleksibilnije. Na primjer, ako otvorite novi prozor s vlastite web stranice, dječji prozor može pristupiti DOM -u prozora otvarača. Možete koristitiprozor.openerObjekt u JavaScript -u da to učini. Evo jednostavnog primjera:
// u dječjem prozoru if (window.opener) {var otvaerDocument = window.opener.document; // Sada možete pristupiti elementima u dokumentu otvarača var nuleElement = OpenErDocument.getElementById ('neki - id'); if (neštoLement) {nekalement.style.color = 'crvena'; }}Ali ako su porijeklo različito, preglednici će blokirati pristup. Ovo je spriječiti zlonamjerne web stranice da kradu osjetljive podatke s drugih web lokacija. Na primjer, ako otvorite dječji prozor s web mjesta E -Commerce na treći gateway za plaćanje stranaka, prozor Gateway -a za plaćanje ne može pristupiti DOM -u web lokacije E -Commerce.
Zašto biste željeli pristupiti DOM -u otvarača prozora?
Kao dobavljač otvarača prozora, mogu se sjetiti nekoliko razloga zbog kojih bi to netko mogao učiniti. Recimo da na glavnoj stranici imate katalog proizvoda, a kada korisnik klikne na proizvod, otvara dječji prozor s detaljnijim informacijama. Možda želite da dječji prozor ažurira DOM glavne stranice kako bi pokazao da je proizvod pregledani ili da ga doda na popis "nedavno pregledanih".
Drugi slučaj upotrebe mogao bi biti u alatu za konfiguraciju. Otvorite dječji prozor za konfiguriranje proizvoda otvarača prozora, poput aMotorizirani slijepi prekidač. Nakon što korisnik dovrši konfiguraciju u dječjem prozoru, možete upotrijebiti pristup domolu otvarača prozora za ažuriranje glavne stranice s odabranim opcijama konfiguracije.
Rukovanje križnim situacijama
Ako trebate pristupiti DOM -u otvarača prozora u situaciji Cross - Origin, postoji nekoliko zaobilaznih rješenja. Jedna je opcija korištenje API -ja nakon message. To omogućava prozorima s različitim podrijetlom da komuniciraju na siguran način.
Osnovna ideja je da jedan prozor može poslati poruku u drugi prozor koristećipostmesagemetoda, i prozor za prijem može slušati ove poruke koristećiwindow.addeventListener ('poruka', povratni poziv)događaj.
Evo kako to funkcionira:
// u dječjem prozoru var targetOrigin = 'https://www.example.com'; window.opener.postMessage ('Neki podaci iz dječjeg prozora', TargetOrigin); // U prozoru prozora.addeventListener ('poruka', funkcija (događaj) {if (event.origin === 'https: // child - prozor - domain.com') {console.log ('primljena poruka:', event.data);}});Na taj način možete razmjenjivati podatke između dva Windows bez izravnog pristupa DOM -u, koji je blokiran istim politikom podrijetla.
Stvarni - svjetski primjeri u poslu s otvaranjem prozora
Razgovarajmo o nekim stvarnim - svjetskim scenarijima u poslovanju otvarača prozora. Pretpostavimo da imate glavnu stranicu koja navodi različite vrste otvarača prozora, poput45 mm elektronički motoriPrecizni mehanički granični motor. Kad korisnik klikne na motor kako bi saznao više, otvara se dječji prozor.
Možete upotrijebiti DOM pristup (ako je moguće) za ažuriranje broja prikaza glavne stranice za taj proizvod. Ili, ako dječji prozor ima gumb "Dodaj u košaricu", možete upotrijebiti pristup za ažuriranje ikone kolica na glavnoj stranici.
Ako je Cross - Podrijetlo problem, još uvijek možete koristiti API postmessage. Na primjer, dječji prozor može poslati poruku na glavnu stranicu rekavši da je proizvod dodan u košaricu. Glavna stranica tada može ažurirati broj kolica i pokazati poruku potvrde.
Dno crta
Dakle, možete li pristupiti DOM -u otvarača prozora iz dječjeg prozora? Ovisi o istoj politici podrijetla. Ako je podrijetlo isto, možete koristitiprozor.openerObjekt za pristup DOM -u. Ako ne, morat ćete koristiti API PostMessage za komunikaciju između prozora.
Kao dobavljač otvarača prozora, razumijevanje ovih koncepata može vam pomoći u stvaranju boljih korisničkih iskustava na vašoj web stranici. Bilo da se radi o detaljnijim informacijama o proizvodu ili pojednostavljenju postupka kupovine, mogućnost interakcije između različitih prozora može napraviti veliku razliku.
Ako ste na tržištu za visoke otvarače prozora, motore ili prekidače, a želite znati više o tome kako se naši proizvodi mogu uklopiti u vaše projekte, voljeli bismo razgovarati. Potaknite nam da započnemo raspravu o nabavi i radimo zajedno kako bismo pronašli najbolja rješenja za vaše potrebe.
Reference
- MDN Web Docs - Isto - Politika podrijetla
- MDN Web Docs - Window.PostMessage ()
- W3Schools - Objekt prozora JavaScript