Kód

Pro tento návod budeme potřebovat dva soubory HTML: rodičovský soubor, do kterého umístíme iframe, a podřízený soubor obsahující obsah iframe.

child.html

Náš podřízený soubor bude obsahovat jednoduchý generátor fiktivního textu, do kterého mohou lidé kliknutím na tlačítko přidat další odstavec textu lorem ipsum.

Jelikož se tento návod zabývá rámcem iframe, a ne funkčností toho, co je v něm, klidně zkopírujte a vložte do child.html následující:

Výše uvedený kód si můžete vyzkoušet v tomto CodePenu:

parent.html

Nyní můžeme vložit náš iframe do parent.html.

Přidejte obvyklý kód kotvy HTML5 a mezi značky těla vložte následující:

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

Ale zde narazíme na náš problém. Protože jsme nastavili overflow: hidden, zmizí tlačítka a polovina prvního odstavce.

A kdybychom nenastavili overflow: hidden, viděli bychom dva posuvníky, jako na obrázku výše. Abychom to vyřešili, musíme posílat zprávy o příspěvcích z child.html do nadřazeného okna!

child.html

Takže zpět do child.html musíme přidat nové posluchače událostí do sekce skriptů.

Potřebujeme upozornit nadřazený prvek na výšku iframe:

• při každém načtení,
• při každé změně velikosti okna a
• při každém stisknutí tlačítka.

Když nastane každá z těchto událostí, spustíme funkci s názvem sendPostMessage.

Těsně před uzavírací značku <script> vložte následující kód:

Nyní vytvoříme naši funkci sendPostMessage().

Chceme změřit výšku elementu s id container. Pokud (a pouze pokud) se výška změní, chceme poslat zprávu s názvem frameHeight nadřazenému oknu a oznámit mu aktualizaci.

Následující kód by měl jít nad to, co jsme právě napsali:

Druhý argument metody postMessage představuje cílový původ: název hostitele nadřazeného okna.

To je užitečné z hlediska bezpečnosti, kdy se ujistíme, že zpráva bude odeslána pouze do určitých domén, ale pro účely vývoje můžeme cílový původ nastavit na '*'. To znamená, že zprávu obdrží libovolné nadřazené okno.

Celkově by měl kód child.html vypadat takto:

parent.html

Načteme parent.html do prohlížeče a otevřeme konzolu (v prohlížeči Google Chrome stiskněte CTRL+Shift+ J).

Kdykoli změníme velikost okna, měli bychom nyní v konzole vidět zobrazené hodnoty. Posledním krokem je jejich použití k nastavení výšky iframe, kdykoli je odeslána jedna z těchto hodnot.

Potřebujeme naslouchat událostem zpráv a kdykoli nějakou obdržíme, měli bychom ji použít k nastavení vlastnosti výšky iframe (plus trochu paddingu):

Celkově by váš soubor parent.html měl vypadat takto:

Pokud jste postupovali správně, váš iframe nyní bude automaticky měnit velikost, jako by jeho obsah byl součástí nadřazeného okna!

.