Плавающий фрейм
Плавающий фрейм представляет собой встроенную прямоугольную область (окно), в которой может отображаться содержимое любого независимого документа или даже другого веб-сайта в ограниченном пространстве на текущей веб-странице. Фреймы используются, например, для отображения видео с YouTube, для вставки на страницу карт Google, всевозможных рекламных разделов и т.п.
Создаётся такая область с помощью парного тега , причём закрывающий тег является обязательным. Внутри контейнера IFRAME, то есть между открывающим и закрывающим тегами, могут размещаться элементы разметки и какой-то альтернативный текст (см. пример ниже), который будет отображаться на экране в том случае, если браузер не поддерживает фреймы.
src="news.html"> Извините, но Ваш браузер не поддерживает фреймы. Атрибуты элемента
Открывающий тег может содержать собственные и универсальные атрибуты, а также атрибуты событий.
Из собственных атрибутов наиболее важным (хотя и необязательным) является атрибут src (сокр. от англ. source — «источник»), который содержит URL-адрес документа для загрузки во встроенную область. В качестве значения атрибута указывается полный или относительный путь к файлу, либо имя функции JavaScript, возвращающей это значение.
Пример использования атрибута src для вставки карты OpenStreetMap:
width="300" height="200" src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik"> Извините, но Ваш браузер не поддерживает фреймы. Примечание: Для вставки во фрейм пустой страницы в качестве значения атрибута src можно использовать строку « about:blank ». Спецификацией HTML данное значение рекомендовано для атрибута src как значение по умолчанию, а потому во многих браузерах программное удаление у фрейма атрибута src (например, методом Element.removeAttribute() ) вызывает загрузку во фрейм пустой страницы или, как её ещё принято называть, страницы about:blank.
Ещё одним атрибутом, который может определять содержимое фрейма, является необязательный атрибут srcdoc . В качестве значения данного атрибута может использоваться HTML-код содержимого, включающий необходимые теги и даже комментарии, например:
srcdoc="Lorem dolor
Lorem ipsum dolor sit amet.
"> Ваш браузер не поддерживает фреймы При одновременном использовании атрибутов src и srcdoc , атрибут src игнорируется. Однако для старых браузеров, не поддерживающих атрибут srcdoc (а он был введён в стандарт сравнительно недавно), наличие атрибута src гарантирует загрузку во фрейм альтернативного содержимого, URL-адрес которого указан в этом атрибуте.
Установить высоту и ширину встроенной области позволяют соответствующие атрибуты height и width . Значением этих атрибутов может быть любое целое положительное число. Допускается использовать значения в пикселах (без указания единицы измерения) или в процентах.
Когда установлена процентная запись, размеры фрейма вычисляются относительно родительского элемента — контейнера, в котором находится элемент . Если родительским элементом является , то запись width=»100%» означает, что фрейм будет занимать всю ширину страницы.
Если же значение высоты и ширины фрейма не заданы явно, то фрейм обычно имеет размер 300×150 пикселов — значение по умолчанию, принятое в большинстве браузеров.
Задать имя фрейму позволяет атрибут name . Это имя может быть использовано в сценариях на языке JavaScript, а также в качестве значения для атрибута target элементов , и , либо в качестве значения для атрибута formtarget элементов и .
Для указания имени фрейма используется набор символов, включая числа и буквы. При обращении к фрейму по имени необходимо соблюдать то же написание, что и в атрибуте name .
Простейший пример использования имени фрейма в атрибутах target для загрузки фотографий во фрейм:
name="myframe" src="files/paris.jpg"> target="myframe" href="files/paris.jpg">Париж target="myframe" href="files/rome.jpg">Рим target="myframe" href="files/berlin.jpg">Берлин target="myframe" href="files/vienna.jpg">Вена target="myframe" href="files/moskau.jpg">Москва
Для определения стиля встраиваемой области до недавнего времени можно было использовать атрибуты align (задавал выравнивание фрейма относительно окружающего контекста), frameborder (определял наличие рамки у встроенной области), scrolling (задавал режим вывода полос прокрутки во фрейме), marginheight и marginwidth (определяли внешние отступы от окружающего содержания до границы фрейма). Все эти атрибуты были рекомендованы спецификацией HTML 4.01, но впоследствии признаны нежелательными.
Для стилизации фреймов в настоящее время следует использовать средства CSS. Так, например, изменить внешний вид рамки фрейма или отменить её вывод можно с помощью стилевого свойства border . Отменить вывод полос прокрутки можно с помощью свойства overflow . Для определения внешних отступов используется свойство margin . Выравнивание и масштабирование встроенного документа внутри элемента можно настроить с помощью свойств object-position и object-fit .
Пример использования стилей:
charset="utf-8"> Example iframe < display: block; border: none; /* Убираем рамку */ overflow: hidden; /* Скрываем полосы прокрутки */ margin: 0 auto; /* Размещаем по центру */ > . src="news.html"> Извините, но Ваш браузер не поддерживает фреймы. . Чтобы фрейм не замедлял загрузку и работу самой родительской страницы , можно воспользоваться атрибутом loading , позволяющим установить режим так называемой «ленивой загрузки» фрейма (см. спецификацию). Значениями атрибута могут быть ключевые слова:
- deager — загрузить содержимое во фрейм немедленно;
- lazy — отложить загрузку содержимого во фрейм до тех пор, пока пользователь, прокручивая страницу, не приблизится к месту, где находится этот фрейм.
src="https://logrocket.com/" loading="lazy"> Примечание: На сегодняшний день атрибут loading пока ещё считается экспериментальным и поддерживается лишь последними версиями браузеров.
Чтобы вставленный на страницу фрейм не стал причиной неприятных сюрпризов , в спецификацию HTML5 были добавлены специальные атрибуты allow , referrerpolicy и sandbox , позволяющие ввести некоторые ограничения для загружаемого во фрейм контента. Так, например, атрибут allow позволяет определить, какие конкретно функции доступны для содержимого фрейма. Атрибут может принимать значения:
- accelerometer — разрешить доступ к интерфейсу акселерометра;
- ambient-light-sensor — разрешить доступ к интерфейсу AmbientLightSensor;
- autoplay — позволить автоматически воспроизводить видео и аудио файлы;
- battery — разрешить доступ к API состояния батареи;
- camera — разрешить доступ к камере компьютера;
- fullscreen — разрешить использовать полноэкранный режим;
- geolocation — разрешить использование API геолокации для получения доступа к местоположению пользователя;
- gyroscope — разрешить доступ к интерфейсу Sensors API Gyroscope;
- magnetometer — разрешить доступ к интерфейсу магнитометра API датчиков;
- microphone — разрешить доступ к микрофону компьютера;
- midi — разрешить доступ к веб-MIDI API;
- payment — разрешить вызывать API запроса оплаты;
- usb — разрешить доступ к API WebUSB;
- vibrate — разрешить доступ к Vibration API.
После ключевого слова, описывающего разрешённую функцию, можно указать ресурс, конкретно для которого данная функция разрешена:
src="https://logrocket.com/" allow="microphone https://logrocket.com/"> src="https://logrocket.com/" allow="microphone 'src'"> src="https://logrocket.com/" allow="microphone 'none'"> При необходимости в атрибуте allow допускается указывать несколько значений в любом порядке, разделяя их точкой с запятой.
src="https://logrocket.com/" allow="microphone 'none'; camera 'none'"> Примечание: Ранее спецификацией HTML5 были введены атрибут allowfullscreen , разрешающий содержимому фрейма активировать полноэкранный режим, и атрибут allowpaymentrequest , разрешающий вызывать API запроса оплаты. Это атрибуты булева типа, и для включения/выключения соответствующей функции в них используются значения true и false . В настоящее время атрибуты уже признаны устаревшими, и вместо них рекомендуется использовать обобщённый атрибут allow с соответствующими значениями.
Атрибут sandbox даёт возможность установить набор ограничений или разрешений для содержимого встроенной области в качестве меры безопасности в случае, если в ней отображается ненадежный веб-сайт. Вот некоторые из значений атрибута:
- «» (пустая строка) — применяются все возможные ограничения;
- allow-downloads — содержимому фрейма разрешается выполнять загрузки по команде пользователя;
- allow-forms — содержимому фрейма разрешается отправлять формы;
- allow-modals — содержимому фрейма разрешается открывать модальные окна;
- allow-presentation — содержимому фрейма разрешается начать сеанс презентации;
- allow-scripts — содержимому фрейма разрешается запуск и выполнение скриптов (но не создавать всплывающие окна).
При необходимости в атрибуте sandbox допускается указывать несколько значений в любом порядке через пробел. Полный список значений можно найти в соответствующем разделе спецификации языка HTML. Но, надо заметить, что список этот постоянно пополняется, и все новые значения необходимо проверять на предмет поддержки их браузерами. Кстати, в браузере Internet Explorer версии 9.0 и ниже атрибут sandbox не поддерживается вообще.
src="https://logrocket.com/" sandbox="allow-forms allow-modals"> Атрибут referrerpolicy позволяет управлять формированием заголовка запроса клиента, а точнее, той его части, которую принято называть referer . Некоторые из значений, которые может принимать атрибут, приведены ниже.
- no-referrer — referer не будет отправляться;
- no-referrer-when-downgrade — referer не будет отправляться в источники без TLS (HTTPS). Данное значение является значением по умолчанию;
- origin — referer будет отправляться для всех нормальных запросов, но значение будет усечено до домена;
- origin-when-cross-origin — referer будет отправляться для всех нормальных запросов, но значение будет усечено до домена, если ссылка идёт от одного домена к другому. Ссылки в пределах Вашего собственного сайта включают полный referrer (то есть с указанием полного пути);
Полный список значений атрибута referrerpolicy можно найти в спецификации Referrer Policy.
Другие статьи по схожей тематике
Плавающие фреймы
Разговор о фреймах будет неполным без упоминания плавающих фреймов. Так называется фрейм, который можно добавлять в любое место веб-страницы. Еще одно его название — встроенный фрейм, он называется так из-за своей особенности встраиваться прямо в тело веб-страницы. На рис. 13.4 приведен пример такого фрейма.
Рис. 13.4. Плавающий фрейм на веб-странице
Во фрейм можно загружать HTML-документ и прокручивать его содержимое независимо от остального материала на веб-странице. Размеры фрейма устанавливаются самостоятельно согласно дизайну сайта или собственных предпочтений.
Создание плавающего фрейма происходит с помощью тега , он имеет обязательный атрибут src , указывающий на загружаемый во фрейм документ (пример 13.10).
Пример 13.10. Использование тега
В данном примере ширина и высота фрейма устанавливается через атрибуты width и height . Сам загружаемый во фрейм файл называется hsb.html. Заметьте, что если содержимое не помещается целиком в отведенную область, появляются полосы прокрутки.
Еще одно удобство плавающих фреймов состоит в том, что в него можно загружать документы по ссылке. Для этого требуется задать имя фрейма через атрибут name , а в теге указать это же имя в атрибуте target (пример 13.11).
Пример 13.11. Загрузка документа во фрейм
RGB | CMYK | HSB
В данном примере добавлено несколько ссылок, они открываются во фрейме с именем color .
Тег проходит валидацию только при использовании переходного .