Наверх

Фреймы в HTML

Фрейм — это область страницы, в которой отображается отдельный, зачастую сторонний HTML-документ. То есть страница с фреймами — это страница, разделённая на области, каждая из которых, в свою очередь, отображает отдельную HTML-страницу, которая может быть не связана с соседними ни оформлением, ни контентом.

Пример простого фрейма

Раньше для создания фреймов обязательно нужно было делать отдельную фрейм-страницу и подключать к ней страницы содержания. Для этого использовались теги <frameset> и <frame>.

Однако язык HTML эволюционировал, и в последней, пятой редакции все теги, кроме одного, были упразднены.

Современные фреймы создаются исключительно с помощью тега <iframe>, для оформления которого используются CSS-стили.

Практическое использование <iframe> изображено на рисунке ниже. На странице index.html расположен фрейм, в котором отображается содержимое документа gallery.html.

Практическое использование фрейма

Добавить фрейм на страницу очень легко. Например, фрейм на рисунке был вставлен с помощью следующего кода:


 

<iframe src="gallery.html" width="500" height="300"> Ваш браузер не поддерживает плавающие фреймы! </iframe>

Разберём его.

<iframe> — тег фрейма. Он парный, закрывать обязательно. Текст внутри отобразится в том случае, если браузер не поддерживает фреймы.

src — атрибут, значением которого является ссылка на отображающийся во фрейме документ.

width — ширина (указывается в пикселях или процентах).

height — длина (задаётся аналогично).

Также кроме перечисленных и общих свойств тегу <iframe> доступны следующие атрибуты.

sandbox. Позволяет установить ограничения на загружаемый во фрейм контент, а именно блокировать скрипты, формы и всплывающие окна, повышая тем самым безопасность элемента.

seamless. Атрибут без значения, указывающий, что содержимое фрейма не должно выделяться, оно будет отображаться, как часть основного документа.

srcdoc. В этом атрибуте хранится содержимое фрейма, при его наличии свойство src игнорируется.

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

You must have Javascript enabled to use this form.