Тег iframe
Тег iframe позволяет встраивать содержимое одного сайта в другой. Он используется для отображения контента, такого как видео, изображения или статьи, без необходимости открывать новое окно или вкладку.
Содержимое вставляемого сайта будет иметь
дизайн именного этого сайта. При этом CSS стили
нашего сайта, а также наш JavaScript код
не будут оказывать влияние на содержимое тега iframe.
К содержимому iframe можно применить
наш JavaScript, но для этого нужно действовать
особыми методами.
Тег iframe широко используется на сайтах для встраивания видео с YouTube и других платформ, а также для отображения статей и изображений с других источников.
Атрибуты
| Атрибут | Описание |
|---|---|
src |
Указывает адрес страницы, которая должна быть встроена. |
srcdoc |
Позволяет задать содержимое ифрейма непосредственно в атрибуте. |
frameborder |
Задает рамку фокруг ифрейма.
Значение yes задает рамку (по умолчанию),
а значение no убирает рамку.
|
scrolling |
Задает полосы прокрутки внутри ифрейма.
Значение auto - прокрутка по необходимости (по умолчанию),
значение yes - прокрутка всегда,
значение no - прокрутки нет.
|
Пример
Давайте вставим на наш сайт ифрейм с другим сайтом (для примера возьмем code.mu):
<iframe src="https://code.mu/" width="600" height="400"></iframe>
:
Пример
Вставим на наш сайт видео с YouTube:
<iframe
src="https://www.youtube.com/embed/KzQrHpB1H8U"
allowfullscreen
width="400"
height="400">
</iframe>
:
Пример
Напишем содержимое прямо в ифрейме:
<iframe
srcdoc="<h1>head</h1><p>text</p>"
width="300"
height="200">
</iframe>
: