Краткий курс HTML 5

16. Фреймы

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

<iframe src="frame.html"></iframe>

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

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

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

<a href="second.html" target="myFrame">Эта ссылка откроется во фрейме</a>
<iframe src="frame.html" name="myFrame" width="100%">
   Ваш браузер не поддерживает фреймы.
</iframe>

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

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

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

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

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

1 комментарий

Спасибо информация помогла

Сергей @ 12 марта 2020