Вверх A A A
Ноябрь 2018
Нед Пн Вт Ср Чт Пт Сб Вс
44
1
2
3
4
45
5
6
7
8
9
10
11
46
12
13
14
15
16
17
18
47
19
20
21
22
23
24
25
48
26
27
28
29
30
49

Фреймы

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

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

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

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

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

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

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

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

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

  • отправка данных из форм на сервер (см. главу «Формы»);
  • применение скриптов;
  • размещение ссылок, указывающих на другие окна и фреймы (нельзя использовать атрибут 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

    5 / 679


879

Эта статья находится в разделах:

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

Свернуть