IFrames. Возможность включения контента из внешнего источника в ваши веб-страницы с помощью встроенных фреймов.

Автор статьи: Jennifer Kyrnin.     Оригинал: http://webdesign.about.com/od/iframes/a/aaiframe.htm

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

Как использовать iframe.

Элемент страницы <iframe> имеет как глобальные атрибуты HTML5, так и свойственные только ему. Среди них есть четыре атрибута, которыми данный элемент был наделен еще в HTML 4.01:

  • src – определяет источник данных, размещаемых в фрейме.
  • height и width – соответственно высота и ширина окна фрейма.
  • name – имя, присваиваемое окну встроенного фрейма.

А также три новых атрибута, введенных в HTML5:

  • srcdoc – включает HTML разметку, которая отображается в фрейме. Данный атрибут обладает приоритетом над любым источником, указанным в атрибуте src.
  • sandbox – содержит список значений, которые определяют разрешенные или запрещенные функции в окне фрейма.
  • seamless – указывает пользовательскому агенту (браузеру), что встроенный фрейм должен незаметно обрабатываться как часть родительского документа.

Для создания простейшего встроенного фрейма, необходимо указать источник данных URL, а также ширину и высоту окна (width и height):

<iframe src="URL" width="200" height="200">
Текст, выводимый в том случае, если встроенный фрейм не поддерживается браузером.
</iframe>

Ниже приводится ряд атрибутов, которые работают в HTML 4.01, но уже не поддерживаются в HTML5:

  • longdec – рекомендуется применять ссылки (<a>) для привязки к описанию.
  • align – рекомендуется использовать CSS свойство float.
  • allowtransparency – взамен, для придания прозрачности встроенному фрейму, рекомендуется использовать CSS свойство background.
  • frameborder – для этих целей рекомендовано применять CSS свойство border.
  • marginheight – рекомендовано CSS свойство margin.
  • marginwidth – рекомендуется CSS свойство margin.
  • scrolling – взамен рекомендуется использовать CSS свойство overflow.

Поддержка браузерами

Поддержка элемента <iframe> реализована во всех современных браузерах:

  • Android
  • Chrome
  • Firefox
  • Internet Explorer 2+
  • iOS / Safari Mobile
  • Netscape 7+
  • Opera 3+
  • Safari

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

  • Использование CSS свойства overflow для удаления полос прокрутки является не надежным способом. В том случае, если вам всё таки необходимо избавиться от скроллбаров во фрейме, предпочтительнее будет воспользоваться атрибутом scrolling.
  • Тоже касается и атрибутов srcdoc, sandbox
    и seamless — не все браузеры их поддерживают.

Создание связей с элементами iframe

Наделяя ваш встроенный фрейм атрибутом name или id, вы можете обращаться к нему при помощи ссылок, используя атрибут target для элемента ссылки (<a>). И после того, как пользователь кликнет по соответствующей ссылке, в указанном фрейме откроется необходимый документ взамен текущего.

Попробуйте сделать это сами. Наберите в браузере следующий код:

<iframe id="myIframe" src="http://webdesign.about.com/#lp-main" height="200" width="500">
<p> Это мой фрейм </p>
</iframe>
<p>После нажатия <a href="http://webknowledge.ru/" target="myIframe">этой ссылки</a>
в окне фрейма откроется новый документ</p>

В том случае, если документ, открытый в окне встроенного фрейма не содержит элементов с атрибутом target, то любые новые документы, на которые ведут ссылки с загруженной страницы, будут открываться в том же фрейме в качестве родительского документа. Используя такой способ, вы с легкостью можете при помощи ссылок, размещенных в одном встроенном фрейме, менять содержимое другого фрейма на этой же странице.

Встроенные фреймы и безопасность

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

Существуют также разновидности компьютерных вирусов, которые могут внедрить на вашу веб-страницу скрытый iframe, делая, таким образом, ваш ресурс частью «ботнета» (*компьютерная сеть, в составе которой находится определенное количество хостов с запущенными вредоносными автономными программами-ботами). Существуют и другие способы вирусных атак, такие как SQL injection – запуск вирусных программ посредством SQL запроса к базе данных на сервере и т.д.

Используя на своей веб-странице встроенный фрейм, необходимо всегда помнить о том, что безопасность пользователей, посещающих вашу страницу, целиком и полностью зависит от содержимого всех сайтов, на которые ведут ссылки с вашего ресурса. Если у вас есть причины сомневаться в порядочности определенного сайта, никогда и ни в каком виде не ссылайтесь на него, а тем более не используйте его контент во встроенных фреймах. В то же время ссылки на страницы вашего сайта с чужих встроенных фреймов не подвергают опасности ваш ресурс, а соответственно и ваших посетителей.

* Примечание переводчика.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *