HTML Тег <iframe>
Приклад
Вбудований фрейм розмічається наступним чином:
<iframe src="https://w3schoolsua.github.io" title="W3Schools українською - безкоштовні онлайн веб-підручники українською мовою"></iframe>
Спробуйте самі »
Більше прикладів "Спробуйте самі" далі.
Визначення та використання
Тег <iframe> визначає вбудований фрейм.
Вбудований фрейм використовується для вбудовування іншого документа в поточний документ HTML.
Порада: Використовуйте CSS для стилізації <iframe> (див. приклад нижче).
Порада: Рекомендується завжди включати атрибут title для <iframe>. Це використовується програмами зчитування екрана, щоб зчитувати вміст <iframe>.
Підтримка браузерами
| Елемент | |||||
|---|---|---|---|---|---|
| <iframe> | Yes | Yes | Yes | Yes | Yes |
Атрибути
| Атрибут | Значення | Опис |
|---|---|---|
| allow | Визначає політику функції для <iframe> | |
| allowfullscreen | true false |
Установіть значення true, якщо <iframe> можна активувати повноекранний режим, викликавши метод requestFullscreen() |
| allowpaymentrequest | true false |
Установіть значення true, якщо <iframe> потрібно дозволити викликати Payment Request API |
| height | pixels | Визначає висоту <iframe>. Висота за замовчуванням становить 150 пікселів |
| loading | eager lazy |
Визначає, чи повинен браузер завантажувати iframe негайно, чи відкласти завантаження iframe до виконання певних умов |
| name | text | Вказує назву <iframe> |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url |
Визначає, яку інформацію про реферера надсилати під час отримання iframe |
| sandbox | allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation |
Вмикає додатковий набір обмежень для вмісту в <iframe> |
| src | URL | Вказує адресу документа для вбудовування <iframe> |
| srcdoc | HTML_code | Визначає HTML-вміст сторінки для відображення в <iframe> |
| width | pixels | Визначає ширину <iframe>. Ширина за замовчуванням становить 300 пікселів |
Глобальні атрибути
Тег <iframe> також підтримує Глобальні атрибути в HTML.
Атрибути подій
Тег <iframe> також підтримує Атрибути подій в HTML.
Більше прикладів
Приклад
Додавання та видалення меж iframe (за допомогою CSS):
<iframe src="/index.html" width="100%" height="300" style="border:1px solid black;">
</iframe>
<iframe src="/index.html" width="100%" height="300" style="border:none;">
</iframe>
Спробуйте самі »
Пов’язані сторінки
HTML підручник: HTML Iframe
HTML DOM довідник: Об’єкт IFrame
CSS налаштування за замовчуванням
Більшість браузерів будуть відображати елемент <iframe> з наступними значеннями за замовчуванням:
iframe:focus {
outline: none;
}
iframe[seamless] {
display: block;
}
