HTML практично не потребує представлення, з огляду на його широке поширення в усьому світі. HTML означає мову гіпертекстової розмітки, найбільш широко використовувану мову для розробки веб-додатків. HTML надає кілька тегів, які можна використовувати практично в будь-якому випадку використання веб-додатка;
Одним із таких тегів є тег <iframe>. iframe – це тег, який використовується для вбудовування документа в документ. Наприклад, вбудовування карт на веб-сторінку або відео YouTube на веб-сайт.
У цій статті основна увага приділяється тому, що таке iframe і головні способи його реалізації. Це важливий тег HTML, оскільки багатьом веб-додаткам необхідні вбудовані елементи, як-от карти, веб-реклама тощо. HTML має вирішальне значення для веб-розробки, і якщо ви коли-небудь замислювалися про те, щоб вибрати веб-розробку як кар’єру, ви, безсумнівно, зіткнулися з цією мовою;
Як працює iFrame?
HTML – це не що інше, як теги, які він утворює. У HTML є тег майже для кожного елемента, який ви можете додати на веб-сторінку. – один із важливих тегів, який часто використовується для вбудовування інших документів, таких як веб-сторінки, карти тощо.
iframe у HTML означає вбудований фрейм. Тег визначає прямокутну область усередині поточного документа або веб-сторінки. Веб-браузер може відображати інший документ на поточній сторінці, включно зі смугами прокрутки та межами.
Як і будь-який інший тег, тег також має кілька пов’язаних із ним атрибутів. Такі атрибути, як src, висота, ширина та інші, визначають і редагують область, створену тегом <iframe>.
Синтаксис:
<iframe src=»URL-адреса документа» title=»опис документа»></iframe>
Приклади коду для вставки iFrame на веб-сторінку
Отже, давайте заглибимося в практичний аспект цього HTML-тега і напишемо просту веб-сторінку, яка відображає деякий текст та інший документ на цій же сторінці;
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<h1>HTML Iframe Tag</h1>
<br />
<h2>Simplilearn video embedded using iframe...</h2>
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/ukzFI9rgwfU"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</body>
</html>Ось який вигляд має код під час iFrame вставки на веб-сторінку.
Давайте подивимося на кожен HTML-тег, який ми використовували під час створення цієї веб-сторінки:
<html>
Цей тег є своєрідною обгорткою для всього веб-додатка, все знаходиться всередині цього тега і завершується до закриття цього тега.
<head>
Цей тег використовується для зберігання метаданих про веб-додаток. У цьому тезі виконуються такі дії, як заголовок веб-додатка або імпорт JavaScript чи CSS у веб-додаток.
<body>
Цей тег використовується для відображення вмісту на екрані під час перегляду веб-браузером. Таким чином, усе, що має бути показано користувачеві на екрані, поміщається в цей тег.
<h1>, <h2>
У HTML є кілька тегів для форматування тексту. <h1>, <h2> – два таких теги. Ці теги означають «заголовок 1» і «заголовок 2» відповідно. Є кілька інших тегів, таких як «заголовок 3» і «абзац», які позначаються скороченнями<h3> і <p> відповідно.
<br>
Цей тег використовується для розриву рядка між елементами HTML.
<iframe>
Цей HTML-тег є основною темою цієї статті. Як обговорювалося вище, він використовується для вбудовування інших документів на веб-сторінку. Атрибути необхідні для визначення та редагування регіону, створеного тегом <iframe>. Тут використовуються такі атрибути:
- width: встановлює ширину області iframe.
- height: встановлює висоту області iframe.
- src: містить URL-адресу документа, який має бути вбудований у веб-сторінку.
- frameborder: визначає межу області iframe.
- allow: набір атрибутів для встановлення значень таких параметрів, як автоповорот тощо.
- allowfullscreen: визначає, чи можна розширити iframe до повноекранного режиму.
Результат:
Ось як має виглядати веб-сторінка, якщо ви закодуєте її точно так, як зазначено вище. Вітаємо, ви щойно написали свій перший веб-додаток із вбудованим документом.
Застосування iFrame
Вбудовані фрейми мають безліч практичних застосувань, які розширюють стандартний дизайн і функціональність веб-сторінки. Найпоширеніші випадки використання включають у себе:
- Вбудовування мультимедійного контенту. Елементи Iframe зазвичай використовують для вбудовування мультимедійного контенту, такого як відео, аудіофайли та анімація, з таких платформ, як YouTube, Vimeo і SoundCloud. Це дає змогу користувачам взаємодіяти з контентом безпосередньо на відвідуваному веб-сайті, не йдучи зі сторінки.
- Інтеграція сторонніх додатків. Веб-розробники використовують iframe для безперешкодної інтеграції сторонніх додатків у свої веб-сайти. Наприклад, компанія може вбудувати віджет Google Maps, щоб показати своє місце розташування, або сайт електронної комерції може включати платіжний шлюз для транзакцій.
- Відображення реклами. Iframes – популярний вибір для відображення реклами на веб-сторінках. Вони можуть відокремлювати рекламний контент від контенту головної сторінки, що допомагає керувати рекламними сценаріями і незалежно відстежувати перегляди або кліки.
- Завантаження зовнішнього контенту. Iframes може завантажувати контент із зовнішніх джерел, таких як стрічки новин, оновлення погоди або повідомлення в соціальних мережах. Таким чином, вони збагачують хост-сайт динамічним контентом без складної інтеграції з серверною частиною.
- Створення сайту всередині сайту. Iframes може створити “сайт усередині сайту”, де відвідувачі можуть переміщатися по іншому веб-сайту, не залишаючи вихідну сторінку. Це особливо корисно для розміщення мікросайтів або каталогів продукції.
- Ізоляція контенту, специфічного для браузера. Розробники можуть використовувати iframe для ізоляції контенту, який поводиться по-різному в різних браузерах, гарантуючи, що він не впливає на решту сторінки. Це може бути тимчасовим рішенням, поки розробляється постійне рішення.
- Поліпшення дизайну та макета. Iframes може допомогти створити складніші макети веб-сторінок. Дизайнери можуть використовувати їх для вбудовування інтерактивних або фіксованих елементів на сторінку, таких як постійний музичний програвач або вікно чату.
- Спрощення оновлення контенту. Коли один і той самий контент має відображатися на кількох сторінках, можна використовувати iframe для централізації контенту в одному місці. Таким чином, оновлення вмісту необхідно вносити тільки один раз, і зміни автоматично відображатимуться скрізь, де вбудовано iframe.
Iframes має також багато практичних застосувань, крім відео або зображення на веб-сторінці;
Налаштування iFrame через CSS
Щоб застосувати iframe CSS у HTML, спробуйте згадані інструкції.
- Створіть елемент div
Спочатку створіть контейнер div, використовуючи тег «<div>», і вставте атрибут “id” у внутрішній тег div.
- Додайте заголовки
Додайте заголовок між тегом «<div>», використовуючи тег «<h1>». Вставте другий заголовок за допомогою тега «<h2>».
- Вставте тег «<iframe>»
Потім вставте тег «<iframe>», щоб додати вбудований фрейм веб-сторінки в контейнер div. Далі додайте такі атрибути всередині тега iframe:
Атрибут “src” використовується для додавання URL-адреси веб-сторінки у фрейм.
- “Height” визначає висоту створеного вбудованого фрейму.
- “Width” визначає розмір ширини кадру.
- Оформлення першого заголовка
Потім задайте стиль першому заголовку, застосувавши властивості CSS:
- Властивість “font-family” може містити кілька назв шрифтів як “резервну” систему. Вона використовується для зазначення шрифту елемента.
- “color” визначає колір шрифту.
- Оформлення другого заголовка
Тепер оформіть другий заголовок за вашим вибором:
Згідно з наведеним вище фрагментом коду.
- “font-style” призначає певний стиль для певного шрифту.
- “color” встановлено як “синій” колір для <h2>.
- Доступ до контейнера Div для стилізації
Отримайте доступ до контейнера div “id”, використовуючи ім’я ідентифікатора “#div-iframe”, і застосуйте властивості CSS, зазначені нижче:
- Властивість “margin” визначає даний простір за межами кордону.
- Властивість text-align вирівнює доданий текст по центру.
- Оформлення iframe за допомогою властивостей CSS
Щоб стилізувати iframe, застосуйте властивості CSS відповідно до ваших уподобань. Наприклад, ми використовували властивість “border” для визначення межі навколо елемента і “border-style” для стилізації межі. CSS було успішно застосовано до доданого iframe.
Щоб застосувати CSS до iframe, спочатку додайте iframe, використовуючи тег «<iframe>» у HTML. Потім відкрийте його, використовуючи ім’я тега, і застосуйте необхідні властивості CSS, включно з “межею”, “кольором”, “висотою” і “шириною”, щоб стилізувати і поліпшити зовнішній вигляд iframe. У цьому пості продемонстровано метод застосування властивостей CSS до iframe.
курси Junior саме для вас.
Безпека та обмеження під час використання iFrame
Два вищевказані атрибути забезпечують безпеку ваших елементів iframe, але не є захистом від усіх шкідливих сайтів. Якщо шкідливий сайт може переконати відвідувачів вашого сайту безпосередньо отримати доступ до ворожого контенту (наприклад, ввівши URL-адресу у своєму браузері), вони все одно можуть бути атаковані. Якщо можливо, встановіть вміст ізольованого iframe в ізольованому програмному середовищі як MIME-тип text/html-sandbox.
Тестування функціональності iFrame
Щоб протестувати iframe, нам спочатку потрібно поговорити про те, коли ви можете тестувати вміст iframe. Раніше ми говорили про модульні тести: ви не збираєтеся тестувати вміст iframe на етапі модульного тестування. Це пов’язано з тим, що модульні тести призначені для перевірки логіки програми вашого коду. Добре спроектовані модульні тести не повинні включати залежності від зовнішніх ресурсів;
Під час модульного тестування ви хочете протестувати найменшу можливу “одиницю” коду, але замість цього ми тестуємо iFrames протягом періоду тестування, відомого як функціональне тестування. Функціональне тестування – це частина плану тестування, у якій ви визначаєте, чи працює весь застосунок у той момент, коли з ним взаємодіє кінцевий користувач;
Для веб-сайту це означає тестування веб-сайту так, як він виглядає в реальному браузері. Ви будете завантажувати веб-сайт на реальний сервер, обслуговувати реальний контент, а потім писати сценарії, щоб гарантувати, що те, що ви бачите, відповідає вашим очікуванням.
Альтернативи iFrame
У цьому блоці представлено деякі ефективні альтернативи Iframe в HTML для відображення вашого.
Тег об’єкта
Тег об’єкта – одна з найкращих альтернатив для вбудовування зовнішніх ресурсів і відображення іншої веб-сторінки на конкретній. Ми можемо використовувати його для різних мультимедійних компонентів, таких як відео, зображення або аудіо.
Цей тег створено на основі атрибутивних даних, що дає змогу користувачам визначати URL-адресу веб-сторінки для вбудовування. Ми також можемо встановити ширину і висоту контейнера завдяки його атрибутам.
Вбудований тег
Подібно до тега об’єкта, він служить тій самій меті. Ви можете використовувати його для зовнішніх ресурсів на веб-сторінках, таких як зображення, відео, PDF-файли та аудіо.
Самозакривний тег створений для визначення контейнера для вбудовування певного бажаного контенту. Атрибут src і тип one допомагають користувачам вказати URL-адресу вбудованої веб-сторінки.
Вимірювання висоти та ширини цього тега вказується в пікселях. Тому це буде ідеальна альтернатива тегу iframe в HTML.
Висновок
Насамкінець зазначимо, що код iframe в HTML пропонують веб-розробникам потужний інструмент для безперешкодного вбудовування зовнішнього контенту у веб-сторінки. Розуміючи основи iframe і впроваджуючи найкращі практики, розробники можуть поліпшити взаємодію з користувачем і надати привабливий контент. Крім того, отримання сертифікації HTML є важливим кроком на шляху до освоєння веб-розробки, отримання конкурентної переваги та підтримки відповідності галузевим стандартам. Володіючи необхідними навичками та знаннями, ви зможете відкрити світ можливостей і підняти свою кар’єру на нові висоти в захопливій сфері веб-розробки разом із FoxmindED!
Залишилися запитання про те, що таке iframe? Запитуйте у коментарях нижче!