Что такое iframe?

iframe — это HTML-документ, встроенный в другой HTML-документ на веб-сайте. Думайте об этом как о «веб-странице внутри веб-страницы».

HTML-тег iframe.Примеры

HTML-тег iframe используется для указания URL-адреса встраиваемого документа.

Фреймы часто используются для встраивания видео, карт и других медиафайлов на веб-страницу. Вы также можете использовать их для встраивания другой веб-страницы в веб-страницу. Вот несколько примеров использования кода iframe для встраивания внешнего ресурса:

<iframe src="http://frontendbook.ru/"></iframe>

<iframe src="http://frontendcolors.ru/" width="400" height="300"></iframe>

<iframe src="http:/frontendgradients.ru/" style="border: 0;"></iframe>

Вот несколько примеров встраивания интерактивных ресурсов в HTML. Этот конкретный код встраивает видеоплеер Vimeo:

<iframe src="https://player.vimeo.com/video/72732422" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Фреймы существуют с первых дней существования Интернета. Разработчики изначально использовали их для встраивания на веб-страницу внешнего контента, например видео с YouTube.

Существуют также веб-сайты типа «панели инструментов», такие как Stumbleupon, которые добавляют свою панель инструментов поверх веб-сайта. Stumbleupon сделал бы это, отобразив веб-сайт на своей странице с помощью iframe.

Почему разработчики в основном перестали использовать iframe на своих сайтах

В настоящее время разработчики все еще используют iframe для встраивания мультимедиа и другого контента на веб-страницу. Но из-за соображений безопасности многие фреймворки веб-разработки не одобряют этого.

В конце концов, iframe, работающий внутри другой веб-страницы, не будет идеальным пользовательским интерфейсом. Фреймы могут выглядеть особенно плохо на мобильных телефонах и нарушать адаптивность макетов веб-дизайна. Вот почему фреймы в значительной степени потеряли популярность.