<iframe>

Элемент

Frames

Что же делает <iframe>?

Как вставить страницу в страницу HTML? Для этого нужно использовать <iframe>, который создает в текущем документе встроенный фрейм, в котором отображается другой HTML-документ.

Отображение

Display block.

Пример кода

<iframe width="560" height="315" src="https://www.youtube.com/embed/owsfdh4gxyc" frameborder="0" allowfullscreen></iframe>

Мощный, но легкий в использовании

Еще в старые недобрые времена веб-дизайна было много <frame> элементов, портящих жизнь каждого разработчика. Они почти всегда были плохим подходом к дизайну. К счастью, элемент <frame> был объявлен устаревшим в HTML5. Но <iframe> или "встроенный фрейм" по-прежнему доступен. Будет ли он устаревшим в следующей версии? Может, стоит его избегать? Есть несколько допустимых вариантов использования этого элемента при создании HTML страницы. Но нужно понять, что это такое и как оно работает, чтобы избежать ошибок.

Сходства и различия <iframe> и <frame>

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

<!—Вы можете сделать так --> <iframe src="http://example.com"></iframe> <!—Но вы не можете сделать так --> <iframe> <!DOCTYPE html> <html> <head> . . . </head> <body> . . . </body> </html> </iframe>

Основное различие между <iframe> и <frame> заключается в том, что <iframe> обеспечивает соблюдение правила, о том, что HTML документ в приоритете. Содержимое <iframe> отображается внутри элемента, который является частью текущего документа. В качестве примера рассмотрим это встроенное видео, взятое из YouTube:

<iframe width="560" height="315" src="https://www.youtube.com/embed/M2kSJbLbIgQ" frameborder="0" allowfullscreen></iframe>

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

Не переделывайте макеты на основе фреймов с помощью iframe

Когда-нибудь вам может попасться задача по обновлению старого сайта, который был построен с использованием фреймов. Возможно, вы захотите использовать <iframe> и фиксированную ширину макета, чтобы воссоздать тот же кошмар из независимых панелей и подокон. Но вы не сможете использовать атрибут target, чтобы открыть ссылку в отдельном фрейме. Вы можете начать искать решения на JavaScript. Пожалуйста, не делайте этого.

Удачное (и ужасное) применение <iframe>

Существует несколько допустимых вариантов использования <iframe> для создания HTML страницы:

  • встраивание стороннего медиа контента;
  • встраивание собственного медиа контента через кроссплатформенный документ;
  • встраивание примеров кода;
  • встраивание сторонних "апплетов" в качестве форм оплаты.

А вот некоторые ужасные варианты использования <iframe>:

  • Фотогалерея;
  • форум или чат.

Если вам нужно встроить независимые, уже существующие HTML-документы в текущий, используйте <iframe>. Если же вы строите все с нуля, нет никаких причин разбивать дизайн страницы на несколько самостоятельных документов. Особенно если они на самом деле не являются независимыми частями контента.

Поддержка браузеров для iframe

ie-true

Атрибуты iframe

Название атрибутаЗначениеОписание
sandboxAllow-same-origin
Allow-top-navigation
Allow-forms
Allow-scripts
Задает ряд ограничений на контент, загружаемый во фрейм. Задается перед тем, как создать HTML страницу.
scrollingyes no autoОпределяет показывать скроллы в фрейме или нет. Является устаревшим в HTML5. Вместо него используйте CSS.
NameназваниеЗадает имя фрейма.
Alignleft right top
middle bottom
Определяет выравнивание фрейма относительно окружающих элементов. Является устаревшим. Вместо него используйте CSS.
frameborderyes (или 1)
no
Используется для включения отображения границы вокруг фрейма. Является устаревшим в HTML5. Вместо него используйте CSS.
longdescURLИспользуется, чтобы указать URL-адрес страницы, которая содержит длинное описание содержания фрейма. Является устаревшим. Вместо него используйте CSS.
marginwidthпикселиИспользуется для контроля ширины отступа от содержания до границы фрейма. Является устаревшим. Вместо него используйте CSS.
srcURLОпределяет URL-адрес документа для отображения в IFRAME.
vspaceпикселиУстанавливает вертикальные отступы от фрейма до окружающего контента. Является устаревшим. Вместо него используйте CSS.
widthпиксели %Определяет ширину фрейма на HTML странице.

Перевод статьи “<iframe>” был подготовлен дружной командой проекта Сайтостроение от А до Я.

15 декабря 2016 в 18:57
Материалы по теме
{"url":"http://www.fastvps.ru/", "src":"/images/advbanners/fastvps.png", "alt":"Хостинг Fastvps.ru. Наш выбор!"}
Заработок