<iframe>

Ramka, która osadza na stronie inny dokument HTML, na przykład film z YouTube albo mapę.

Wyświetlanie: inline (element zastępowany)
Znacznik zamykający: Wymagany
Dozwolona zawartość: Brak (treść między znacznikami jest ignorowana)

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Atrybuty
Atrybuty w praktyce
Domyślny CSS
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

HTML

<iframe
  title="Wizytówka Ani"
  width="320"
  height="140"
  srcdoc="<h1 style='font: 700 22px system-ui; margin: 0 0 8px'>Ania Kowalska</h1><p style='font: 15px system-ui; margin: 0'>Uczę się HTML i CSS. To moja pierwsza strona!</p>"
></iframe>

Podgląd

Definicja i zastosowanie

Element <iframe> (od inline frame) wyświetla wewnątrz strony zupełnie osobny dokument, z własnym HTML, CSS i JavaScriptem. W ten sposób osadza się odtwarzacze z YouTube i Vimeo, mapy, formularze płatności czy widżety czatu. Adres dokumentu podajesz w src, a krótki kod HTML możesz też wpisać wprost w atrybut srcdoc.

Treść ramki jest odizolowana od Twojej strony: style się nie mieszają, a skrypty z innej domeny nie mają dostępu do Twojego DOM. Wiele serwisów w ogóle nie pozwala osadzać swoich stron w ramkach i blokuje to nagłówkami odpowiedzi, dlatego nie każdą stronę da się wyświetlić w <iframe>.

Każda ramka powinna mieć atrybut title opisujący jej zawartość, na przykład „Mapa dojazdu do biura”. Czytnik ekranu odczyta go, zanim użytkownik wejdzie do ramki. Ramki poniżej pierwszego ekranu warto ładować leniwie przez loading="lazy".

Składnia

<iframe src="adres" title="Opis zawartości" width="…" height="…"></iframe>

Atrybuty

src
URL
Adres dokumentu wyświetlanego w ramce. Serwisy takie jak YouTube czy Mapy Google udostępniają gotowy kod <iframe> z właściwym adresem w opcji „Udostępnij”, a potem „Umieść”.
srcdoc
kod HTML
Kod HTML, który ramka wyświetli zamiast pobierać stronę z adresu. Ma pierwszeństwo przed src. Cudzysłowy wewnątrz kodu zapisuj jako pojedyncze cudzysłowy albo encje ", żeby nie zamknąć wartości atrybutu.
width / height
liczba pikseli
Wymiary ramki, domyślnie 300 na 150 pikseli. Treść, która się nie mieści, ramka przewija.
sandbox
pusty albo lista uprawnień, np. `allow-scripts allow-forms`
Uruchamia ramkę w piaskownicy z ograniczeniami. Pusty atrybut blokuje skrypty, formularze i wyskakujące okna, a treść traktuje jak pochodzącą z obcej domeny. Kolejne uprawnienia przywracasz słowami kluczowymi, na przykład allow-scripts albo allow-forms. W przykładzie ten sam skrypt działa tylko w drugiej ramce.
allow
lista uprawnień, np. `fullscreen; autoplay; clipboard-write`
Określa, z jakich funkcji przeglądarki może korzystać ramka: pełny ekran, autoodtwarzanie, kamera, mikrofon, schowek. Gotowe kody osadzania z YouTube zawierają już odpowiednią wartość. Starszy atrybut allowfullscreen nadal działa, ale nowszy zapis to allow="fullscreen".
loading
eager | lazy
lazy wczytuje ramkę dopiero wtedy, gdy zbliży się ona do widocznej części strony. To duża oszczędność przy osadzonych filmach i mapach, które często ważą więcej niż cała reszta strony.
name
tekst
Nazwa ramki. Link z atrybutem target="nazwa" otworzy swój adres właśnie w tej ramce.
referrerpolicy
no-referrer | origin | strict-origin-when-cross-origin | …
Decyduje, ile informacji o Twojej stronie trafi do osadzanego serwisu w nagłówku Referer.

