Слово фрейм (от англ. frame — рамка) означает отдельную область рабочего пространства. В веб-разработке термин фрейм чаще всего подразумевает тег <iframe>, который встраивает сторонний контент на текущую веб-страницу. В дизайне интерфейсов, особенно в программе Figma, фрейм представляет собой умный контейнер для макетов, поддерживающий сетки и автолейауты.
Устаревшие теги <frame> и <frameset> HTML5 не поддерживает. Современные браузеры отображают их как fallback. Содержимое фрейма загружается по собственному атрибуту src, при этом адресная строка всегда показывает URL родительского проекта. Понимание разницы между этими технологиями — базовое знание для любого digital-специалиста.
- Фреймы в HTML: история и современный стандарт iframe
- Как создать и настроить iframe
- Безопасность, производительность и SEO
- Фреймы в Figma: инструмент для дизайна
- Примеры устаревших фреймов
- FAQ по фреймам
Фреймы в HTML: история и современный стандарт iframe
Схематично разделение экрана старыми методами выглядит так:
Исторически в программировании разработчики применяли <frameset> вместо <body>. Это позволяло держать меню статичным, пока обновлялась соседняя часть экрана. Код выглядел следующим образом:
<frameset rows="80,*" cols="*">
<frame src="top.html" name="topFrame" scrolling="no" noresize>
<frameset cols="80,*">
<frame src="left.html" name="leftFrame" scrolling="no" noresize>
<frame src="main.html" name="mainFrame">
</frameset>
</frameset>
Обратите внимание: <frame> — пустой элемент, закрывать его не нужно. А вот <frameset> требует закрывающего тега.
<frameset> <frame> </frameset>
Сегодня применение фреймов старого формата ведет к критическим ошибкам индексации и проблемам с юзабилити. На смену пришел <iframe>.
Сравнение устаревших HTML-фреймов и современного тега iframe:
- Поддержка HTML5: старые теги не поддерживаются, iframe полностью стандартизирован.
- Влияние на SEO: frameset ломает индексацию, iframe обрабатывается поисковиками корректно.
- Адаптивность: старые рамки сложно стилизовать, новый тег легко адаптируется через CSS.
- Безопасность: iframe имеет встроенную защиту через атрибут sandbox.
Как создать и настроить iframe
Современный фрейм создаём с помощью одинарного тега <iframe>. Этот бесплатный инструмент позволяет безопасно выводить данные из других источников: видео, интерактивные карты, формы оплаты и виджеты.
<iframe src="https://example.ru" title="Описание виджета" width="100%" height="500" loading="lazy" sandbox="allow-scripts"></iframe>
Базовые атрибуты для работы:
- src: ссылка на нужный документ или приложение.
- width и height: размеры фрейма в пикселях или процентах.
- title: текстовое описание. Помогает пользователям скринридеров понять, что находится внутри фрейма.
- loading="lazy": отложенная загрузка. Ускоряет время отображения основной страницы.
- sandbox: настройка безопасности. Ограничивает возможности встроенного скрипта.
Чтобы сделать интерфейс адаптивным под любое устройство, необходимо обернуть элемент в дополнительный контейнер и задать пропорции через CSS-свойство aspect-ratio.
Безопасность, производительность и SEO
Миф о том, что фреймы убивают SEO, касается только старых тегов. Поисковые системы корректно обрабатывают <iframe>. Контент внутри фрейма индексируется и приписывается источнику, указанному в src. Ссылочный вес родительской странице не передается.
Для защиты проектов необходимо соблюдать правила безопасности:
- Используйте атрибут sandbox. Он блокирует выполнение потенциально опасного кода во фреймах.
- Настраивайте заголовки X-Frame-Options или директивы Content-Security-Policy (CSP). Это предотвращает атаки типа Clickjacking.
- Следите за скоростью. Большое количество объектов внутри фреймов замедляет рендеринг. Применяйте ленивую загрузку.
%201.png)
Фреймы в Figma: инструмент для дизайна
В дизайне интерфейсов термин фрейм имеет другое значение. Проходя обучение на курсе по UI/UX, дизайнер первым делом изучает этот элемент. В Фигма фреймы — это основа макета. Вызвать инструмент можно горячей клавишей F или выбрать соответствующий пункт через верхнее меню.
Фреймы в дизайне обладают собственными свойствами. Они позволяют задавать сетки (Layout Grid), управлять поведением элементов при изменении размера (Constraints) и выстраивать автоматическую структуру (Auto Layout).
Частая ошибка новичков — путать фреймы и группы. Разберем ключевые отличия.
%201.png)
%201.png)
%201.png)
%201.png)
%201.png)
Отличия Frame и Group:
- Границы: у группы определяются размером содержимого, у фрейма задаются вручную и могут обрезать контент (Clip content).
- Сетки и Auto Layout: группа их не поддерживает, фрейму доступны все настройки.
- Применение: группа нужна для быстрого объединения объектов, фрейм позволяет создавать экраны, кнопки и сложные компоненты.
Любой новый проект начинается с создания фрейма нужного размера под конкретное устройство. На панели слоев он имеет специальную иконку.
Примеры устаревших фреймов
Найти сайты, использующие классический frame в 2026 году, сложно. Вот пара исторических примеров:
На старой HTML-странице структура могла выглядеть так:
Подобный вид интерфейса часто встречался в справочных ресурсах предыдущих версий Windows:
Еще один пример разделения на независимые документы:
FAQ по фреймам
Как передавать данные между родительским окном и iframe?
Для безопасного обмена информацией используется метод window.postMessage. Он позволяет скриптам на разных доменах взаимодействовать без нарушения политики одинакового источника (CORS).
Почему возникает ошибка Refused to display in a frame?
Сервер источника запретил встраивание своего контента на сторонних ресурсах с помощью заголовка X-Frame-Options. Потребуется изменить настройки сервера или использовать разрешенные API.
Можно ли стилизовать содержимое iframe через CSS родителя?
Нет, если контент загружается с другого домена. Стили родительской веб-страницы не проникают внутрь фрейма из-за строгих ограничений безопасности.
.png)
.png)
.png)
Комментарии
Комментариев пока нет. Будьте первым!
Оставить комментарий