Опубликовано: 18.02.2021

Плавающий фрейм

Общие сведения об элементе

Плавающий фрейм представляет собой встроенную прямоугольную область (окно), в которой может отображаться содержимое любого независимого документа или даже другого веб-сайта в ограниченном пространстве на текущей веб-странице. Фреймы используются, например, для отображения видео с YouTube, для вставки на страницу карт Google, всевозможных рекламных разделов и т.п.

Создаётся такая область с помощью парного тега <iframe>, причём закрывающий тег является обязательным. Внутри контейнера IFRAME, то есть между открывающим и закрывающим тегами, могут размещаться элементы разметки и какой-то альтернативный текст (см. пример ниже), который будет отображаться на экране в том случае, если браузер не поддерживает фреймы.

<iframe src="news.html">
   <p>Извините, но Ваш браузер не поддерживает фреймы.</p>
</iframe>

Атрибуты элемента <iframe>

Открывающий тег <iframe> может содержать собственные и универсальные атрибуты, а также атрибуты событий.

Из собственных атрибутов наиболее важным (хотя и необязательным) является атрибут src (сокр. от англ. source — «источник»), который содержит URL-адрес документа для загрузки во встроенную область. В качестве значения атрибута указывается полный или относительный путь к файлу, либо имя функции JavaScript, возвращающей это значение.

Пример использования атрибута src для вставки карты OpenStreetMap:

<iframe width="300" height="200" src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
  <p>Извините, но Ваш браузер не поддерживает фреймы.</p>
</iframe>

Результат в браузере:

Карта OpenStreetMap

Примечание: Для вставки во фрейм пустой страницы в качестве значения атрибута src можно использовать строку «about:blank». Спецификацией HTML данное значение рекомендовано для атрибута src как значение по умолчанию, а потому во многих браузерах программное удаление у фрейма атрибута src (например, методом Element.removeAttribute()) вызывает загрузку во фрейм пустой страницы или, как её ещё принято называть, страницы about:blank.

Ещё одним атрибутом, который может определять содержимое фрейма, является необязательный атрибут srcdoc. В качестве значения данного атрибута может использоваться HTML-код содержимого, включающий необходимые теги и даже комментарии, например:

<iframe srcdoc="<html><body><h1>Lorem dolor</h1><p>Lorem ipsum dolor sit amet.</p></body></html>">
   <p>Ваш браузер не поддерживает фреймы</p>
</iframe>

Результат в браузере:

Использование атрибута srcdoc

При одновременном использовании атрибутов src и srcdoc, атрибут src игнорируется. Однако для старых браузеров, не поддерживающих атрибут srcdoc (а он был введён в стандарт сравнительно недавно), наличие атрибута src гарантирует загрузку во фрейм альтернативного содержимого, URL-адрес которого указан в этом атрибуте.

Установить высоту и ширину встроенной области позволяют соответствующие атрибуты height и width. Значением этих атрибутов может быть любое целое положительное число. Допускается использовать значения в пикселах (без указания единицы измерения) или в процентах.

Когда установлена процентная запись, размеры фрейма вычисляются относительно родительского элемента — контейнера, в котором находится элемент <iframe>. Если родительским элементом является <body>, то запись width="100%" означает, что фрейм будет занимать всю ширину страницы.

Если же значение высоты и ширины фрейма не заданы явно, то фрейм обычно имеет размер 300×150 пикселов — значение по умолчанию, принятое в большинстве браузеров.

Задать имя фрейму позволяет атрибут name. Это имя может быть использовано в сценариях на языке JavaScript, а также в качестве значения для атрибута target элементов <a>, <base> и <form>, либо в качестве значения для атрибута formtarget элементов <button> и <input>.

Для указания имени фрейма используется набор символов, включая числа и буквы. При обращении к фрейму по имени необходимо соблюдать то же написание, что и в атрибуте name.

Простейший пример использования имени фрейма в атрибутах target для загрузки фотографий во фрейм:

<iframe name="myframe" src="files/paris.jpg"></iframe>
   <p><a target="myframe" href="files/paris.jpg">Париж</a>
      <a target="myframe" href="files/rome.jpg">Рим</a>
      <a target="myframe" href="files/berlin.jpg">Берлин</a>
      <a target="myframe" href="files/vienna.jpg">Вена</a>
      <a target="myframe" href="files/moskau.jpg">Москва</a></p>

