Aby wstawić element <iframe> do HTML, należy użyć specjalnego znacznika, który umożliwia wyświetlenie innej strony internetowej, dokumentu, filmu lub dowolnej zawartości zewnętrznej wewnątrz własnej witryny. <iframe> tworzy tak zwaną ramkę lokalną (inline frame), działającą jak małe, niezależne „okno przeglądarki” wewnątrz strony.
Podstawowa składnia
<iframe src="adres_docelowej_strony"></iframe> Najważniejszym atrybutem jest src, czyli adres (URL) osadzanego dokumentu.
Przykład –
Osadzenie strony o nazwie podstrona.html (plik w tym samym katalogu):
<iframe src="podstrona.html"></iframe> Najważniejsze atrybuty <iframe>
- src – ścieżka do strony lub materiału, który ma się wyświetlić;
- width – szerokość ramki w pikselach lub procentach (np.
width="600"lubwidth="100%"); - height – wysokość ramki (np.
height="400"); - title – tekst alternatywny dla poprawnej dostępności;
- name – nazwa ramki, przydatna do otwierania linków wewnątrz
<iframe>; - allowfullscreen – umożliwia przełączenie w tryb pełnoekranowy (np. przy filmach);
- loading – wpływa na sposób ładowania (
lazydla leniwego ładowania,eagerdomyślnie); - frameborder (HTML4, przestarzały) – określa widoczność obramowania.
Przykład z dodatkowymi atrybutami –
<iframe src="https://www.example.com" width="800" height="400" title="Przykładowa strona" allowfullscreen loading="lazy"> </iframe> Przykłady zastosowań <iframe>
Osadzenie filmu z YouTube
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allowfullscreen> </iframe> Zastosowanie – wyświetlanie filmów bezpośrednio na stronie.
Osadzenie mapy 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"> </iframe> Zastosowanie – pokazywanie lokalizacji firmy czy wydarzenia.
Wyświetlanie fragmentu innej strony (np. regulamin, polityka prywatności)
<iframe src="regulamin.html" width="100%" height="300" title="Regulamin serwisu"> </iframe> Zastosowanie – wygodne włączenie dłuższych tekstów bezpośrednio na stronie.
Integracja formularza zewnętrznego
<iframe src="https://forms.gle/xyzexample" width="700" height="900" frameborder="0"> </iframe> Zastosowanie – ankiety, testy, formularze kontaktowe generowane przez zewnętrzne narzędzia.
Tworzenie własnego podglądu (np. mini przeglądarka lub demo)
<iframe src="demo/index.html" width="1024" height="600"> </iframe> Zastosowanie – prezentacja demo aplikacji, prezentacja projektu, testowanie kodu.
Najlepsze praktyki i uwagi
- Bezpieczeństwo – niektóre strony mogą blokować wyświetlanie w
<iframe>z powodu nagłówków polityki bezpieczeństwa (CORS/X-Frame-Options); - Responsywność – aby
<iframe>był responsywny, najlepiej użyć CSS, np.width:100%; height:auto;lub opakować ramkę w kontener o określonych proporcjach; - Dostępność – zawsze podawaj atrybut
title, by zapewnić lepsze wsparcie dla czytników ekranu; - Ograniczenia – zawartości z niektórych serwisów nie da się osadzić z powodu ograniczeń technicznych po stronie tych usług;
- Lazy loading – dodając
loading="lazy", opóźniasz ładowanie iframe, co zwiększa szybkość startową strony.
Prosty, kompletny przykład
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poradnik: Wstawianie iframe</title>
<style>
.iframe-box { width: 100%; max-width: 800px; aspect-ratio: 16/9; }
iframe { width: 100%; height: 100%; border: 1px solid #ccc; }
</style>
</head>
<body>
<h1>Jak wstawić <iframe> do HTML?</h1>
<div class="iframe-box">
<iframe src="https://www.example.com" title="Przykładowa strona"></iframe>
</div>
</body>
</html>
Stosując <iframe>, możesz wygodnie wzbogacać strony www o różnorodne zewnętrzne treści – od wideo i formularzy po mapy czy inne strony internetowe. Pamiętaj o sprawdzeniu, czy dana treść wspiera osadzanie oraz zwróć uwagę na aspekty bezpieczeństwa i dostępności.
