Czym jest iframe?

Iframe (ramka wewnętrzna) to standardowy element HTML, <iframe>, który ładuje osobny dokument internetowy wewnątrz prostokątnego obszaru bieżącej strony. Odtwarzacz wideo YouTube jest dostarczany w ten sposób: otaczająca strona pozostaje twoja, podczas gdy obszar w ramce uruchamia własny kod odtwarzacza YouTube.

Dlaczego YouTube używa iframe

Ponieważ odtwarzacz działa we własnej ramce, jest odizolowany od reszty strony ze wzgledow bezpieczeństwa, otrzymuje automatyczne aktualizacje od YouTube bez żadnych zmian ze strony osadzającej witryny, i można go przełączyć między standardową domena youtube.com a bardziej prywatną youtube-nocookie.com, po prostu zmieniając adres źródłowy.

Typowe atrybuty iframe przy osadzaniu wideo

Najbardziej istotne to src (adres osadzania i jego parametry), title (dla czytników ekranu), allow (jakie uprawnienia otrzymuje ramka, jak autoplay czy fullscreen), allowfullscreen oraz loading=”lazy” dla wydajności.

Jak iframe wpisuje się w resztę strony internetowej

Strona internetowa jest zazwyczaj jednym ciągłym dokumentem HTML, ale iframe tworzy granicę: wszystko w jego wnętrzu jest osobnym dokumentem, z własnymi skryptami, stylami i kontekstem przeglądania, wyświetlanym wewnątrz pola pozycjonowanego zwykłym CSS. Ta izolacja to zarówno funkcja bezpieczeństwa, jak i techniczną. Strona osadzająca iframe YouTube nie może bezpośrednio odczytać ani zmodyfikować tego, co dzieje się wewnątrz odtwarzacza YouTube, a odtwarzacz nie może bezpośrednio odczytać ani zmodyfikować reszty twojej strony, poza tym, na co każda strona wyraźnie pozwala poprzez API przeglądarki.

Przykład praktyczny

Różnica między iframe a zwykłym linkiem do strony jest natychmiast widoczną, gdy porównamy je obok siebie. Link, <a href="https://youtube.com/watch?v=ID">Ogladaj na YouTube</a>, całkowicie przenosi odwiedzającego z twojej strony. Iframe, <iframe src="https://www.youtube-nocookie.com/embed/ID"></iframe>, utrzymuje odwiedzającego na twojej stronie, jednocześnie pokazując odtwarzacz YouTube w określonym obszarze. Atrybut src pełni bardzo różne rolę w każdym przypadku: cel nawigacji kontra źródło osadzonego dokumentu.

Iframe kontra inne techniki osadzania

Iframe nie jest jedynym sposobem na wprowadzenie zewnętrznej treści, ale to standardowe podejście dla w pełni interaktywnej aplikacji zewnętrznej, takiej jak odtwarzacz wideo. Alternatywy, takie jak osadzenie statycznego obrazu czy karty podglądu linku, pokazują znacznie mniej: nie mogą oferować sterowania odtwarzaniem, nie mogą strumieniować danych wideo i nie mogą reagować na interakcję użytkownika tak, jak robi to odtwarzacz oparty na iframe. Zobacz kod osadzania, aby dowiedzieć się, jak iframe jest pakowany w kod HTML, który faktycznie wklejasz na stronę.

Bezpieczeństwo i uprawnienia iframe

Współczesne przeglądarki traktują każdy iframe jako oddzielny kontekst bezpieczeństwa, co oznacza, ze skrypty wewnątrz osadzonego dokumentu nie mogą bez wyraźnej zgody odczytywać ciasteczek ani pamięci lokalnej strony nadrzędnej, i odwrotnie. Atrybut sandbox pozwala dodatkowo ograniczyć, co iframe śmie robić, na przykład blokując wykonywanie skryptów lub przesyłanie formularzy, choć w przypadku standardowego odtwarzacza YouTube rzadko jest to potrzebne, ponieważ sam odtwarzacz juz działa w kontrolowanym środowisku Google.

Wydajność wielu iframe na jednej stronie

Każdy iframe na stronie tworzy oddzielny kontekst przeglądania z własnym zestawem zasobów, co oznacza, ze strona z wieloma osadzonymi filmami może zużywać zauważalnie więcej pamięci i mocy obliczeniowej niż strona bez nich. Dlatego lazy loading i ograniczenie liczby jednocześnie załadowanych odtwarzaczy są szczególnie ważne na stronach z wieloma osadzeniami, takich jak przeglądy produktów czy galerię wideo.

Najczęściej zadawane pytania