Использование тега 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"- указывает способ отображения полосы прокрутки во фрейме. Его значения расшифровываются так:

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

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

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

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

Значением атрибута 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-код" и скопировать его. После этого вставляете код в соответствующее место на странице сайта.

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