Тег IFRAME
| Браузер | Internet Explorer | Firefox | Mozilla | Opera | Netscape | Safari | |||||||
| Версия | 5.5 | 6.0 | 7.0 | 1.0 | 2.0 | 1.7 | 7.0 | 8.0 | 9.0 | 6.0 | 7.0 | 8.0 | 1.0 |
| Поддержка |  |
|
|
|
|
|
|
|
|
|
|
|
|
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Тег <IFRAME> создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.
Тег <IFRAME> является контейнером, содержание которого игнорируется браузерами, не поддерживающих данный тег. Для таких браузеров можно указать альтернативный текст, который увидят пользователи. Он должен располагаться между элементами <IFRAME> и </IFRAME>.
Синтаксис
Параметры
| align | Задает как фрейм будет выравниваться по краю, а также способ обтекания его текстом. |
| frameborder | Задает, отображать границу вокруг фрейма или нет. |
| height | Высота фрейма. |
| hspace | Горизонтальный отступ от фрейма до окружающего контента. |
| name | Имя фрейма. |
| scrolling | Способ отображения полосы прокрутки во фрейме. |
| src | Путь к файлу, содержимое которого будет загружаться во фрейм. |
| vspace | Вертикальный отступ от фрейма до окружающего контента. |
| width | Ширина фрейма. |
Закрывающий тег
Обязателен.
Пример 1. Использование тега <IFRAME>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример использования тега IFRAME</title>
</head>
<body>
<iframe src="banner.html" width="468" height="60" align="left">
Ваш браузер не поддерживает плавающие фреймы!
</iframe>
</body>
</html>
Описание параметров тега <IFRAME>
Параметр ALIGN
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Для плавающего фрейма можно указать его положение на web-странице или задать способ обтекания текстом или другими элементами web-страницы. Способ выравнивания задается параметром align тега <IFRAME>.
Синтаксис
Аргументы
| absmiddle | Выравнивание середины фрейма по середине текущей строки. |
| baseline | Выравнивание фрейма по базовой линии текущей строки. |
| bottom | Выравнивание нижней границы фрейма по окружающему тексту. |
| left | Выравнивает фрейм по левому краю окна. |
| middle | Выравнивание середины фрейма по базовой линии текущей строки. |
| right | Выравнивает фрейм по правому краю окна. |
| texttop | Верхняя граница фрейма выравнивается по самому высокому текстовому элементу текущей строки. |
| top | Верхняя граница фрейма выравнивается по самому высокому элементу текущей строки. |
Наиболее популярные параметры - left и right, создающие обтекание текста вокруг фрейма. Чтобы текст не прилегал плотно к содержимому фрейма, рекомендуется в теге <IFRAME> добавить параметр hspace и vspace, задающих расстояние до текста в пикселах.
Значение по умолчанию
bottom
Пример 2. Выравнивание плавающего фрейма
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример тега IFRAME, параметр align</title>
</head>
<body>
<iframe src="square.html" width="220" height="20" align="right"></iframe><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
</body>
</html>
Параметр FRAMEBORDER
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
По умолчанию вокруг содержимого фрейма рисуется рамка с эффектом трехмерности. Чтобы ее скрыть применяется параметр frameborder.
Синтаксис
<iframe frameborder="0 | 1"> ...</iframe>
Аргументы
| yes (или 1) | Отображает рамку вокруг фрейма. |
| no (или 0) | Скрывает рамку вокруг фрейма. |
Значение по умолчанию
1
Пример 3. Сокрытие исходной рамки вокруг фрейма
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример тега IFRAME, параметр frameborder</title>
</head>
<body>
<iframe src="sample.html" width="340" height="50" frameborder="0" style="border: 2px solid black"></iframe>
</body>
</html>
Параметр HEIGHT и WIDTH
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Для изменения размеров фрейма средствами HTML предусмотрены параметры width и height. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры фрейма вычисляются относительно родительского элемента - контейнера, где находится тег <IFRAME>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. То есть, width="100%" означает, что фрейм будет занимать всю ширину web-страницы.
Если значение высоты или ширины не заданы, то фрейм автоматически принимает размер 300 х 150 пикселов.
Синтаксис
<iframe width="ширина">...</iframe>
Аргументы
Любое целое положительное число в пикселах или процентах.
Значение по умолчанию
width - 300 пикселов, height - 150 пикселов.
Пример 4. Ширина и высота фрейма
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример тега IFRAME, параметр width</title>
</head>
<body>
<iframe src="sample.html" width="150" height="150"></iframe>
</body>
</html>
Параметр HSPACE и VSPACE
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Для любого фрейма можно задать невидимые отступы по горизонтали и вертикали с помощью, соответственно, параметров hspace и vspace. Особенно это актуально при обтекании содержимого фрейма текстом. В данном случае, чтобы текст не «наезжал» плотно на границу фрейма, необходимо вокруг него добавить пустое пространство.
Синтаксис
<iframe vspace="поля по вертикали">...</iframe>
Аргументы
Любое целое положительное число в пикселах.
Значение по умолчанию
0
Пример 5. Поля вокруг фрейма
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример тега IFRAME, параметр hspace</title>
</head>
<body>
<iframe src="sample.html" width="150" height="150" hspace="5" vspace="7"></iframe>
</body>
</html>
Параметр NAME
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
В обычном HTML-документе при переходе по ссылке, в окне браузера текущий документ заменяется новым. Чтобы направить содержимое во фрейм, он должен иметь уникальное имя, задаваемое атрибутом name. В данном случае при создании ссылки у тега <A> требуется указать параметр target, в качестве значения которого выступает имя фрейма.
Синтаксис
Аргументы
Для указания имени используется набор символов, включая числа и буквы. При обращении к фрейму по имени соблюдайте то же написание, что и в параметре name.
Значение по умолчанию
Нет.
Пример 6. Открытие ссылки во фрейме