Automatyczne dostosowanie wysokości iframe w CSS

Jeśli kiedykolwiek pracowałeś z iframe na swojej stronie internetowej, na pewno zetknąłeś się z problemem dotyczącym jego wysokości. Czy to treść, która nie mieści się w ramce, czy puste przestrzenie psujące wygląd – to zmora wielu developerów i projektantów. W tym artykule pokażę Ci, jak automatycznie dostosować wysokość iframe w CSS (i trochę w JavaScript, bo CSS sam nie da sobie w pełni rady). Bez obaw, wszystko wyjaśnię krok po kroku!

Co To Jest iframe?

Dla tych, którzy są nieco mniej zaznajomieni z tematem: iframe to element HTML, który pozwala na osadzenie jednej strony internetowej w innej. To taki „okienko w okienku”. Na przykład możesz wstawić film z YouTube’a, osadzić Google Maps, albo inne strony.

Kod iframe wygląda mniej więcej tak:

<iframe src="https://przyklad.pl" width="100%" height="500"></iframe>

Tutaj definiujesz źródło (src), szerokość (width) i wysokość (height). Problem zaczyna się wtedy, gdy treść strony w iframe zmienia rozmiar. Bez poprawnego dostosowania, będziesz mieć:

Puste przestrzenie, jeśli wysokość jest zbyt duża.
Uciętą zawartość, jeśli wysokość jest zbyt mała.

Dlaczego CSS Nie Wystarcza?

Zacznijmy od brutalnej prawdy: CSS sam nie może magicznie dostosować wysokości iframe do jego zawartości. Wynika to z polityki bezpieczeństwa przeglądarek (tzw. Same-Origin Policy). Jeśli treść iframe pochodzi z innej domeny, CSS nie ma do niej dostępu.

Jeśli jednak masz kontrolę nad treścią wewnątrz iframe (np. osadzasz swoją własną stronę), problem można obejść za pomocą CSS i JavaScript.

Sposoby Automatycznego Dostosowania Wysokości iframe

1. Prosty CSS dla Treści Responsywnej

Jeśli treść wewnątrz iframe jest responsywna (np. wideo z YouTube), możesz ustawić jej proporcje za pomocą samego CSS. Użyj stylów z aspect-ratio:

.iframe-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* Proporcja szerokości do wysokości */
  overflow: hidden;
}

.iframe-wrapper iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  border: none;
}

A HTML wygląda tak:

<div class="iframe-wrapper">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
</div>

Ta metoda działa świetnie dla treści, które zawsze zachowują stałe proporcje (np. wideo). Niestety, dla stron z dynamiczną treścią, to nie wystarczy.

2. Dostosowanie Wysokości Za Pomocą JavaScript

Kiedy treść iframe jest dynamiczna, najlepiej użyć JavaScriptu, aby obliczyć i ustawić odpowiednią wysokość. Poniżej znajdziesz pełny kod:

HTML:

<iframe id="myIframe" src="https://twoja-strona.pl" style="width: 100%; border: none;"></iframe>

JavaScript:

function adjustIframeHeight() {
  const iframe = document.getElementById('myIframe');

  iframe.onload = function () {
    const contentHeight = iframe.contentWindow.document.body.scrollHeight; // Pobiera wysokość treści
    iframe.style.height = contentHeight + 'px'; // Ustawia wysokość iframe
  };
}

adjustIframeHeight();

Jak To Działa?

Funkcja iframe.onload wykonuje się po załadowaniu iframe.
iframe.contentWindow.document.body.scrollHeight mierzy wysokość treści wewnątrz iframe.
Ta wartość jest przypisywana do stylu wysokości iframe.

Uwaga: Ten kod działa tylko wtedy, gdy iframe i jego zawartość znajdują się na tej samej domenie (ze względów bezpieczeństwa).

3. PostMessage – Rozwiązanie Dla Treści Z Innej Domeny

Jeśli iframe pochodzi z innej domeny, możesz skorzystać z API postMessage, aby komunikować się pomiędzy stroną główną a iframe. Wymaga to jednak dostępu do kodu iframe.

Krok 1: Kod Wewnętrzny iframe

Do treści osadzonej w iframe dodaj następujący skrypt:

window.onload = function () {
  const height = document.body.scrollHeight;
  window.parent.postMessage(height, '*'); // Wysyła wysokość do strony głównej
};

Krok 2: Kod Na Stronie Głównej

Na stronie osadzającej iframe dodaj ten skrypt:

window.addEventListener('message', function (event) {
  if (event.origin === "https://twoja-strona.pl") { // Zabezpieczenie dla konkretnej domeny
    const iframe = document.getElementById('myIframe');
    iframe.style.height = event.data + 'px'; // Ustawia wysokość na podstawie wiadomości
  }
});

Najlepsze Praktyki

Sprawdź Treść iframe
Upewnij się, że zawartość wewnętrzna iframe jest responsywna. Jeśli nie, nawet najlepszy skrypt nie pomoże.
Unikaj Pustych Przestrzeni
Zawsze ustaw szerokość iframe na 100%, aby zajmował całą szerokość kontenera.
Bezpieczeństwo Przede Wszystkim
Kiedy korzystasz z postMessage, zawsze sprawdzaj event.origin, aby uniknąć potencjalnych ataków z nieznanych źródeł.
Testuj Na Różnych Przeglądarkach
Każda przeglądarka interpretuje style i skrypty nieco inaczej. Upewnij się, że Twój kod działa wszędzie.

Automatyczne dostosowanie wysokości iframe to wyzwanie, które wymaga odrobiny cierpliwości i odpowiedniego podejścia. Jeśli masz pełną kontrolę nad treścią iframe, zadanie jest znacznie prostsze. Dla treści z innych domen musisz użyć bardziej zaawansowanych technik, takich jak postMessage.