Тег <frame> создаёт одно окно внутри <frameset>: в окне загружается отдельный документ со своим адресом. Он одиночный, закрывающий тег не нужен. Обязательных атрибутов у него нет, даже src можно не писать. Стандарт HTML запрещает тег и советует брать iframe и CSS.
<frameset cols="30%,*">
<frame name="menu" src="menu.html">
<frame name="main" src="main.html">
</frameset>В этой статье
Что делает тег frame в HTML
Каждый тег frame открывает своё окно, и в нём можно загрузить другую страницу. Окон в документе столько, сколько тегов frame. Для него в DOM используется тип HTMLFrameElement, на странице он показывается как блок.
Теги frame работают только внутри <frameset>. Этот тег заменяет <body>: в документе с окнами обычного тела нет, а document.body возвращает сам frameset. Как делить экран на столбцы и строки, написано на странице про frameset, а запасной текст для браузеров без окон описан на странице про noframes.
Пример: документ с body и документ с frameset
Кнопки выбирают, как устроен документ. Под рамкой записаны тело документа, число тегов frame и число окон.
В обычном документе окон нет. В документе с frameset вместо body стоит frameset, а окон два. Текст в окнах дают загруженные в них документы, в самом теге frame его нет.
Атрибуты frame: обязательных нет
Обязательных атрибутов у frame нет. Тег без записи src создаёт пустое окно about:blank, и оно работает так же, как окно с адресом. Все остальные атрибуты задают поведение окна.
| Атрибут | Что задаёт | Значения |
|---|---|---|
src | Адрес документа в окне | Любой адрес |
name | Имя окна для атрибута target у ссылок | Любое имя |
noresize | Запрещает тянуть границу между окнами | Пишется без значения |
scrolling | Полосы прокрутки в окне | yes, no, auto |
marginwidth | Отступы слева и справа внутри окна | Число пикселей |
marginheight | Отступы сверху и снизу внутри окна | Число пикселей |
frameborder | Рамка между окнами, действует у frameset | 0 или 1 |
Пример: noresize, scrolling и marginwidth
Кнопки задают атрибуты левого окна, границу между окнами можно тянуть мышью. Под рамкой записаны ширина левого окна, ширина полосы прокрутки и левый отступ.
Без noresize граница двигается и ширина левого окна меняется, с noresize остаётся прежней. Значение no у scrolling убирает полосу у длинного текста, а marginwidth меняет левый отступ документа с 8px на заданный. Остальные значения таблицы здесь не показаны.
Рамка между окнами: frameborder, border и framespacing
По умолчанию между окнами остаётся зазор в 6px. Атрибут frameborder пишется у <frameset>, а у отдельного frame он обычно ничего не меняет. Ширину зазора задаёт border у frameset. Атрибут framespacing зазор обычно не меняет.
<frameset cols="50%,50%" border="0">
<frame src="a.html">
<frame src="b.html">
</frameset>Пример: какая запись меняет зазор
Кнопки выбирают запись. Под рамкой записан зазор между окнами и сказано, изменила ли его запись.
Зазор убирают frameborder=0 и border=0 у frameset, а border=20 увеличивает его до 20px. Записи frameborder=0 у frame и framespacing=30 зазор обычно не трогают. У таблицы есть свой атрибут frame, он про линии вокруг таблицы и описан в таблице атрибутов table, с тегом frame его связывает только название.
Атрибут name и ссылки с target
Атрибут name даёт окну имя. Ссылка с target="имя" загружает документ в окно с таким именем, а ссылка без target открывается в том же окне, где она стоит. Адрес документа с окнами остаётся прежним. Про target и значения _blank, _self, _parent, _top написано на странице тега a.
<a href="page.html" target="main">Страница</a>Пример: ссылка с target и без него
Кнопки нажимают ссылку в левом окне. Под рамкой записано, что открыто в каждом окне и изменился ли адрес документа.
Ссылка с target меняет правое окно, а ссылка без него меняет левое, где нажата. Те же правила действуют для атрибута name у iframe, а в уроке «Ссылки: тег a и его атрибуты» разобраны сами ссылки.
Почему frame вне frameset не работает
Тег frame нельзя писать в обычном теле страницы: браузер его убирает. Тег frameset тоже убирается, если перед ним стоит текст или тег body, даже пустой. Работает только документ, где frameset стоит сразу после head, без body.
<head>
<title>Окна</title>
</head>
<frameset cols="50%,50%">
<frame src="a.html">
<frame src="b.html">
</frameset>Пример: какую разметку сохраняет браузер
Кнопки выбирают разметку. Под рамкой записано, сколько тегов осталось после разбора и какое у документа тело.
Если после разбора тегов не осталось, окон нет, а страница остаётся обычной. Ошибки при этом не появляется: браузер молча выбрасывает теги, поэтому проблему легко не заметить.
Чем заменить тег frame: iframe и CSS grid
Окно заменяет тег iframe, а раскладку на столбцы строит CSS grid. Окно iframe стоит в обычной странице, поэтому у документа остаётся обычное тело, а ссылки с target работают так же.
<div class="layout">
<iframe name="menu" src="menu.html"></iframe>
<iframe name="main" src="main.html"></iframe>
</div>.layout {
display: grid;
grid-template-columns: 30% 1fr;
}Пример: frameset и frame рядом с iframe и grid
Кнопки выбирают способ. Под рамкой записаны ширины окон и то, что открыла ссылка с target.
Раскладка получается такой же, и ссылка открывает документ в нужное окно. Проверка в Nu Html Checker для <frame> сообщает: The “frame” element is obsolete. Use the “iframe” element and CSS instead, or use server-side includes. Такой же совет дан для <frameset>. Ещё устаревшие теги: tt, big и strike.
