Тег <iframe>
Тег <iframe> використовується для вбудовування одного HTML-документа в інший. Це дозволяє виводити вміст з іншого джерела (сторінки, сервера) в межах поточної веб-сторінки. Він створює інтерактивний фрейм, який може містити зовнішні документи, такі як веб-сторінки, відео, карти, презентації тощо. Це дозволяє інтегрувати сторонній контент, не покидаючи поточної сторінки.
Атрибути
Специфічні атрибути
- src — вказує шлях джерела, яке має бути вбудоване у фрейм. Це може бути шлях до HTML-сторінки або ресурсів з іншого сайту. Наприклад:
<iframe src="https://example.com"></iframe>- width — задає ширину фрейму. Значення задається в пікселях або відсотках. Наприклад:
<iframe src="https://example.com" width="600"></iframe>- height — задає висоту фрейму. Значення також можна задати в пікселях або відсотках. Наприклад:
<iframe src="https://example.com" height="400"></iframe>- name — вказує ім’я фрейму, яке може бути використано для навігації або відправки форми до цього фрейму. Наприклад:
<iframe name="contentFrame" src="https://example.com"></iframe>- sandbox — обмежує можливості для вмісту фрейму. Може застосовуватися для підвищення безпеки, забороняючи виконання скриптів або інші дії, що можуть бути небезпечними. Наприклад:
<iframe src="https://example.com" sandbox></iframe>Атрибут sandbox може мати додаткові значення, такі як:
-
allow-scripts— дозволяє виконання скриптів.allow-forms— дозволяє відправку форм.allow-same-origin— дозволяє доступ до документів з тієї ж доменної зони.
- allowfullscreen — дозволяє вбудованому контенту використовувати режим на весь екран. Наприклад:
<iframe src="https://example.com" allowfullscreen></iframe>- loading — визначає, чи буде вміст фрейму завантажуватися відразу, або ж буде відкладено (наприклад, використовуючи lazy для відкладеного завантаження). Наприклад:
<iframe src="https://example.com" loading="lazy"></iframe>Глобальні атрибути
Тег <iframe> підтримує всі глобальні атрибути HTML, включаючи:
- id — унікальний ідентифікатор для елемента. Наприклад:
<iframe id="myFrame" src="https://example.com"></iframe>- class — клас для застосування стилів через CSS. Наприклад:
<iframe class="embed-video" src="https://example.com"></iframe>- style — інлайн-стилізація елемента. Наприклад:
<iframe style="border: 1px solid black;" src="https://example.com"></iframe>- title — надає опис для елемента, що може бути відображений при наведенні. Наприклад:
<iframe title="Приклад вбудованого фрейму" src="https://example.com"></iframe>
Приклад використання
<iframe src="https://www.youtube.com/embed/kaq6ybzXtwY" width="560" height="315" allowfullscreen></iframe>Додаткові моменти
- Вбудовані фрейми можуть бути небезпечними, якщо їх використовують для вставки не довіреного контенту. Використання атрибута sandbox допомагає знизити ризики.
- Існує можливість для батьківського документа і фрейму взаємодіяти між собою через JavaScript. Це дозволяє, наприклад, змінювати вміст фрейму або передавати дані.
- Вміст, що знаходиться в фреймі, не враховується пошуковими системами, як частина основної веб-сторінки, тому його використання може негативно вплинути на SEO.
