Ramka iframe lub ramka wbudowana to zasadniczo okno przeglądarki ustawione na stronie internetowej. Ramki te to sekcje strony internetowej, które można „wyciąć”, aby umożliwić dostęp do informacji z zewnętrznego źródła. Ramki iframe są jedynymi typami ramek dozwolonych w HTML5 i są zwykle obecne w witrynach internetowych, które wyświetlają treści zewnętrzne jako źródło treści na swoich stronach internetowych.

Definiowanie iframe

Ramka iframe lub ramka wbudowana to dokument HTML w witrynie internetowej osadzony w innym dokumencie HTML. Służy do dodawania lub dołączania treści, takich jak reklamy, aplikacje interaktywne lub treści z innych zewnętrznych źródeł na stronie internetowej. Aplikacje interaktywne obejmują te, które używają asynchronicznego JavaScript i XML, takie jak aplikacje e-commerce i mapy Google.

Możliwe jest skonfigurowanie iframe na własnym pasku przewijania, niezależnym od paska przewijania strony w tle i zachowuje się on jak obrazek w wierszu. Projektant stron internetowych może zmieniać zawartość elementu iframe bez konieczności ponownego ładowania otaczającej strony przez użytkownika. Jest to możliwe dzięki JavaScript lub atrybutowi target kotwicy HTML.

Co robią ramki iframe?

Ramki iframe zasadniczo umożliwiają umieszczanie treści zewnętrznych na stronie internetowej. Treści zewnętrzne to reklamy z sieci reklamowych lub wszelkie materiały promocyjne, które nie są treściami redakcyjnymi. Używanie ramki iframe do tych informacji jest podobne do otwierania dwóch okien przeglądarki na tej samej stronie, gdzie w oknie głównym wyświetlana jest zawartość strony internetowej, a w oknie dodatkowym wyświetlana jest zawartość zewnętrzna. Zaletą jest to, że rzeczywista zawartość witryny nie ulega rozmyciu, ponieważ wyszukiwarki nie traktują tych reklam jako treści podstawowych.

Jak korzystać z elementu iframe?

Prostą ramkę iframe można zbudować, ustawiając źródłowy adres URL, szerokość i wysokość.
Na przykład:

<iframe src=” URL ” width=”200px” height=”200px”>Tekst alternatywny, jeśli nie można wyrenderować ramki iframe </iframe>.

Możliwe jest również użycie wartości procentowych zamiast wartości pikseli w ustawieniach elementu iframe. Jest to przydatne podczas budowania responsywnej strony internetowej, w której rozmiar zmienia się wraz z różnymi rozmiarami ekranu. Element iframe wykorzystuje globalne elementy HTML5 i HTML 4.01 oprócz innych. Są to:

• URL będący źródłem ramki.
• Nazwa, wysokość i szerokość okna.
• „srcdoc” ma pierwszeństwo przed dowolnym adresem URL. To jest kod HTML źródła ramki.
• Piaskownica to funkcje, które powinny być zdefiniowane jako dozwolone lub niedozwolone w oknie ramki.
• Bezproblemowy to atrybut, który informuje, że element iframe powinien przepływać jako integralna część dokumentu nadrzędnego lub adresu URL.

Podczas gdy większość dzisiejszych witryn internetowych jest tworzona przy użyciu HTML5+, niektóre atrybuty są prawidłowe w HTML 4.01, które są częścią starszych dokumentów, w tym:

• Użycie elementu „A” do połączenia opisu
• Użycie granicznej właściwości CSS
• Korzystanie z właściwości pływaka CSS
• Użycie właściwości tła CSS w celu zapewnienia przezroczystości elementu iframe.
• Wykorzystanie właściwości CSS margin dla szerokości i wysokości marginesu (wysokość marginesu i szerokość marginesu)
• Korzystanie z właściwości przepełnienia CSS

Obsługa przeglądarki dla ramek iframe

Element iframe jest obsługiwany przez wszystkie nowoczesne przeglądarki internetowe. Na liście przeglądarek wymienionych poniżej, te wymienione bez numerów wersji oznaczają, że wszystkie wersje przeglądarki obsługują tę funkcję.