Atrybut	Wartości	Opis
src	URL	Adres dokumentu wyświetlanego w ramce. Serwisy takie jak YouTube czy Mapy Google udostępniają gotowy kod `<iframe>` z właściwym adresem w opcji „Udostępnij”, a potem „Umieść”.
srcdoc	kod HTML	Kod HTML, który ramka wyświetli zamiast pobierać stronę z adresu. Ma pierwszeństwo przed `src`. Cudzysłowy wewnątrz kodu zapisuj jako pojedyncze cudzysłowy albo encje `"`, żeby nie zamknąć wartości atrybutu.
width / height	liczba pikseli	Wymiary ramki, domyślnie 300 na 150 pikseli. Treść, która się nie mieści, ramka przewija.
sandbox	pusty albo lista uprawnień, np. `allow-scripts allow-forms`	Uruchamia ramkę w piaskownicy z ograniczeniami. Pusty atrybut blokuje skrypty, formularze i wyskakujące okna, a treść traktuje jak pochodzącą z obcej domeny. Kolejne uprawnienia przywracasz słowami kluczowymi, na przykład `allow-scripts` albo `allow-forms`. W przykładzie ten sam skrypt działa tylko w drugiej ramce.
allow	lista uprawnień, np. `fullscreen; autoplay; clipboard-write`	Określa, z jakich funkcji przeglądarki może korzystać ramka: pełny ekran, autoodtwarzanie, kamera, mikrofon, schowek. Gotowe kody osadzania z YouTube zawierają już odpowiednią wartość. Starszy atrybut `allowfullscreen` nadal działa, ale nowszy zapis to `allow="fullscreen"`.
loading	eager \| lazy	`lazy` wczytuje ramkę dopiero wtedy, gdy zbliży się ona do widocznej części strony. To duża oszczędność przy osadzonych filmach i mapach, które często ważą więcej niż cała reszta strony.
name	tekst	Nazwa ramki. Link z atrybutem `target="nazwa"` otworzy swój adres właśnie w tej ramce.
referrerpolicy	no-referrer \| origin \| strict-origin-when-cross-origin \| …	Decyduje, ile informacji o Twojej stronie trafi do osadzanego serwisu w nagłówku `Referer`.

Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.

Atrybuty w praktyce

srcdoc

kod HTML

Kod HTML, który ramka wyświetli zamiast pobierać stronę z adresu. Ma pierwszeństwo przed src. Cudzysłowy wewnątrz kodu zapisuj jako pojedyncze cudzysłowy albo encje ", żeby nie zamknąć wartości atrybutu.

HTML

<iframe
  title="Podgląd przycisku"
  width="260"
  height="80"
  srcdoc="<button style='font: 16px system-ui; padding: 8px 16px'>Zapisz się</button>"
></iframe>

Podgląd

sandbox

pusty albo lista uprawnień, np. `allow-scripts allow-forms`

Uruchamia ramkę w piaskownicy z ograniczeniami. Pusty atrybut blokuje skrypty, formularze i wyskakujące okna, a treść traktuje jak pochodzącą z obcej domeny. Kolejne uprawnienia przywracasz słowami kluczowymi, na przykład allow-scripts albo allow-forms. W przykładzie ten sam skrypt działa tylko w drugiej ramce.

HTML

<iframe
  sandbox
  title="Ramka bez uprawnień"
  width="220"
  height="70"
  srcdoc="<p id='msg' style='font: 15px system-ui'>Skrypty zablokowane</p><script>document.getElementById('msg').textContent = 'Skrypt działa'</script>"
></iframe>
<iframe
  sandbox="allow-scripts"
  title="Ramka z uprawnieniem allow-scripts"
  width="220"
  height="70"
  srcdoc="<p id='msg' style='font: 15px system-ui'>Skrypty zablokowane</p><script>document.getElementById('msg').textContent = 'Skrypt działa'</script>"
></iframe>

Podgląd

Domyślny CSS

Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:

CSS

iframe {
  border: 2px inset;
}

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Ramka z innej strony wykonuje cudzy kod. Osadzaj tylko zaufane serwisy, a przy nieznanych dodaj sandbox z minimalnym zestawem uprawnień.
Nie łącz allow-scripts z allow-same-origin dla treści z Twojej własnej domeny. Skrypt w ramce mógłby wtedy sam zdjąć ograniczenia piaskownicy.
Responsywną ramkę z filmem uzyskasz w CSS: width: 100%; aspect-ratio: 16 / 9; border: 0;.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz HTML w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs