The Code

Tätä ohjetta varten tarvitsemme kaksi HTML-tiedostoa: vanhemman tiedoston, johon laitamme iframen, ja lapsitiedoston, joka sisältää iframen sisällön.

child.html

Lapsitiedostomme sisältää yksinkertaisen dummy-tekstigeneraattorin, jossa ihmiset voivat napsauttaa painiketta lisätäkseen toisen kappaleen lorem ipsum -tekstiä.

Koska tämä opetusohjelma käsittelee iframea, eikä sen sisältämää toiminnallisuutta, voit vapaasti kopioida ja liittää seuraavan tekstin child.html:

Voit kokeilla yllä olevaa koodia tässä CodePen:

parent.html

Voit nyt lisätä iframe-kehyksemme kohtaan parent.html.

Lisää tavallinen HTML5 boilerplate-koodi ja lisää sitten seuraava body-tagien väliin:

<iframe src="child.html" style="width:100%;border:none;"></iframe>

Mutta tässä kohtaamme ongelmamme. Koska asetimme overflow: hidden:n, painikkeet ja puolet ensimmäisestä kappaleesta katoavat.

Ja jos emme olisi asettaneet overflow: hidden:tä, näkisimme kaksi vierityspalkkia, kuten yllä olevassa kuvassa. Ratkaistaksemme tämän meidän on lähetettävä post-viestejä child.html:sta vanhempaan ikkunaan!

child.html

Takaisin child.html:ssa meidän on siis lisättävä uudet tapahtumakuuntelijat script-osioon.

Meidän täytyy ilmoittaa vanhemmalle elementille iframen korkeus:

• aina kun se latautuu,
• aina kun ikkunan kokoa muutetaan ja
• aina kun painiketta painetaan.

Kun kukin näistä tapahtumista tapahtuu, käynnistämme funktion nimeltä sendPostMessage.

Sijoitetaan seuraava koodi juuri ennen sulkeutuvaa <script>-tunnistetta:

Luotaan nyt sendPostMessage()-funktiomme.

Haluamme mitata elementin korkeuden, jolla on id container. Jos (ja vain jos) korkeus muuttuu, haluamme lähettää vanhemmalle ikkunalle viestin nimeltä frameHeight, joka ilmoittaa päivityksestä.

Seuraavan koodin pitäisi mennä sen yläpuolelle, mitä juuri kirjoitimme:

Metodin postMessage toinen argumentti edustaa kohteen alkuperää: vanhemman ikkunan isäntänimeä.

Tämä on hyödyllistä turvallisuuden kannalta, kun varmistetaan, että viesti lähetetään vain tietyille verkkotunnuksille, mutta kehitystarkoituksia varten voimme asettaa target originiksi '*'. Tämä tarkoittaa, että mikä tahansa vanhempi ikkuna saa viestin.

Kokonaisuudessaan child.html:n koodin pitäisi näyttää tältä:

parent.html

Ladataan parent.html selaimeen ja avataan konsoli (paina CTRL+Shift+ J Google Chromessa).

Kun muutamme ikkunan kokoa uudelleen, meidän pitäisi nyt nähdä, että arvot ilmestyvät konsoliin. Viimeinen vaihe on käyttää niitä iframen korkeuden asettamiseen aina, kun jokin näistä arvoista lähetetään.

Meidän on kuunneltava viestitapahtumia, ja aina kun saamme yhden, meidän pitäisi käyttää sitä asettaaksemme iframe-ikkunan korkeusominaisuuden (sekä hieman pehmustusta):

Kokonaisuutena parent.html-tiedostosi pitäisi näyttää tältä:

Jos seurasit vaiheita oikein, iframe-ikkunasi kokoa muutetaan nyt automaattisesti, ikään kuin sen sisältö kuuluisi emoikkunaan!”

Hyväksyttiin.