skip to main content

<iframe>

html

Кратко 🔗

<iframe> — это контейнер, который позволяет вставить любой интерактивный HTML-документ из другого источника, например, карту, видео или пост из соцсети.

Его обычно так и называют — фрейм. Внешний вид фрейма и его положение на странице можно задать через CSS.

Пример 🔗

С помощью такого нехитрого кода мы можем встроить карту размером 560х400 на любую страницу:

<iframe
id="inlineFrameExample"
title="Inline Frame Map"
width="560"
height="400"
frameborder="1"
allowfullscreen="true"
src="https://yandex.ru/map-widget/v1/-/CBFkaYSE0A"
>

</iframe>

Как это понять 🔗

<iframe> можно представить как «окно» или фрейм, через которое на вашей странице можно увидеть любое содержимое с других сайтов. Это значит, что, если карту, видео, пост или другой элемент удалят с оригинального сайта, этот элемент пропадёт и с вашей страницы. Останется только пустое поле или надпись, вроде «Контент недоступен».

Встраивать файлы можно либо по ссылке с помощью атрибута src, либо целиком HTML-код файла с помощью srcdoc.

Как пишется 🔗

Часто сервисы, из которых мы хотим что-то встроить (карты, посты, видео и так далее) сами могут сгенерировать вам <iframe>. Его останется только добавить в свой код.

Контейнер <iframe>...</iframe> нужно всегда закрывать.

Атрибуты 🔗

  • src — URL-адрес файла, который ты встраиваешь.
  • srcdoc — позволяет встроить HTML-код целиком, так что браузеру не придётся подгружать что-то по внешней ссылке. Если используется этот атрибут, то ссылка src игнорируется.
  • sandbox — ограничивает определённые действия и функции встраиваемого документа. Если просто указать атрибут sandbox, то он применит сразу все возможные ограничения. Либо можно указать нужные ограничения в любом порядке через пробел:
  • allow-forms — позволяет отправлять формы внутри <iframe>;
  • allow-modals — позволяет открывать попап-окна, которые мы все так не любим: вроде «Оставьте свой имейл» или «Не уходите так быстро! У вас товар в корзине». Обычно эти окна не дают пользоваться сайтом, пока их не закроешь;
  • allow-orientation-lock — позволяет фиксировать горизонтальное или вертикальное положение экрана;
  • allow-pointer-lock — позволяет пользователю управлять содержимым <iframe> с помощью курсора через Pointer Lock API;
  • allow-popups — разрешает показ всплывающих окон, заданных с помощью window.open(), target="_blank" или showModalDialog();
  • allow-popups-to-escape-sandbox — позволяет содержимому фрейма открывать новые окна. С этим параметром у таких окон не будет ограничений, что есть у <iframe> с атрибутом sandbox.
  • allow-presentation — разрешает использовать Presentation API;
  • allow-same-origin — контент из <iframe> загружается по тем же правилам и с теми же ограничениями, что и страница, на которой он находится;
  • allow-scripts — позволяет загружать скрипты. При этом всплывающие окна будут запрещены;
  • allow-top-navigation — позволяет открывать ссылки, которые есть в <iframe>, в том же окне, в которое встроен фрейм.
  • allow-top-navigation-by-user-activation — позволяет контенту из фрейма управлять страницей, на которой он находится. Но только по инициативе пользователя;
  • name — имя фрейма. Пригодится, чтобы создать ссылку, по которой новая страница будет открываться в нужном фрейме.

Подсказки 🔗

💡 Атрибут sandbox будет игнорироваться, если использовать одновременно значения allow-scripts и allow-same-origin и если исходная страница и <iframe> на ней загружаются из одного и того же источника.

💡 Помни, что <iframe> — этот как ещё одна страница, которая загружается внутри вашей страницы. Содержимое фрейма может загружаться дольше, чем ваш сайт и может занимать место на компьютере пользователя.

💡 В <iframe> стоит добавить атрибут title на случай, если пользователь не может увидеть страницу и использует инструмент чтения с экрана. Например, так:

<iframe
title="Страница в Википедии о лемурах"
src="[https://ru.wikipedia.org/wiki/Обыкновенные_лемуры](https://en.wikipedia.org/wiki/Avocado)"
>

</iframe>

В работе 🔗

Владимир 👨‍🔧

🛠 Я редко юзаю <iframe>. Только когда надо из ютуба, например, встроить видео.

Почти всегда лучше настроить заголовок cross-origin — это делается на уровне сервера — чтобы ваш сайт не могли сторонние ребята встраивать себе как фрейм. Это часто используется для всяких махинаций в интернетах.


Автор: Макс 👨‍🔧