Краткий курс 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. В противном случае в подключенном документе запрещается:
- отправка данных из форм на сервер (см. главу «Формы»);
- применение скриптов;
- размещение ссылок, указывающих на другие окна и фреймы (нельзя использовать атрибут
target
); - применение плагинов с элементами
<embed />
и<object>
(см. главу «Мультимедиа и скрипты»); - использование атрибута
seamless
во вложенных фреймах; - доступ к содержимому родительского документа, включая cookie и localStorage, путем принудительной унификации источника страницы, даже если это фактически один и тот же документ (применяется при необходимости сохранить возможность скриптования в пределах дочернего документа, ограничив доступ к родительскому).
Значением атрибута sandbox
может быть набор из перечисленных ниже ключевых слов, которые указываются через пробел. Каждое из них снимает некоторые из вышеуказанных ограничений:
allow-forms | — | разрешает отправку данных с помощью форм. |
allow-scripts | — | разрешает применение скриптов. |
аllow-same-origin | — | отключает принудительную блокировку доступа к родительскому документу. |
аllow-top-navigation | — | разрешает ссылаться на документ верхнего уровня. Остальные окна и фреймы остаются под защитой атрибута sandbox . |
Помните, что использование sandbox
не гарантирует безопасности при отображении загруженного на сервер пользовательского кода, поскольку злоумышленник может загрузить вредоносную страницу непосредственно в главном окне браузера, обойдя действие атрибута. Для более надежной защиты необходимо обеспечить вывод пользовательских страниц с указанием MIME-типа text/html-sandboxed
вместо text/html
.
1 комментарий
Сергей @ 12 марта 2020