Тег <iframe> создаёт встроенную область (рамку), в которой можно показать содержимое отдельного документа или даже другого сайта, ограничивая его пространство на текущей странице. Внутри рамки контент существует независимо от окружающего контекста. Так что у нас есть две страницы – родительская и дочерняя, которые могут обмениваться данными через JavaScript или серверный код.

Атрибут src задаёт URL того файла, который загрузится во встроенную область. Но даже если браузер не поддержит iframe (старые версии, текстовые браузеры и т.п.), внутри элемента можно разместить обычный текст или разметку – они отобразятся как резервное содержание.

Любые CSS-стили, применённые к родительскому элементу, не затрагивают контент iframe, а стили, написанные в самом фрейме, не влияют на родительскую страницу. Это своего рода «изолированная» среда.

Размеры рамки можно задать атрибутами width и height или через CSS. По умолчанию ширина 300 px, высота – 150 px, но браузер может отрисовать их иначе. Большинство из них показывают узкую рамку вокруг содержимого; эту рамку легко изменить или убрать с помощью стилей.

Если контент превышает заданные границы, появятся полосы прокрутки – они позволяют пользователю листать скрытый материал. Хотите их отключить? Добавьте в CSS overflow:hidden, но тогда часть содержимого станет недоступной.

Атрибуты:

• height: задаёт высоту элемента в пикселях.
• name: определяет имя iframe, которое можно использовать в скриптах, как target ссылок или formTarget.
• sandbox: вводит ограничения безопасности для контента фрейма. Значение может быть пустой строкой (sandbox="""") - тогда применяются все ограничения, либо перечислены конкретные разрешения через пробел:
  • allow-forms – позволяет отправлять формы.
  • allow-same-origin – фрейм считается того же источника.
  • allow-scripts – разрешает выполнение скриптов (без всплывающих окон).
  • allow-top-navigation – ссылки внутри iframe могут переходить по родительскому документу.

Важно: атрибут sandbox не поддерживается в IE9 и ниже, а также в Opera.

seamless – логический атрибут, который делает iframe без рамки и прокруток, чтобы он «потушил» как часть документа. Поддерживается только в Chrome и Safari 6+.

И наконец, основные атрибуты:

• src: URL отображаемого документа.
• width: ширина элемента в пикселях.