• Chrom
• Android
• Internet Explorer 2+
• iOS, Safari, Safari Mobile
• Netscape 7+
• Opera 3+

Chociaż wszystkie przeglądarki obsługują iframe, obsługa niektórych funkcji HTML5 jest ograniczona, a żadna z przeglądarek nie obsługuje atrybutów srcdoc, sandbox i seamless. Jeśli paski przewijania nie są potrzebne w ramkach iframe, atrybut przewijania może być kontynuowany. Użycie „przepełnienia” nie gwarantuje zatrzymania przewijania.

Łączenie i iframe

Ramki iframe po podaniu identyfikatora lub nazwy umożliwiają bezpośrednie linki w ramce za pomocą atrybutu elementu „A”. Gdy użytkownik kliknie, zamiast otwierać w bieżącym oknie, łącze otwiera się w ramach elementu iframe, do którego się odwołuje. Jeśli w dokumencie otwartym w elemencie iframe nie ma żadnych celów, wszystkie łącza otwierają się w elemencie iframe dokumentu nadrzędnego. Ta cecha pomaga zmieniać zawartość innego elementu iframe za pomocą linków jednego elementu iframe znajdującego się na tej samej stronie internetowej.

Zalety korzystania z ramek iframe:

• Pozwala na obecność mediów stron trzecich na stronie internetowej
• Jest to potężny sposób na wzmocnienie strony internetowej bogatą treścią, którą lubią odwiedzający
• Pozwala na włączenie twoich mediów
• Obecność iframe nie wpływa na jakość treści na stronie ani na ranking w wyszukiwarkach.
• Jeśli masz zawartość, której nie chcesz indeksować w wyszukiwarkach, element iframe jest skutecznym sposobem wykluczenia zawartości z przeszukiwania i indeksowania.
• Można włączyć aplety stron trzecich, takie jak formularze płatności
• Przykłady kodu mogą być osadzone

Wady korzystania z iframe

• Można go łatwo nadużywać, co prowadzi do problemów z bezpieczeństwem
• Przydaje się głównie do osadzenia istniejącego dokumentu HTML na bieżącej stronie.
• Ramki iframe nie przydają się w galeriach zdjęć, forach i jeśli trzeba budować od podstaw i bardzo ingerować w rozbicie projektu strony na kilka niezależnych dokumentów.
• Złośliwy kod iframe może zostać wykorzystany do atakowania znanych witryn internetowych. Kod iframe jest wstawiany do zapisanych wyników wyszukiwania stron internetowych, a po kliknięciu linku z zmodyfikowanej wyszukiwarki, użytkownik zostaje przekierowany do szkodliwej treści przez kod iframe. To sprawia, że ​​komputer użytkownika jest podatny na pobranie złośliwego oprogramowania.
• Niektóre wirusy komputerowe mogą również wprowadzać niewidzialne ramki iframe na Twoje strony internetowe i przekształcać je w „botnet” za pomocą SQL i innych ataków.

Czy istnieją problemy z bezpieczeństwem dotyczące ramek iframe?

Same elementy iframe nie stanowią zagrożenia dla Ciebie ani użytkowników/czytelników Twojej witryny, a także nie jest ryzykowne łączenie stron w elementach iframe. Jednak złośliwe witryny często używają ramek iframe do infiltracji niekorzystnej zawartości, która może zainfekować komputer odwiedzającego bez jego widoczności lub wiedzy. Dodając ramki iframe w swojej witrynie, musisz uważać na zawartość wszystkich witryn, do których prowadzą linki. Jeśli masz powody, by sądzić, że witryny nie są wiarygodne lub godne zaufania, unikaj łączenia ich lub ich zawartości w ramce iframe.

Ramki iframe są proste, elastyczne i mogą sprawić, że Twoja witryna będzie interaktywna i przyjazna dla użytkownika. Istnieje element ryzyka, jeśli element iframe zawiera nierzetelną treść, ale zapewnienie, że wiarygodne informacje są połączone w iframe, może pomóc uniknąć takich problemów.