Jak i kiedy używać elementów iframe (ramki typu Inline)

Ramki Inline, zwykle zwane "ramkami iframe", są jedynym typem ramki dozwolonym w HTML5. Te ramki są w zasadzie sekcją strony, którą "wycinasz". W przestrzeni, którą wycinałeś ze strony, możesz następnie przesłać na zewnętrzną stronę internetową. Zasadniczo element iframe to inne okno przeglądarki ustawione bezpośrednio na twojej stronie internetowej. Często używasz iframe w witrynach, które muszą zawierać treści zewnętrzne, takie jak mapa Google lub film z YouTube. Obie te popularne strony internetowe używają elementów iframe w swoim kodzie do umieszczenia na stronie.

Jak korzystać z elementu IFRAME

Element wykorzystuje elementy globalne HTML5, a także kilka innych elementów. Cztery są również atrybutami w HTML 4.01:

• - adres URL źródła ramki
• -Wysokość okna
• - szerokość okna
• - nazwa okna

A trzy są nowe w HTML5:

• srcdoc- HTML dla źródła ramki. Ten atrybut ma pierwszeństwo przed jakimkolwiek adresem URL w src atrybut
• piaskownica- lista funkcji, które powinny być dozwolone lub zabronione w oknie ramki
• bezszwowy-Przypisuje programowi użytkownika, że ​​element iframe powinien być renderowany, tak jak niewidoczny element dokumentu nadrzędnego

Aby zbudować prostą ramkę iframe, ustaw źródłowy adres URL oraz szerokość i wysokość:

Pamiętaj, że możesz nie używać wartości pikseli dla ustawień swojego elementu iframe, ale zamiast tego możesz zdecydować o użyciu wartości procentowej. Jeśli tworzysz responsywną stronę internetową, której rozmiar powinien się zmieniać przy różnych rozmiarach ekranu, te wartości procentowe będą ważne.

Istnieją również pewne atrybuty, które są poprawne w HTML 4.01, ale przestarzałe w HTML5. Ponieważ większość dzisiejszych stron korzysta z HTML5 +, te atrybuty są takie, których nie chcesz używać (ale które możesz zobaczyć w niektórych starszych dokumentach).

• -Ponad, użyj ZA element do linku do opisu
• -Ponadto użyj CSS pływak własność
• niedopuszczalność-Ponadto użyj CSS tło właściwość, aby uczynić ifram przezroczystym
• -Ponadto użyj granica Właściwość CSS
• margines-Ponadto użyj CSS margines własność
• margines-Ponadto użyj CSS margines własność
• -Ponadto użyj CSS przelewowy własność

Obsługa IFRAME Browser

The IFRAME element jest obsługiwany przez wszystkie nowoczesne przeglądarki:

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

Jeśli na powyższej liście nie ma numeru wersji, oznacza to, że obsługują go wszystkie wersje tej przeglądarki.

Należy pamiętać, że chociaż wszystkie przeglądarki obsługują IFRAME element, wciąż jest ograniczona obsługa niektórych funkcji HTML5.

• Za pomocą przelewowy wyłączenie przewijania nie jest niezawodne. Jeśli nie chcesz wyświetlać pasków przewijania w ramkach iframe, powinieneś nadal korzystać z przewijanie atrybut.
• The srcdoc, piaskownica, i bezszwowy atrybuty nie są obecnie obsługiwane przez żadną przeglądarkę.

Łączenie z elementami iframe

Kiedy podasz swój iframes a imię lub ID możesz wskazać linki w tej ramce z atrybutem na ZA element. Następnie, gdy użytkownik kliknie link, otworzy się wewnątrz przywoływanego elementu iframe zamiast bieżącego okna.

Spróbuj sam. Wpisz następujące informacje na stronie internetowej:

id = "myIframe" src = "http://webdesign.about.com/#lp-main" height = "200px" width = "500px">

To jest mój element iframe

Po kliknięciu tego linku otworzy się nowy dokument w powyższym oknie.

Jeśli dokument został otwarty w IFRAME nie ma ustawionych żadnych celów, wtedy wszystkie te linki zostaną otwarte w tym samym elemencie iframe, co dokument nadrzędny.

Możesz użyć tej funkcji, aby utworzyć łącza w jednym IFRAME zmienić zawartość innej IFRAME na tej samej stronie.

IFrames i bezpieczeństwo

The IFRAME element sam w sobie nie stanowi zagrożenia dla bezpieczeństwa dla Ciebie lub Twoich czytelników. Niestety, iframes mają złą reputację, ponieważ mogą być wykorzystywane przez złośliwe strony internetowe do umieszczania treści, które mogą zainfekować komputer odwiedzającego bez wyświetlania go na stronie. Odbywa się to poprzez linki wskazują na niewidzialne IFRAME a te skrypty uruchamiały złośliwy kod. Użytkownik klika łącze i uważa, że ​​link został przerwany, ponieważ nic się nie wydarzyło, ale skrypt został uruchomiony, gdy nie mógł go zobaczyć.

Istnieją również wirusy komputerowe, które wstrzykną niewidoczne IFRAME na twoich stronach internetowych, skutecznie przekształcając twoją witrynę w botnet. Mogą to zrobić poprzez iniekcję SQL i inne ataki.

To, o czym należy pamiętać przy włączaniu IFRAME na Twojej stronie internetowej jest to, że Twoi użytkownicy są tak samo bezpieczni, jak zawartość wszystkich stron, do których prowadzą linki. Jeśli masz powody, by czuć, że strona jest niewiarygodna, nie łącz się z nią w żaden sposób i zdecydowanie nie dołączaj jej do zawartości IFRAME. Łączenie z własnymi stronami w ramach iframe nie stanowi jednak zagrożenia dla bezpieczeństwa dla Ciebie lub Twoich użytkowników.

Oryginalny artykuł Jennifer Krynin. Edytowane w dniu 11/16/16 przez Jeremy Girard