Aby wstawić iframe do HTML, należy użyć specjalnego znacznika, który służy do osadzania zewnętrznych stron internetowych, plików multimedialnych lub innych dokumentów bezpośrednio wewnątrz własnej witryny. Iframe to tzw. ramka lokalna (inline frame), czyli niezależne okno przeglądarki wyświetlane w żądanym miejscu na stronie.
Podstawowa składnia znacznika iframe –
<iframe src="adres_docelowy"></iframe>- src – adres URL strony lub pliku, który ma być wyświetlany w ramce.
Przykład –
<iframe src="https://www.przykladowastrona.pl"></iframe>Najważniejsze atrybuty iframe
- width i height – szerokość i wysokość ramki (np. w pikselach lub procentach);
- title – krótki opis zawartości ramki, poprawia dostępność strony;
- frameborder – czy wyświetlać ramkę (wartości: „0” – brak obramowania, „1” – domyślne obramowanie; zwykle pomijany w nowoczesnych stronach);
- allowfullscreen – umożliwia przełączenie osadzonego filmu lub zawartości w tryb pełnoekranowy;
- loading – kontroluje sposób ładowania („lazy” – ładuje tylko gdy widoczny, „eager” – natychmiast ładuje);
- sandbox – ogranicza funkcjonalność osadzonej strony (np. blokowanie skryptów; przydatne ze względów bezpieczeństwa).
Przykład z wieloma atrybutami –
<iframe src="https://www.youtube.com/embed/ID_FILMU" width="560" height="315" title="Odtwarzacz wideo" frameborder="0" allowfullscreen loading="lazy"></iframe>Przykłady zastosowań iframe
1. Osadzenie zewnętrznej strony internetowej –
<iframe src="https://www.wikipedia.org" width="800" height="600" title="Encyklopedia Wikipedia"></iframe>2. Wstawienie mapy Google –
<iframe src="https://maps.google.com/maps?q=Kraków&t=&z=13&ie=UTF8&iwloc=&output=embed" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" title="Mapa Krakowa"></iframe>3. Osadzanie filmu z YouTube –
<iframe width="560" height="315" src="https://www.youtube.com/embed/ID_FILMU" title="YouTube video player" frameborder="0" allowfullscreen></iframe>4. Wyświetlenie pliku PDF –
<iframe src="https://przyklad.pl/dokument.pdf" width="100%" height="600" title="Podgląd pliku PDF"></iframe>5. Integracja z widgetem (np. Facebook, Instagram) –
Większość serwisów społecznościowych generuje własny kod iframe do umieszczania np. postów, przycisków „Lubię to” lub galerii.
Dobre praktyki i uwagi dotyczące bezpieczeństwa
- Chroń witrynę przed tzw. atakami typu clickjacking – warto użyć atrybutu sandbox lub odpowiednich nagłówków HTTP po stronie serwera;
- Niektóre strony mogą blokować wyświetlanie się w iframe ze względów bezpieczeństwa;
- Stosuj atrybut title dla lepszej dostępności;
- Dobrze dostosuj szerokość i wysokość ramki do mobilnych urządzeń (warto korzystać z procentowych wartości lub stylów CSS).
Podstawowy szablon z responsywną ramką –
<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
<iframe src="https://www.youtube.com/embed/ID_FILMU" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" allowfullscreen title="Wideo responsywne"></iframe>
</div>Takie osadzenie sprawia, że ramka będzie skalować się automatycznie, dopasowując do ekranu użytkownika.
Iframe to uniwersalne narzędzie umożliwiające w prosty sposób poszerzenie funkcjonalności strony WWW o treści z innych źródeł, filmy, mapy czy dokumenty. Wystarczy odpowiednio dostosować atrybuty znacznika, by spełniał potrzeby każdej realizacji.
