Вы здесь: Главная » HTML » Использование тега iframe

Использование тега iframe

В HTML5 использование фреймов запрещено. Они считаются устаревшими элементами, и их использование на данный момент действительно не имеет смысла. Но при желании вы можете прочитать о них здесь. Из всего семейства фреймов сейчас используется тег <iframe> (индивидуальный, или плавающий фрейм), который позволяет вставить на текущую страницу сайта другую страницу или некий код. Он очень часто используется для добавления видео с Youtube, например.

Что такое фрейм? Это блок в виде специальной прямоугольной области с собственными полосами прокрутки (scrollbars).  Основным атрибутом этого элемента является src, в значении которого указывается абсолютный или относительный URL вставляемого документа (похоже на тег <img>, не так ли?). HTML 5, однако, предлагает альтернативный вариант — вы можете указать исходный код дочерней страницы непосредственно в атрибуте srcdoc, без необходимости хранить ее отдельно. Естественно, этот код должен быть экранирован и соответствовать стандарту HTML.

Если вы заполняете оба атрибута, то браузер должен отдать предпочтение srcdoc, проигнорировав src. В таком случае целесообразно указывать в атрибуте src адрес копии документа, содержащегося в srcdoc. Это позволит корректно отобразить страницу даже в браузерах, не поддерживающих HTML 5.

Несмотря на то, что вся необходимая информация о вставляемом документе задается в атрибутах <iframe>, исторически сложилось так, что этот тег все же парный. Это необходимо для обеспечения совместимости с браузерами, которые вообще не поддерживают этот элемент — они просто отобразят его содержимое, как правило, строку с предупреждением о том, что тег не поддерживается. Браузеры же с поддержкой <iframe> проигнорируют все, что находится между его открывающим и закрывающим тегами.

Стандартом HTML 5 более не поддерживаются атрибуты, отвечающие за графическое оформление фреймов. Даже необходимость отображения полос прокрутки теперь определяется только инструкциями CSS. Однако все еще можно указать ширину и высоту фрейма, присвоив ему атрибуты width и height соответственно. Значения их, как и в случае с <img />, указываются в пикселях или процентах. Чаще указывают в пикселях, т.к. % подразумевают, что ширина или высота берутся от соответствующих размеров родительского элемента.

Остался также атрибут name, позволяющий озаглавить фрейм. Если указать имя фрейма в атрибуте target какой-либо ссылки, то документ, на который она ссылается, при нажатии по ней откроется в указанном фрейме.

Забавно, но пример этого кода вы тоже будете смотреть в теге iframe, но уже для этой страницы (посмотреть в отдельной вкладке).

Еще один атрибут, пришедший из HTML4: scrolling  = "auto | no | yes"- указывает способ отображения полосы прокрутки во фрейме. Его значения расшифровываются так:

  • auto - полосы прокрутки добавляются браузером только по необходимости, в том случае, когда содержимое фрейма превышает его видимую часть.
  • no - запрещает отображение полос прокрутки.
  • yes - всегда вызывает появление полос прокрутки, независимо от объёма информации.

HTML 5 предоставляет еще два новых атрибута для управления фреймами. Установленный булев атрибут seamless="seamless" означает, что браузер должен обрабатывать содержимое вставленного документа так, как будто оно является частью основного документа. В частности, на него будут действовать инструкции CSS, подключенные к странице-родителю. Кроме того, ссылки дочерней страницы будут открываться в основном (родительском) окне браузера, а не в самом фрейме, как это происходит по умолчанию. Также ширина и высота <iframe> будут автоматически установлены браузером так, как будто фрейм является обычным блочным элементом. Помните, что не все браузеры поддерживают HTML 5 и атрибут seamless в частности. Поэтому, когда все же нужно его применить, рекомендуется подключать к дочернему документу необходимые стили CSS и указывать в элементе <base /> атрибут target="_parent", чтобы обеспечить правильное функционирование ссылок.

Этот атрибут может быть использован в следующих вариантах

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

  • отправка данных из форм на сервер;
  • применение скриптов;
  • размещение ссылок, указывающих на другие окна и фреймы (нельзя использовать атрибут target);
  • применение плагинов с элементами <embed /> и <object>;
  • использование атрибута seamless во вложенных фреймах;
  • доступ к содержимому родительского документа, включая cookie и localStorage, путем принудительной унификации источника страницы, даже если это фактически один и тот же документ (применяется при необходимости сохранить возможность скриптования в пределах дочернего документа, ограничив доступ к родительскому).

