Czym jest iframe?

<iframe> (inline frame) to element HTML, który osadza inną stronę internetową lub dokument wewnątrz bieżącej strony. Tworzy oddzielny kontekst przeglądania w prostokątnym obszarze strony, umożliwiając wyświetlanie zawartości z innego adresu URL — takiego jak mapa, wideo lub widżet strony trzeciej — bez konieczności opuszczania strony przez użytkownika.

Iframy są powszechnie używane do osadzania filmów YouTube, Map Google, formularzy płatności, widżetów mediów społecznościowych i banerów reklamowych. Ponieważ osadzona zawartość działa we własnym kontekście, atrybuty takie jak sandbox i allow umożliwiają programistom ścisłą kontrolę nad tym, co osadzona strona może robić.

Opis narzędzia

To narzędzie generuje gotowy do wklejenia kod HTML <iframe> z prostego formularza. Skonfiguruj adres URL źródła, wymiary, zachowanie przewijania, strategię ładowania, uprawnienia i ograniczenia sandbox, a narzędzie natychmiast wyświetli odpowiadający tag. Nie jest potrzebne ręczne pisanie atrybutów ani zapamiętywanie składni flag sandbox.

Przykłady

Minimalny iframe:

<iframe
  src="https://example.com"
  width="600"
  height="400"
  allowfullscreen
  style="border: none;"
></iframe>

Iframe ładowany leniwie z sandbox:

<iframe
  src="https://example.com"
  width="800"
  height="500"
  loading="lazy"
  allowfullscreen
  style="border: none;"
  sandbox="allow-scripts allow-same-origin"
></iframe>

Iframe z uprawnieniami do kamery i mikrofonu:

<iframe
  src="https://meet.example.com"
  width="960"
  height="540"
  allowfullscreen
  style="border: none;"
  allow="camera; microphone; display-capture"
></iframe>

Funkcje

  • Generuje prawidłowy kod <iframe> z formularza wizualnego — nie jest wymagana znajomość HTML
  • Pełna kontrola nad uprawnieniami (allow) i ograniczeniami sandbox
  • Podgląd na żywo aktualizuje się wraz ze zmianą dowolnej opcji

Objaśnienie opcji

Opcja Opis
URL Atrybut src — adres strony do osadzenia
Szerokość / Wysokość Wymiary iframe w pikselach
Tytuł Dostępna etykieta (atrybut title) dla czytników ekranu
Nazwa Atrybut name, używany jako cel linku
Przewijanie Kontroluje pasek przewijania: auto, zawsze włączony lub zawsze wyłączony
Ładowanie eager ładuje natychmiast; lazy odkłada do czasu zbliżenia się do widoku
Zezwól na pełny ekran Dodaje allowfullscreen, aby osadzona zawartość mogła przejść na pełny ekran
Obramowanie Gdy nie zaznaczone, dodaje style="border: none;" aby usunąć domyślne obramowanie
Zezwól na funkcje Przyznaje osadzonej stronie określone uprawnienia API przeglądarki
Flagi sandbox Ogranicza to, co może robić osadzona strona; każda flaga ponownie włącza określoną możliwość

Wskazówki

  • Zawsze podaj atrybut title ze względu na dostępność — czytniki ekranu ogłaszają go podczas skupienia się na iframe.
  • Użyj loading="lazy" dla iframe'ów poniżej linii zwijania, aby poprawić wydajność ładowania strony.
  • Dodanie atrybutu sandbox bez flag całkowicie blokuje zawartość; dodaj tylko flagi, które faktycznie potrzebujesz.