Тег IFRAME

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

Тег IFRAME является контейнером, содержание которого игнорируется браузерами, не поддерживающих данный тег. Для таких браузеров можно указать альтернативный текст, который увидят пользователи. Он должен располагаться между элементами <iframe> и <iframe>.

Синтаксис
<iframe ...>... </iframe>

Закрывающий тег
Обязателен.

Параметры
align — определяет как фрейм будет выравниваться по краю, а также способ обтекания его текстом.
frameborder — отображать границу вокруг фрейма или нет.
height — высота фрейма.
hspace — горизонтальный отступ от фрейма до окружающего контента.
name — имя фрейма.
scrolling — способ отображения полосы прокрутки во фрейме.
src — путь к файлу, содержимое которого будет загружаться во фрейм.
vspace — вертикальный отступ от фрейма до окружающего контента.
width — ширина фрейма.

Пример 1. Использование тега IFRAME

<html>
<body>

<iframe src=banner.html width=468 height=60 hspace=10 vspace=10 align=center>
Ваш браузер не поддерживает плавающие фреймы!
</iframe>

</body>
</html>


Описание параметров тега IFRAME

Параметр ALIGN

Описание
Для плавающего фрейма можно указать его положение на веб-странице или задать способ обтекания текстом или другими элементами веб-страницы. Способ выравнивания задается параметром align тега iframe.

Синтаксис
<iframe align=absmiddle | baseline | bottom | left | middle | right | texttop | top>...</iframe>

Аргументы
В таблице 1 перечислены возможные значение параметра align и результат его использования.

Таблица 1. Использование значений параметра align
Код HTML Описание
<iframe src=sample.gif align=absmiddle> Выравнивание середины фрейма по середине текущей строки.
<iframe src=sample.gif align=baseline> Выравнивание фрейма по базовой линии текущей строки.
<iframe src=sample.gif align=bottom> Выравнивание нижней границы фрейма по окружающему тексту.
<iframe src=sample.gif align=left> Выравнивает фрейм по левому краю окна.
<iframe src=sample.gif align=middle> Выравнивание середины фрейма по базовой линии текущей строки.
<iframe src=sample.gif align=right> Выравнивает фрейм по правому краю окна.
<iframe src=sample.gif align=texttop> Верхняя граница фрейма выравнивается по самому высокому текстовому элементу текущей строки.
<iframe src=sample.gif align=top> Верхняя граница фрейма выравнивается по самому высокому элементу текущей строки.

Наиболее популярные параметры — left и right, создающие обтекание текста вокруг фрейма. Чтобы текст не прилегал плотно к содержимому фрейма, рекомендуется в теге iframe добавить параметр hspace и vspace, задающих расстояние до текста в пикселах.

Значение по умолчанию
bottom

Пример 2. Выравнивание плавающего фрейма

<html>
<body>
<iframe src=square.html width=220 height=20 align=right></iframe> Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

</body>
</html>


Параметр FRAMEBORDER

Описание
По умолчанию вокруг содержимого фрейма рисуется рамка с эффектом трехмерности. Чтобы ее скрыть применяется параметр frameborder. Чтобы показать простую рамку вокруг фрейма воспользуйтесь стилями.

Синтаксис
<iframe frameborder=yes | no>...</iframe>
<iframe frameborder=0 | 1> ...</iframe>

Аргументы
yes или 1 — отображает рамку вокруг фрейма.
no или 0 — скрывает рамку вокруг фрейма.

Значение по умолчанию
1

Пример 3. Убираем рамку вокруг фрейма

<html>
<body>
<iframe src=sample.html width=340 height=50 frameborder=0 style="border: 2px solid black"></iframe>
</body>
</html>


Параметр HEIGHT и WIDTH

Описание
Для изменения размеров фрейма средствами HTML предусмотрены параметры width и height. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры фрейма вычисляются относительно родительского элемента — контейнера, где находится тег iframe. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width=100% означает, что фрейм будет занимать всю ширину веб-страницы.

Если значение высоты или ширины не заданы, то фрейм автоматически принимает размер 300 х 150 пикселов.

Синтаксис
<iframe height=высота>...</iframe>
<iframe width=ширина>...</iframe>

Аргументы
Любое целое положительное число в пикселах или процентах.

Значение по умолчанию
width — 300 пикселов, height — 150 пикселов.

Пример 4. Изменение размеров фрейма

<html>
<body>
<iframe src=sample.html width=150 height=150></iframe>
</body>
</html>


Параметр HSPACE и VSPACE

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

Синтаксис
<iframe hspace=поля по горизонтали>...</iframe>
<iframe vspace=поля по вертикали>...</iframe>

Аргументы
Любое целое положительное число в пикселах.

Значение по умолчанию
0

Пример 5. Отступы вокруг фрейма

<html>
<body>
<iframe src=sample.html width=150 height=150 hspace=5 vspace=7></iframe>
</body>
</html>


Параметр NAME

Описание
В обычном HTML-документе при переходе по ссылке, в окне браузера текущий документ заменяется новым. Чтобы направить содержимое во фрейм, он должен иметь уникальное имя, задаваемое атрибутом name. В этом случае при создании ссылки у тега A требуется указать параметр target, в качестве значения которого выступает имя фрейма.

Синтаксис
<iframe name=имя>...</iframe>

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

Значение по умолчанию
Нет.

Пример 6. Использование имени фрейма

<html>
<body>
<iframe name=hero src=0.html width=600 height=100 hspace=5 vspace=5 align=center>
</iframe>

<p><a href=1.html target=hero>Чебурашка</a><br>
<a href=2.html target=hero>Крокодил Гена</a><br>
<a href=3.html target=hero>Шапокляк</a>

</body>
</html>


Параметр SCROLLING

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

Синтаксис
<iframe scrolling=auto | no | yes>...</iframe>

Аргументы
auto — полосы прокрутки добавляются браузером только по необходимости, в том случае, когда содержимое фрейма превышает его видимую часть.
no — запрещает отображение полос прокрутки.
yes — всегда вызывает появление полос прокрутки, независимо от объема информации.

Значение по умолчанию
auto

Пример 7. Скрытие полос прокрутки во фрейме

<html>
<body>
<iframe src=sample.html width=150 height=450 scrolling=no></iframe>
</body>
</html>


Параметр SRC

Описание
Указывает адрес файла (URL), который будет загружаться во фрейм. Это может быть HTML-документ, изображение или серверная программа. Допустимо использовать не только путь к файлу, но также имя функции JavaScript, которое возвращает значение.

Синтаксис
<iframe src=URL>...</iframe>

Аргументы
В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию
Нет.

Пример 8. Путь к файлу

<html>
<body>
<iframe src=/source/sample.html width=450 height=450>
</body>
</html>

Материал взят с сайта htmlbook.ru