Автор статьи: 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>
Ниже приводится ряд атрибутов, которые работают в 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>). И после того, как пользователь кликнет по соответствующей ссылке, в указанном фрейме откроется необходимый документ взамен текущего.
Попробуйте сделать это сами. Наберите в браузере следующий код:
<p> Это мой фрейм </p>
</iframe>
<p>После нажатия <a href="http://webknowledge.ru/" target="myIframe">этой ссылки</a>
в окне фрейма откроется новый документ</p>
В том случае, если документ, открытый в окне встроенного фрейма не содержит элементов с атрибутом target, то любые новые документы, на которые ведут ссылки с загруженной страницы, будут открываться в том же фрейме в качестве родительского документа. Используя такой способ, вы с легкостью можете при помощи ссылок, размещенных в одном встроенном фрейме, менять содержимое другого фрейма на этой же странице.
Встроенные фреймы и безопасность
Сам по себе встроенный фрейм (элемент <iframe>) не представляет никакой опасности для вас и/или посетителей вашего ресурса. Но он обладает плохой репутацией, по той причине, что именно встроенные фреймы очень часто используются на недобросовестных сайтах с целью заражения компьютера пользователя. При этом посетители просто не замечают присутствие фрейма на странице. Это реализуется с помощью ссылок, ведущих на скрытый, невидимый фрейм, содержащий скрипты, которые запускают вредоносный код. Щелкая по ссылке, пользователь не замечает никаких видимых последствий и просто думает, что ссылка не работает, но скрипт активируется в скрытом от пользователя месте.
Существуют также разновидности компьютерных вирусов, которые могут внедрить на вашу веб-страницу скрытый iframe, делая, таким образом, ваш ресурс частью «ботнета» (*компьютерная сеть, в составе которой находится определенное количество хостов с запущенными вредоносными автономными программами-ботами). Существуют и другие способы вирусных атак, такие как SQL injection – запуск вирусных программ посредством SQL запроса к базе данных на сервере и т.д.
Используя на своей веб-странице встроенный фрейм, необходимо всегда помнить о том, что безопасность пользователей, посещающих вашу страницу, целиком и полностью зависит от содержимого всех сайтов, на которые ведут ссылки с вашего ресурса. Если у вас есть причины сомневаться в порядочности определенного сайта, никогда и ни в каком виде не ссылайтесь на него, а тем более не используйте его контент во встроенных фреймах. В то же время ссылки на страницы вашего сайта с чужих встроенных фреймов не подвергают опасности ваш ресурс, а соответственно и ваших посетителей.