Фреймы
Фреймы — это HTML-элементы, позволяющие разделить окно веб-браузера на несколько независимых окон, в каждое из которых можно загрузить отдельный HTML-документ. Каждое такое окно (фрейм) может иметь собственные полосы прокрутки и функционировать независимо от других независимых окон либо наоборот управлять их содержанием. Они могут применяться для организации постоянно находящегося в одном окне меню, в то время как в другом окне располагается непосредственно сама информация. Пользователи могут обращаться к меню в любой момент, и им не нужно возвращаться к предыдущей странице, чтобы выбрать другой пункт меню. Применение фреймов позволит вам «закрепить» в окне браузера изображения или другие неподвижные по замыслу элементы интерфейса, в то время как остальная часть страницы будет прокручиваться во фрейме.
Однако, стоит отметить, что в наши дни фреймы считаются устаревшим средством, а сайты с фреймами теперь считаются несолидными, так как профессиональные веб-мастера никогда не используют фреймы в своих проектах. С фреймами связан целый ряд печально известных проблем. Они, например, сбивают с толку поисковые машины, поскольку на страницах, которые содержат контент, нет ссылок на другие документы. Если вы хотите получать посетителей с поисковых систем, забудьте о фреймах. Понравившуюся страницу пользователю невозможно поместить в раздел закладки браузера, так как фреймы скрывают адрес страницы, на которой он находится, и всегда показывают только адрес веб-сайта. По этой причине они создают проблемы для браузеров при отслеживании хронологии и еще они не слишком приспособлены для разных размеров экранов и мобильных устройств.
Несмотря на то, что проекты с фреймами встречаются во всемирной паутине все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. У фреймов наряду с недостатками есть и некоторые достоинства, которые не позволяют отбросить эту технологию как бесперспективную.
Создание фреймов
Структура HTML-документа с фреймами внешне очень напоминает формат обычного HTML-документа. Как и в обычном HTML-документе, весь код помещен между парными тегами и , а в контейнере располагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа — у документа с фреймами вместо тега применяется парный тег (от англ. frame set – набор фреймов).
В следующем примере приведена структура HTML-документа с фреймами:
Пример: Структура HTML-документа с фреймами
- rows — описывает разбиение страницы на строки:
- cols — описывает разбиение страницы на столбцы:
В значении атрибутов rows и cols необходимо указывать не количество строк или столбцов, а значение ширины и высоты фреймов. Все значения в списке разделяются запятыми. Размеры могут быть указаны в абсолютных единицах (в пикселах) или в процентах:
- cols=»20%, 80%» — окно браузера разбивается на две колонки с помощью атрибута cols, левая колонка занимает 20%, а правая 80% окна браузера.
- rows=»100, *» окно браузера разбивается на два горизонтальных окна с помощью атрибута rows, верхнее окно занимает 100 пикселов, а нижнее — оставшееся пространство, заданное символом звездочки.
Как видно из данного примера, контейнер с атрибутом rows вначале создает два горизонтальных фрейма, а вместо второго фрейма подставляется еще один , который разбивает нижний горизонтальный фрейм на две колонки с помощью атрибута cols, левая колонка занимает занимает 20%, а правая 80% окна браузера.
Если браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами и . Все, что находится между тегами и , игнорируется браузерами, поддерживающими фреймы. Таким образом разработчику нужно написать код, дублирующий содержимое фреймов другими средствами, и поместить этот код в контейнер , тогда все пользователи смогут увидеть его веб-страницу.
Как уже отмечалось, для вставки в документ отдельного фрейма служит непарный тег . Атрибут src задает документ, который должен отображаться внутри данного фрейма, например: . Если атрибут src отсутствует, отображается пустой фрейм.
Границы или пространство между фреймами
По умолчанию, браузер отображает серую и, как правило, в виде трехмерной линии границу между фреймами, с помощью которой посетители могут регулировать размер фрейма.
Границей фрейма можно управлять, как и любыми другими элементами фрейма. Для этого существует несколько атрибутов элемента , позволяющих настраивать границы фреймов. Толщина линии границы определяется атрибутом border. По умолчанию значение толщины границы равно пяти.
Чтобы скрыть границу фрейма, необходимо либо указать значение ширины границы равным нулю, либо присвоить значение «no» или «0» атрибуту frameborder. Атрибут frameborder может принимать только два противоположных значения. Если значение атрибута frameborder равно «yes» или «1», то граница фреймов будет отображаться, а если «0» или «no», то нет. Учтите, что значения атрибута frameborder различаются для разных браузеров. Чтобы решить эту проблему используйте дважды атрибут frameborder, а для некоторых браузеров требуется еще добавить атрибут framespacing со значением «0»:
В следующем примере убираем границу между фреймами:
Фрейм во всю страницу html css
Тег (от англ. inline frame — встроенная рамка) создаёт встроенный фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.
.
Изображения и мультимедиа
Синтаксис¶
Закрывающий тег обязателен.
Атрибуты¶
allow Определяет политику элемента allowfullscreen Разрешает для фрейма полноэкранный режим. Этот атрибут считается устаревшим атрибутом и переопределяется как allow=»fullscreen» . allowpaymentrequest Установите в значение true , если нужно разрежить вызывать функции API платежей. Этот атрибут считается устаревшим атрибутом и переопределяется как allow=»payment» . height Высота фрейма. name Имя фрейма. referrerpolicy Указывает, какой реферер отправить при получении ресурса фрейма sandbox Позволяет задать ряд ограничений на контент загружаемый во фрейме. scrolling Способ отображения полосы прокрутки во фрейме. seamless Определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа. src Путь к файлу, содержимое которого будет загружаться во фрейм. srcdoc Хранит содержимое фрейма непосредственно в атрибуте. width Ширина фрейма.
allowfullscreen¶
Атрибут allowfullscreen разрешает для фрейма полноэкранный режим.
iframe allowfullscreen>iframe> Значение по умолчанию
По умолчанию этот атрибут выключен.
height¶
Для изменения размеров фрейма средствами HTML предусмотрены атрибуты width и height . Допускается использовать значения в пикселях или процентах. Если установлена процентная запись, то размеры фрейма вычисляются относительно родительского элемента — контейнера, где находится элемент . В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width=»100%» означает, что фрейм будет занимать всю ширину веб-страницы.
Если значение высоты или ширины не заданы, то фрейм автоматически принимает размер 300х150 пикселей.
Любое целое положительное число в пикселях или процентах.
Значение по умолчанию
width — 300 пикселей, height — 150 пикселей.
name¶
В обычном HTML-документе при переходе по ссылке в окне браузера текущий документ заменяется новым. Чтобы направить содержимое во фрейм, он должен иметь уникальное имя, задаваемое атрибутом name . В этом случае при создании ссылки у требуется указать атрибут target , в качестве значения которого выступает имя фрейма.
Для указания имени используется набор символов, включая числа и буквы. При обращении к фрейму по имени соблюдайте то же написание, что и в атрибуте name .
Значение по умолчанию
sandbox¶
Атрибут sandbox позволяет установить ряд ограничений на контент, загружаемый во фрейме, к примеру, блокировать формы и скрипты. Это позволяет повысить безопасность текущего документа, особенно в том случае, когда во фрейм загружается документ из непроверенного источника.
iframe src="URL" sandbox="allow-same-origin || allow-top-navigation || allow-forms || allow-scripts" >iframe> allow-forms Позволяет содержимому фрейма отправлять формы. allow-modals Разрешает открытие модальных окон, вроде тех, которые делаются с помощью функции alert в JavaScript. allow-orientation-lock Позволяет отключать возможность блокировки экрана. allow-pointer-lock Позволяет фрейму использовать Pointer Lock API. allow-popups Разрешает всплывающие окна (такие как window.open , target=»_blank» , showModalDialog ). allow-presentation Разрешает фрейму использовать Presentation API. allow-same-origin Разрешает загружать содержание фрейма, воспринимая его из того же источника, что и родительский документ. Может использоваться для безопасного открытия контента, блокируя при этом всплывающие окна. allow-scripts Разрешает запуск и выполнение скриптов. Создание всплывающих окон при этом запрещено. allow-top-navigation Позволяет открывать ссылки фрейма в родительском документе.
Допустимо писать несколько значений в любом порядке через пробел. Если указано пустое значение, то устанавливаются все возможные ограничения.
При одновременном использовании значений allow-scripts и allow-same-origin , когда исходный и загружаемый документ одного происхождения, атрибут sandbox игнорируется.
Значение по умолчанию
scrolling¶
Если содержимое фрейма не помещается в отведённые размеры, автоматически появляются полосы прокрутки для просмотра информации. В некоторых случаях, полосы прокрутки нарушают дизайн веб-страницы, поэтому от них можно отказаться. Для управления отображением полос прокрутки используется атрибут scrolling .
iframe scrolling="auto | no | yes">. iframe> - auto — Полосы прокрутки добавляются браузером только по необходимости, в том случае, когда содержимое фрейма превышает его видимую часть.
- no — Запрещает отображение полос прокрутки.
- yes — Всегда вызывает появление полос прокрутки, независимо от объёма информации.
Значение по умолчанию
seamless¶
Устанавливает, что содержимое фрейма должно отображаться так, словно оно является частью документа. При этом соблюдается ряд условий:
- игнорируется атрибут sandbox , если содержимое фрейма и родительского документа взяты из одного источника;
- ссылки во фрейме открываются не внутри фрейма, а в текущем документе;
- стили родительского документа применяются и к содержимому фрейма;
- фрейм считается блочным элементом, у которого ширина задана как auto ;
- высота формируется автоматически на основе содержимого.
Значение по умолчанию
По умолчанию этот атрибут выключен.
src¶
Указывает адрес файла, который будет загружаться во фрейм. Это может быть HTML-документ, изображение или серверная программа. Допустимо использовать не только путь к файлу, но также имя функции JavaScript, которое возвращает значение.
В качестве значения принимается полный или относительный путь к файлу.
Значение по умолчанию
srcdoc¶
HTML-код содержимого, включая необходимые теги.
Значение по умолчанию
width¶
Для изменения размеров фрейма средствами HTML предусмотрены атрибуты width и height . Допускается использовать значения в пикселях или процентах. Если установлена процентная запись, то размеры фрейма вычисляются относительно родительского элемента — контейнера, где находится элемент . В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width=»100%» означает, что фрейм будет занимать всю ширину веб-страницы.
Если значение высоты или ширины не заданы, то фрейм автоматически принимает размер 300х150 пикселей.
Любое целое положительное число в пикселях или процентах.
Значение по умолчанию
width — 300 пикселей, height — 150 пикселей.
Спецификации¶
Описание и примеры¶
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>