Kod

Do tego samouczka będziemy potrzebować dwóch plików HTML: pliku rodzica, w którym umieścimy ramkę iframe, oraz pliku dziecka zawierającego zawartość ramki iframe.

child.html

Nasz plik dziecka będzie zawierał prosty generator tekstu, w którym ludzie będą mogli kliknąć przycisk, aby dodać kolejny akapit tekstu lorem ipsum.

Jako że ten tutorial dotyczy iframe, a nie funkcjonalności tego, co się w nim znajduje, nie krępuj się skopiować i wkleić poniższego do child.html:

Możesz wypróbować powyższy kod w tym CodePen:

parent.html

Możemy teraz wstawić naszą ramkę iframe do parent.html.

Dodajemy zwykły kod HTML5 boilerplate, a następnie wstawiamy następujące elementy pomiędzy znaczniki body:

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

Ale tutaj napotykamy nasz problem. Ponieważ ustawiliśmy overflow: hidden, przyciski i połowa pierwszego akapitu znikają.

A gdybyśmy nie ustawili overflow: hidden, zobaczylibyśmy dwa paski przewijania, jak na obrazku powyżej. Aby rozwiązać ten problem, musimy wysłać wiadomości post z child.html do okna nadrzędnego!

child.html

Więc, wracając do child.html, musimy dodać nowych słuchaczy zdarzeń do sekcji skryptu.

Musimy powiadomić element nadrzędny o wysokości ramki iframe:

• przy każdym załadowaniu,
• przy każdej zmianie rozmiaru okna oraz
• przy każdym naciśnięciu przycisku.

Kiedy wystąpi każde z tych zdarzeń, wywołamy funkcję o nazwie sendPostMessage.

Następujący kod umieść tuż przed zamykającym znacznikiem <script>:

Teraz stwórzmy naszą funkcję sendPostMessage().

Chcemy zmierzyć wysokość elementu o identyfikatorze container. Jeśli (i tylko jeśli) wysokość się zmieni, chcemy wysłać wiadomość o nazwie frameHeight do okna nadrzędnego, powiadamiając je o aktualizacji.

Następujący kod powinien znaleźć się powyżej tego, co właśnie napisaliśmy:

Drugi argument metody postMessage reprezentuje pochodzenie docelowe: nazwę hosta okna nadrzędnego.

Jest to użyteczne dla bezpieczeństwa, aby upewnić się, że wiadomość jest wysyłana tylko do określonych domen, ale dla celów rozwojowych możemy ustawić docelowe pochodzenie na '*'. Oznacza to, że każde okno nadrzędne otrzyma wiadomość.

Ogółem, kod child.html powinien wyglądać następująco:

parent.html

Wczytajmy parent.html w przeglądarce i otwórzmy konsolę (naciśnij CTRL+Shift+ J w Google Chrome).

Kiedy zmienimy rozmiar okna, powinniśmy teraz zobaczyć wartości pojawiające się w konsoli. Ostatnim krokiem jest użycie ich do ustawienia wysokości ramki iframe za każdym razem, gdy jedna z tych wartości zostanie wysłana.

Musimy nasłuchiwać zdarzeń wiadomości i za każdym razem, gdy otrzymamy jedną z nich, powinniśmy użyć jej do ustawienia właściwości height ramki iframe (plus trochę paddingu):

W sumie, twój plik parent.html powinien wyglądać tak:

Jeśli wykonałeś kroki poprawnie, twoja ramka iframe będzie teraz zmieniać rozmiar automatycznie, tak jakby jej zawartość była częścią okna nadrzędnego!