HTML тег <iframe>

Тег <iframe> создает на веб-странице встроенную область (фрейм), в которой можно отображать содержимое другого документа или веб-страницы. Содержимое фрейма и веб-страницы, на которой он находится, независимы друг от друга, но они могут взаимодействовать через JavaScript.

Не все браузеры поддерживают фреймы. На этот случай необходимо указать альтернативный текст, который будет показан пользователю, если браузер не сможет отобразить содержимое фрейма.

Браузеры по умолчанию визуально отображают содержимое элемента <iframe> с узкой рамкой, которую можно изменить или удалить с помощью CSS свойства border.

Синтаксис

Содержимое элемента располагается между открывающим (<iframe>) и закрывающим (</iframe>) тегами.

Атрибут src является обязательным для тега <iframe>. Он указывает адрес документа, который должен отображаться в фрейме.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <iframe src="https://ru.w3docs.com"></iframe>
  </body>
</html>

Чтобы установить размер iframe, вы можете использовать атрибуты height и width или использовать CSS. Значения атрибута устанавливаются в пикселях по умолчанию, но они также могут быть в процентах.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <iframe src="https://ru.w3docs.com" width="80%" height="300"></iframe>
  </body>
</html>

По умолчанию у iframe есть граница вокруг. Чтобы удалить границу, вы можете использовать атрибут style и / или CSS свойство border.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <iframe src="https://ru.w3docs.com" width="80%" height="300" style="border: none"></iframe>
  </body>
</html>

Атрибуты

Атрибут Значение Описание
align left
right
top
bottom
middle
Указывает способ выравнивания и обтекания фрейма текстом.
Не поддерживается в HTML5.
allowfullscreen Определяет, что фрейм может быть открыт в полноэкранном режиме.
frameborder 1
0
Определяет, показывать рамку вокруг фрейма или нет<
Не поддерживается в HTML 5.
height pixels Задает высоту фрейма (по умолчанию высота 150 pix).
longdesc URL Содержит ссылку на подробное описание вложенной во фрейм страницы.,
Не поддерживается в HTML 5.
marginheight pixels Определяет верхнюю и нижнюю границы фрейма.
Не поддерживается в HTML 5.
marginwidth pixels Определяет левую и правую границы фрейма.
Не поддерживается в HTML 5.
name text Определяет имя фрейма.
sandbox
Задает ограничения на контент, загружаемый во фрейме.
"" применяет все ограничения.
allow-forms Разрешает отправку форм на вложенной странице.
allow-same-origin Воспринимает вложенный документ как документ загруженный из того же источника, что и родительский документ.
allow-scripts Разрешает выполнение скриптов на вложенной странице.
char allow-top-navigation Разрешает содержимому вложенного документа доступ к элементам верхнего уровня (документам, окнам).
scrolling yes
no
auto
Устанавливает, отображать или нет полосу прокрутки.
Не поддерживается в HTML 5.
seamless seamless Определяет, что содержимое вложенного документа должно отображаться как часть родительского документа.
src URL Указывает адрес документа, содержимое которого будет загружаться во фрейм.
srcdoc HTML_code Хранит содержимое фрейма непосредственно в атрибуте.
width pixels Задает ширину фрейма. (по умолчанию 300px)

Тег <iframe> поддерживает глобальные атрибуты и атрибуты событий.

Browser support




Related articles