html.okpython.net
Основы создания сайтов
HTML :: Тег <iframe>
В HTML тег <iframe> (от англ. inline frame – встроенный фрейм) создает в документе прямоугольную область (встроенный фрейм), в которую можно загружать любые другие независимые документы.
Внутри элемента <iframe> можно указывать альтернативное содержимое, которое будет отображаться браузерами не поддерживающими данный элемент.
При одновременном использовании в элементе <iframe> атрибутов srcdoc и src атрибут src игнорируется.
Синтаксис
<iframe>...</iframe>
Закрывающий тег: обязателен.
Атрибуты
- allowfullscreen – данный логический атрибут разрешает программно увеличивать размер фрейма на весь экран скриптами, например, при воспроизведении видеороликов.
- height – задает высоту фрейма.
- name – задает имя фрейма, через которое к нему можно обращаться, например, через скрипты.
-
sandbox – позволяет устанавливать ограничения на загружаемый контент (разрешается через пробел
указывать сразу несколько значений атрибута):
- "" – если значение не указывать, то действуют все ограничения сразу;
- "allow-forms" – разрешает использование форм во фрейме;
- "allow-pointer-lock" – разрешает включение API-интерфейсов (интерфейс прикладного программирования) во фрейме;
- "allow-popups" – разрешает всплывающие окна во фрейме;
- "allow-same-origin" – считается, что загружаемый во фрейм документ принадлежит тому же источнику, что и основной документ;
- "allow-scripts" – разрешает работу скриптов во фрейме;
- "allow-top-navigation" – разрешает содержимому фрейма получать доступ к элементам основного окна.
- src – в качестве значения принимает полный или относительный путь к загружаемому во фрейм документу.
- srcdoc – в качестве значения принимает код документа, загружаемого во фрейм (можно указывать как весь код документа, так и часть в виде содержимого тела документа).
- width – задает ширину фрейма.
- Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.
Ссылки
Официальный сайт W3C: https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/iframe
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> </head> <body> <!-- Код фрейма берем на Ютубе --> <iframe width="560" height="315" src="https://www.youtube.com/embed/txeKbmw7nro" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> Ваш браузер не поддерживает встроенные фреймы! </iframe> </body> </html>
Пример №1
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №2</title> </head> <body> <iframe width="560" height="315" srcdoc=" <!DOCTYPE html> <html> <head> <!-- Задаем кодировку текста. --> <meta charset="utf-8"> <title>Первая html-страница</title> </head> <body> Всем привет от HTML! </body> </html> "> Ваш браузер не поддерживает встроенные фреймы! </iframe> </body> </html>
Пример №2