Значением атрибута sandbox может быть набор из перечисленных ниже ключевых слов, которые указываются через пробел. Каждое из них снимает некоторые из вышеуказанных ограничений:

"" применяет все ограничения, снимаемые перечисленными ниже значениями. Таким образом ограничивая содержимое фрейма влиять на родительский элемент, изолируя страницу, отображаемую во фрейме, в виртуальной песочнице, поэтому любой вредоносный код не сможет нанести вред родительской странице, сайту или компьютеру пользователя.
allow-forms разрешает отправку данных с помощью форм.
allow-scripts разрешает выполнение сценариев (исключая всплывающие окна).
аllow-same-origin указывает, что информация представленная в iframe имеет тот же источник, что и информация представленная в содержащем его документе. Отключает принудительную блокировку доступа к родительскому документу.
аllow-top-navigation разрешает ссылаться на документ верхнего уровня. Т.е. разрешает использовать ссылки внутри содержимого iframe для перемещения по содержащему его документу. Остальные окна и фреймы остаются под защитой атрибута sandbox.

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

Помните, что использование sandbox не гарантирует безопасности при отображении загруженного на сервер пользовательского кода, поскольку злоумышленник может загрузить вредоносную страницу непосредственно в главном окне браузера, обойдя действие атрибута. Для более надежной защиты необходимо обеспечить вывод пользовательских страниц с указанием MIME-типа text/html-sandboxed вместо text/html.
Примечание: атрибут sandbox не поддерживается в IE9 и более ранних версиях, и в Opera.

Есть еще ряд атрибутов, которые использовались в HTML4, но для HTML5 являются устаревшими и должны быть заменены css-правилами:

  • align - определяет, как фрейм будет выравниваться по краю, а также способ обтекания его текстом. Замена - float и vertical-align
  • frameborder -устанавливает, отображать границу вокруг фрейма или нет. Замена - border
  • hspace - горизонтальный отступ от фрейма до окружающего контента. Замена - padding
  • vspace - вертикальный отступ от фрейма до окружающего контента. Замена - padding
  • marginheight - отступ сверху и снизу от содержания до границы фрейма. Замена - margin
  • marginwidth - отступ слева и справа от содержимого до границы фрейма. Замена - margin

Вставка видео с Youtube

Достаточно часто используемое действие на различных сайтах. Для того чтобы это сделать, нужно воспользоваться кодом, предоставляемым самим сервисом youtube. Нужно под видео выбрать ссылку поделиться, затем нажать на "HTML-код" и скопировать его. После этого вставляете код в соответствующее место на странице сайта.

Код с youtube.com

Совет: если Вы используете CMS WordPress, делать это нужно не в визуальном, а в текстовом редакторе, чтобы код с угловыми скобками не был преобразован в спецсимволы типа &lt; и &gt;.

12 комментариев

  1. Т.е. iframe сейчас используются только для рекламы или для youtube?

    • Преимущественно да, но карты Google или Яндекс тоже вставляются на сайт в этом теге.

  2. Спасибо, интересно.
    Теперь буду знать, как вставить видео на сайт с youtube.

  3. Вау, классно.
    Теперь добавлю видео на свою страничку.

  4. Интересная статья.
    Никогда раньше не пользовалась этим тегом.
    Возьму на заметку.
    Жду следующих статей 🙂

  5. А разве фреймовая структура еще используется в HTML5?

    • Нет, не используется. Тег iframe - последний "представитель" фреймов. Его вполне можно использовать.

  6. Спасибо. Полезная статья. Буду рекомендовать сайт своим друзьям.

  7. Мне понравился ваш сайт. Только почему именно в этой статье так много комментариев?
    Тут есть и получше статьи, как по мне.
    Например, по JavaScript.

  8. А у меня вопрос - стоит ли форматировать как-то iframe в css?

    • Ну, разве что задавать ему ширину и высоту. Возможно, ширину стоит задавать, как у контейнера (принцип адаптивности).
      Может быть еще рамку, если нужно.

  9. Прикольная тема у вас на сайте. Где качали?

Обсуждение закрыто