Tag <iframe> to praktyczny element HTML, który pozwala osadzić zewnętrzny dokument – stronę, mapę, wideo czy formularz – bezpośrednio w obrębie twojej witryny.
Tworzy on oddzielny kontekst przeglądania (własny DOM, skrypty i style), dzięki czemu osadzona treść nie koliduje z resztą strony.
W tym przewodniku poznasz definicję, najważniejsze atrybuty, praktyczne zastosowania, a także zasady responsywności i bezpiecznej komunikacji z JavaScript.
Czym dokładnie jest tag <iframe> i jak działa?
Podstawowa składnia wygląda tak:
<iframe src="URL_źródła"></iframe>
Atrybut src wskazuje adres dokumentu do osadzenia (np. pełna strona, plik PDF lub własny HTML przez srcdoc). Przeglądarka wyświetli zawartość wewnątrz ramki bez opuszczania bieżącej strony.
Przykład osadzenia strony w ramce o rozmiarze 600 × 400 px:
<iframe src="https://www.example.com" width="600" height="400"></iframe>
Kluczowe atrybuty tagu <iframe>
Najczęściej używane atrybuty i ich zastosowanie przedstawia poniższe zestawienie:
| Atrybut | Do czego służy | Przykład | Uwagi |
|---|---|---|---|
src |
adres osadzanej zawartości | <iframe src="https://example.com"></iframe> |
podstawowy atrybut źródła |
srcdoc |
osadzenie bezpośredniego HTML | <iframe srcdoc="<h1>Witaj!</h1>"></iframe> |
ma pierwszeństwo przed src |
width, height |
ustawienie szerokości i wysokości | <iframe width="100%" height="450"> |
wartości w px lub % |
loading |
leniwe ładowanie treści | <iframe loading="lazy"> |
poprawia wydajność |
allowfullscreen / allow="fullscreen" |
zezwolenie na tryb pełnoekranowy | <iframe allowfullscreen> |
często używane z wideo |
allow |
polityki uprawnień (autoplay, clipboard, itp.) | <iframe allow="autoplay; clipboard-write; fullscreen"> |
precyzyjna kontrola funkcji |
sandbox |
ograniczenia bezpieczeństwa | <iframe sandbox="allow-scripts allow-forms"> |
domyślnie wszystko zablokowane |
referrerpolicy |
kontrola nagłówka Referer | <iframe referrerpolicy="no-referrer"> |
lepsza prywatność |
title |
opis dla czytników ekranu | <iframe title="Mapa dojazdu"> |
wymagane dla dostępności |
frameborder |
obramowanie ramki (przestarzałe) | <iframe frameborder="0"> |
stosuj CSS zamiast tego |
seamless |
eksperymentalne łączenie stylu | — | nie jest wspierane produkcyjnie |
Przykład z kilkoma atrybutami naraz (osadzona mapa Google):
<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" style="border:0;" allowfullscreen loading="lazy" referrerpolicy="no-referrer-when-downgrade" title="Mapa dojazdu"></iframe>
Praktyczne przykłady zastosowań <iframe>
1. Osadzanie filmów z YouTube
Zamiast hostować wideo samodzielnie, osadź je z YouTube i korzystaj z gotowych kontrolek oraz trybu pełnoekranowego.
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID?start=30&autoplay=1" title="Odtwarzacz YouTube" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen" allowfullscreen></iframe>
Najważniejsze zalety takiego osadzenia to:
- mniejsze obciążenie twojego serwera,
- wbudowana obsługa responsywności i trybu pełnoekranowego,
- dodatkowe parametry sterujące (autoplay, start, napisy).
2. Mapy interaktywne (Google Maps)
Wyświetl lokalizację firmy i pozwól użytkownikom sprawdzić trasę bez opuszczania strony.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d244259.6442740078!2d..." width="600" height="450" style="border:0;" loading="lazy" allowfullscreen title="Mapa firmy"></iframe>
3. Formularze i widgety zewnętrzne
Dodaj kalendarz, formularz kontaktowy lub czat bez instalowania ciężkich wtyczek.
<iframe src="https://kalendarz.example.com" width="100%" height="500" style="border:0;" title="Kalendarz rezerwacji"></iframe>
4. Dokumenty PDF
Pozwól przeglądać dokumenty PDF bez pobierania na dysk.
<iframe src="dokument.pdf" width="100%" height="600" type="application/pdf" title="Podgląd PDF"></iframe>
5. Własny HTML via srcdoc
Osadź krótki, samodzielny HTML bez tworzenia osobnego pliku.
<iframe srcdoc="<h1>Witaj w ramce!</h1><p>To niestandardowy HTML.</p>" title="Przykładowa ramka"></iframe>
Responsywny <iframe> z CSS
Domyślnie <iframe> nie skaluje się proporcjonalnie, dlatego warto umieścić go w kontenerze o wymuszonych proporcjach (np. 16:9).
Przykładowy HTML kontenera z ramką:
<div class="iframe-container">
<iframe src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video" frameborder="0" allowfullscreen></iframe>
</div>
Minimalny CSS utrzymujący proporcje 16:9:
.iframe-container { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; }
.iframe-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
Takie podejście gwarantuje pełną szerokość i prawidłowe skalowanie wysokości na każdym urządzeniu.
Interakcja z JavaScript – komunikacja między ramkami
Do bezpiecznej komunikacji między stroną nadrzędną a osadzoną ramką używaj metody postMessage.
Najpierw dodaj na stronie nadrzędnej <iframe> z identyfikatorem:
<iframe id="myIframe" src="child.html" title="Osadzona aplikacja"></iframe>
Kod na stronie głównej, który wysyła komunikat po załadowaniu ramki:
var iframe = document.getElementById('myIframe');
iframe.addEventListener('load', function () {
iframe.contentWindow.postMessage('changeBackground', 'https://twoja-domena.pl');
});
Kod wewnątrz ramki, który nasłuchuje wiadomości i reaguje:
window.addEventListener('message', function (event) {
if (event.origin !== 'https://twoja-domena.pl') return;
if (event.data === 'changeBackground') {
document.body.style.backgroundColor = 'yellow';
}
});
Zawsze waliduj event.origin oraz strukturę danych, aby uniknąć podatności bezpieczeństwa.
Zastosowanie w WordPress i innych CMS
W WordPress wstawisz <iframe> bezpośrednio w edytorze blokowym (np. blok „Niestandardowy HTML”) lub przez shortcode, zachowując zgodność z motywami Gutenberg.
Wady, SEO i bezpieczeństwo
Przed wdrożeniem większej liczby ramek zwróć uwagę na te obszary:
- SEO – treść wewnątrz ramki zwykle nie jest indeksowana jako część strony nadrzędnej, więc nie wnosi wartości do jej treści organicznych;
- wydajność – wiele osadzonych zasobów spowalnia ładowanie, dlatego stosuj
loading="lazy"i ładuj tylko niezbędne widgety; - bezpieczeństwo – ogranicz uprawnienia przez
sandboxiallow, a przy komunikacji za pomocąpostMessagezawsze weryfikuj pochodzenie; - dostępność – dodawaj opisowy
titlei zapewniaj odpowiedni kontrast/rozmiar ramki dla użytkowników technologii asystujących.