Фреймы в html
Окно браузера может быть разделено на фреймы, т.е. на области расположенные рядом друг с другом. В каждую из этих областей можно загружать свои html-страницы. На примере будет понятнее, создайте новый файл с названием index.html со следующим кодом:
Фреймы в html
В окне браузера это будет выглядеть так:
Окно браузера разделено на 3 части. Надо сказать, что это единственный случай, когда в html-документе отсутствуют теги . Вместо них используются теги , которые и указывают браузеру разбить окно на несколько областей — фреймов.
Сколько будет таких областей и как они будут расположены зависит от двух параметров тега :
-
rows — указывает разбить окно на горизонтальные области. Причем, сколько значений у этого параметра, столько и областей. В нашем примере rows=»30%, 10%, 60%» , т.е. три горизонтальные области: ширина первой — 30% от ширины экрана, ширина второй — 10%, а третьей — 60%.
Внутри тегов располагаются одиночные теги , причем их должно быть столько, сколько задано областей. Без параметров эти теги бесполезны.
Мы рассмотрим параметры тега на примерах.
-
src — самый главный параметр, он определяет адрес той html-страницы или картинки, которая будет загружаться во фрейм.
Давайте определим этот параметр для наших фреймов в примере. Для этого создайте три обычные html-страницы:
top.html со следующим кодом:
Как вставить фрейм в html
Тег определяет свойства отдельного фрейма, на которые делится окно браузера. Этот элемент должен располагаться в контейнере , который к тому же задает способ разметки страницы на отдельные области. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью атрибута src . Хотя обязательных атрибутов у тега и нет, рекомендуется задавать каждому фрейму его имя через атрибут name . Это особенно важно, если требуется по ссылке из одного фрейма загружать документ в другой.
Синтаксис
Атрибуты
bordercolor Цвет линии границы. frameborder Отображать рамку вокруг фрейма или нет. name Задает уникальное имя фрейма. noresize Определяет, можно изменять размер фрейма пользователю или нет. scrolling Способ отображения полосы прокрутки во фрейме. src Путь к файлу, предназначенному для загрузки во фрейме.
Закрывающий тег
HTML 4.01 IE Cr Op Sa Fx
Создание фреймов
Несмотря на то, что сайты с фреймами встречаются все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. К тому же фреймы в каком-то смысле заняли свою нишу и применяются для систем администрирования и справки. Там, где недостатки фреймов не имеют особого значения, а преимущества наоборот, активно востребованы.
Для создания фрейма используется тег , который заменяет тег в документе и применяется для разделения экрана на области. Внутри данного тега находятся теги , которые указывают на HTML-документ, предназначенный для загрузки в область (рис. 13.1).
Рис. 13.1. Пример разделения окна браузера на два фрейма
При использовании фреймов необходимо как минимум три HTML-файла: первый определяет фреймовую структуру и делит окно браузера на две части, а оставшиеся два документа загружаются в заданные окна. Количество фреймов не обязательно равно двум, может быть и больше, но никак не меньше двух, иначе вообще теряется смысл применения фреймов.
Рассмотрим этапы создания фреймов на основе страницы, продемонстрированной на рис. 13.1. Нам понадобится три файла: index.html — определяет структуру документа, menu.html — загружается в левый фрейм и content.html — загружается в правый фрейм. Из них только index.html отличается по структуре своего кода от других файлов (пример 13.1).
Пример 13.1. Файл index.html
Фреймы
В случае использования фреймов в первой строке кода пишется следующий тип документа.
Данный указывает браузеру, что он имеет дело с фреймами, эта строка кода является обязательной. Контейнер содержит типовую информацию вроде кодировки страницы и заголовка документа. Вот только учтите, что заголовок остается неизменным, пока HTML-файлы открываются внутри фреймов.
В данном примере окно браузера разбивается на две колонки с помощью атрибута cols , левая колонка занимает 100 пикселов, а правая — оставшееся пространство, заданное символом звездочки. Ширину или высоту фреймов можно также задавать в процентном отношении, наподобие таблиц.
В теге задается имя HTML-файла, загружаемого в указанную область с помощью атрибута src . В левое окно будет загружен файл, названный menu.html (пример 13.2), а в правое — content.html (пример 13.3). Каждому фрейму желательно задать его уникальное имя, чтобы документы можно было загружать в указанное окно с помощью атрибута name .
Пример 13.2. Файл menu.html
Навигация по сайту МЕНЮ
В данном примере серый фон на странице задается с помощью стилей, о которых речь пойдет далее.
Пример 13.3. Файл content.html
Содержание сайта СОДЕРЖАНИЕ
Рассмотрим более сложный пример уже с тремя фреймами (рис. 13.2).
Рис. 13.2. Разделение страницы на три фрейма
В данном случае опять используется тег , но два раза, причем один тег вкладывается в другой. Горизонтальное разбиение создается через атрибут rows , где для разнообразия применяется процентная запись (пример 13.4).
Пример 13.4. Три фрейма
Как видно из данного примера, контейнер с атрибутом rows вначале создает два горизонтальных фрейма, но вместо второго фрейма подставляется еще один , который повторяет уже известную вам структуру из примера 13.1. Чтобы не появилась вертикальная полоса прокрутки, и пользователь не мог самостоятельно изменить размер верхнего фрейма, добавлены атрибуты scrolling=»no» и noresize .
Как вставить фрейм в html
Тег (от англ. inline frame — встроенная рамка) создаёт встроенный фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.
.
Демо¶
Изображения и мультимедиа
Синтаксис¶
iframe>. iframe> Закрывающий тег обязателен.
Атрибуты¶
Определяет политику элемента
Разрешает для фрейма полноэкранный режим. Этот атрибут считается устаревшим атрибутом и переопределяется как allow=»fullscreen» .
Установите в значение true , если нужно разрежить вызывать функции API платежей. Этот атрибут считается устаревшим атрибутом и переопределяется как allow=»payment» .
Указывает, какой реферер отправить при получении ресурса фрейма
Позволяет задать ряд ограничений на контент загружаемый во фрейме.
Способ отображения полосы прокрутки во фрейме.
Определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа.
Путь к файлу, содержимое которого будет загружаться во фрейм.
Хранит содержимое фрейма непосредственно в атрибуте.
allowfullscreen¶
Атрибут allowfullscreen разрешает для фрейма полноэкранный режим.
Синтаксис
iframe allowfullscreen>iframe> Значения
Значение по умолчанию
По умолчанию этот атрибут выключен.
height¶
Для изменения размеров фрейма средствами HTML предусмотрены атрибуты width и height . Допускается использовать значения в пикселях или процентах. Если установлена процентная запись, то размеры фрейма вычисляются относительно родительского элемента — контейнера, где находится элемент . В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width=»100%» означает, что фрейм будет занимать всю ширину веб-страницы.
Если значение высоты или ширины не заданы, то фрейм автоматически принимает размер 300х150 пикселей.
Синтаксис
iframe height="">iframe> Значения
Любое целое положительное число в пикселях или процентах.
Значение по умолчанию
width — 300 пикселей, height — 150 пикселей.
name¶
В обычном HTML-документе при переходе по ссылке в окне браузера текущий документ заменяется новым. Чтобы направить содержимое во фрейм, он должен иметь уникальное имя, задаваемое атрибутом name . В этом случае при создании ссылки у требуется указать атрибут target , в качестве значения которого выступает имя фрейма.
Синтаксис
iframe name="">. iframe> Значения
Для указания имени используется набор символов, включая числа и буквы. При обращении к фрейму по имени соблюдайте то же написание, что и в атрибуте name .
Значение по умолчанию
sandbox¶
Атрибут sandbox позволяет установить ряд ограничений на контент, загружаемый во фрейме, к примеру, блокировать формы и скрипты. Это позволяет повысить безопасность текущего документа, особенно в том случае, когда во фрейм загружается документ из непроверенного источника.
Синтаксис
1 2 3 4
iframe src="URL" sandbox="allow-same-origin || allow-top-navigation || allow-forms || allow-scripts" >iframe> Значения
Позволяет содержимому фрейма отправлять формы.
Разрешает открытие модальных окон, вроде тех, которые делаются с помощью функции alert в JavaScript.
Позволяет отключать возможность блокировки экрана.
Позволяет фрейму использовать Pointer Lock API.
Разрешает всплывающие окна (такие как window.open , target=»_blank» , showModalDialog ).
Разрешает фрейму использовать Presentation API.
Разрешает загружать содержание фрейма, воспринимая его из того же источника, что и родительский документ. Может использоваться для безопасного открытия контента, блокируя при этом всплывающие окна.
Разрешает запуск и выполнение скриптов. Создание всплывающих окон при этом запрещено.
Позволяет открывать ссылки фрейма в родительском документе.
Допустимо писать несколько значений в любом порядке через пробел. Если указано пустое значение, то устанавливаются все возможные ограничения.
При одновременном использовании значений allow-scripts и allow-same-origin , когда исходный и загружаемый документ одного происхождения, атрибут sandbox игнорируется.
Значение по умолчанию
scrolling¶
Если содержимое фрейма не помещается в отведённые размеры, автоматически появляются полосы прокрутки для просмотра информации. В некоторых случаях, полосы прокрутки нарушают дизайн веб-страницы, поэтому от них можно отказаться. Для управления отображением полос прокрутки используется атрибут scrolling .
Синтаксис
iframe scrolling="auto | no | yes">. iframe> Значения
- auto — Полосы прокрутки добавляются браузером только по необходимости, в том случае, когда содержимое фрейма превышает его видимую часть.
- no — Запрещает отображение полос прокрутки.
- yes — Всегда вызывает появление полос прокрутки, независимо от объёма информации.
Значение по умолчанию
seamless¶
Устанавливает, что содержимое фрейма должно отображаться так, словно оно является частью документа. При этом соблюдается ряд условий:
- игнорируется атрибут sandbox , если содержимое фрейма и родительского документа взяты из одного источника;
- ссылки во фрейме открываются не внутри фрейма, а в текущем документе;
- стили родительского документа применяются и к содержимому фрейма;
- фрейм считается блочным элементом, у которого ширина задана как auto ;
- высота формируется автоматически на основе содержимого.
Синтаксис
iframe seamless>iframe> Значения
Значение по умолчанию
По умолчанию этот атрибут выключен.
src¶
Указывает адрес файла, который будет загружаться во фрейм. Это может быть HTML-документ, изображение или серверная программа. Допустимо использовать не только путь к файлу, но также имя функции JavaScript, которое возвращает значение.
Синтаксис
iframe src="">. iframe> Значения
В качестве значения принимается полный или относительный путь к файлу.
Значение по умолчанию
srcdoc¶
Синтаксис
iframe srcdoc="">. iframe> Значения
HTML-код содержимого, включая необходимые теги.
Значение по умолчанию
width¶
Для изменения размеров фрейма средствами HTML предусмотрены атрибуты width и height . Допускается использовать значения в пикселях или процентах. Если установлена процентная запись, то размеры фрейма вычисляются относительно родительского элемента — контейнера, где находится элемент . В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width=»100%» означает, что фрейм будет занимать всю ширину веб-страницы.
Если значение высоты или ширины не заданы, то фрейм автоматически принимает размер 300х150 пикселей.
Синтаксис
iframe height="">iframe> Значения
Любое целое положительное число в пикселях или процентах.
Значение по умолчанию
width — 300 пикселей, height — 150 пикселей.
Спецификации¶
- Referrer Policy
- WHATWG HTML Living Standard
- HTML5
- HTML 4.01 Specification
- Screen Orientation API
- Presentation API
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
html> head> meta charset="utf-8" /> title>IFRAMEtitle> head> body> iframe src="page/banner.html" width="468" height="60" align="left" > Ваш браузер не поддерживает встроенные фреймы! iframe> body> html>