Результат в браузере:

Результат в браузере

Для определения стиля встраиваемой области до недавнего времени можно было использовать атрибуты align (задавал выравнивание фрейма относительно окружающего контекста), frameborder (определял наличие рамки у встроенной области), scrolling (задавал режим вывода полос прокрутки во фрейме), marginheight и marginwidth (определяли внешние отступы от окружающего содержания до границы фрейма). Все эти атрибуты были рекомендованы спецификацией HTML 4.01, но впоследствии признаны нежелательными.

Для стилизации фреймов в настоящее время следует использовать средства CSS. Так, например, изменить внешний вид рамки фрейма или отменить её вывод можно с помощью стилевого свойства border. Отменить вывод полос прокрутки можно с помощью свойства overflow. Для определения внешних отступов используется свойство margin. Выравнивание и масштабирование встроенного документа внутри элемента <iframe> можно настроить с помощью свойств object-position и object-fit.

Пример использования стилей:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Example</title>
   <style>
      iframe {
         display: block;
         border: none;       /* Убираем рамку */
         overflow: hidden;   /* Скрываем полосы прокрутки */
         margin: 0 auto;     /* Размещаем по центру */
      }
   </style>
</head>
<body>
   ...
   <iframe src="news.html">
      <p>Извините, но Ваш браузер не поддерживает фреймы. </p>
   </iframe>
   ...
</body>
</html>

Чтобы фрейм не замедлял загрузку и работу самой родительской страницы, можно воспользоваться атрибутом loading, позволяющим установить режим так называемой «ленивой загрузки» фрейма (см. спецификацию). Значениями атрибута могут быть ключевые слова:

  • deager — загрузить содержимое во фрейм немедленно;
  • lazy — отложить загрузку содержимого во фрейм до тех пор, пока пользователь, прокручивая страницу, не приблизится к месту, где находится этот фрейм.

Пример записи атрибута:

<iframe src="https://logrocket.com/" loading="lazy"></iframe>

Примечание: На сегодняшний день атрибут 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.

После ключевого слова, описывающего разрешённую функцию, можно указать ресурс, конкретно для которого данная функция разрешена:

<!-- Разрешить использование микрофона для указанного ресурса --> 
<iframe src="https://logrocket.com/" allow="microphone https://logrocket.com/"></iframe>

<!-- Разрешить использование микрофона для ресурса, указанного в атрибуте SRC --> 
<iframe src="https://logrocket.com/" allow="microphone 'src'"></iframe>

<!-- Запретить использование микрофона для всех ресурсов --> 
<iframe src="https://logrocket.com/" allow="microphone 'none'"></iframe>

При необходимости в атрибуте allow допускается указывать несколько значений в любом порядке, разделяя их точкой с запятой.

<!-- Запретить использование микрофона и камеры для всех ресурсов --> 
<iframe src="https://logrocket.com/" allow="microphone 'none'; camera 'none'"></iframe>

Примечание: Ранее спецификацией 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 не поддерживается вообще.

Пример записи атрибута:

<iframe src="https://logrocket.com/" sandbox="allow-forms allow-modals"></iframe>

Атрибут referrerpolicy позволяет управлять формированием заголовка запроса клиента, а точнее, той его части, которую принято называть referer. Некоторые из значений, которые может принимать атрибут, приведены ниже.

  • no-referrer — referer не будет отправляться;
  • no-referrer-when-downgrade — referer не будет отправляться в источники без TLS (HTTPS). Данное значение является значением по умолчанию;
  • origin — referer будет отправляться для всех нормальных запросов, но значение будет усечено до домена;
  • origin-when-cross-origin — referer будет отправляться для всех нормальных запросов, но значение будет усечено до домена, если ссылка идёт от одного домена к другому. Ссылки в пределах Вашего собственного сайта включают полный referrer (то есть с указанием полного пути);

Полный список значений атрибута referrerpolicy можно найти в спецификации Referrer Policy.

Другие статьи по схожей тематике

Раздел: HTML