Объяснения Для Начинающих И Примеры

Глоссарий

Ноя 15, 2022

Anna

2хв. читання

iFrame — это сокращение от Inline Frame, которое обозначает мощный элемент веб-дизайна также известный как плавающий встроенный фрейм. Вы, скорее всего, множество раз видели видео с YouTube, размещённые не только на YouTube, но и на других сайтах. iFrame позволяет разместить на сайте все виды мультимедиа. И поэтому вам может быть интересно подробнее разобраться с iFrame и как его использовать. Кроме того, вы обязательно найдёте элемент iFrame, который наш веб-дизайнер поместил на этой странице.

В этой статье мы более подробно рассмотрим, что такое iFrame и способы его использования, а также поговорим о других вещах, которые стоит учесть, прежде чем вы добавите iFrame в свой HTML-документ.

Оглавление

Что такое iFrame

IFrame — это кадр внутри кадра. Это компонент HTML-элемента, который позволяет встраивать документы, видео и интерактивные медиафайлы на страницу. Сделав это, вы сможете отобразить дополнительную страницу на главной веб-странице.

Элемент iFrame позволяет включать часть содержимого из других источников. Он может интегрировать контент в любом месте на вашей странице, без необходимости включать их в структуру веб-макета, как традиционный элемент.

Однако следует быть осторожными. Чрезмерное использование iFrame может замедлить работу страницы и создать угрозу безопасности, особенно если вы используете контент с подозрительного веб-сайта. Рассматривайте iFrame как часть контента, но не как часть сайта. Например, если вы хотите добавить видео с YouTube, чтобы стимулировать ваших читателей, можете вставить этот  элемент в свой пост.

Дополнительно: Как вставить видео в WordPress (англ.)

Как использовать іFrame

Теперь вы знаете, что іFrame — это дополнительный элемент для распространения контента с других сайтов. Вы можете добавить его, чтобы предоставить читателям дополнительную информацию на определённую тему.

Вставить элемент iFrame можно, используя тег <iframe> в документе HTML. Скопируйте приведённый ниже код, вставьте его в блокнот и сохраните файл в формате .html:

<iframe src="https://www.youtube.com/embed/dXBohfjc4WA" allowfullscreen></iframe>

Приведённый выше код добавит на страницу обучающее видео YouTube от Hostinger. Давайте рассмотрим каждый тег отдельно:

  • Тег <iframe>…</iframe> используется для размещения видео в іFrame.
  • Источник іFrame (src) является источником контента с внешнего или внутреннего сервера. Не забудьте добавить встроенный код в URL.
  • Width и height — это соотношение сторон кадра. Вы можете вставить фиксированные размеры, такие как 680×480 пикселей (px), как в примере. Или же использовать процентное соотношение (10%-100%) для автоматической настройки іFrame.

Угрозы безопасности

По своей природе элемент іFrame не представляет никакой угрозы безопасности для вашей веб-страницы или её читателей. Он был разработан, чтобы помочь создателям контента добавлять визуально привлекательный материал для читателей. Тем не менее вам нужно обратить внимание на надёжность сайта при добавлении іFrame.

В 2008 году произошёл всплеск внедрения кода іFrame на некоторых влиятельных сайтах, таких как ABC news. Этот тип атаки перенаправляет посетителей на вредоносный сайт, который затем устанавливает вирус на компьютер посетителей или пытается украсть конфиденциальную информацию. Вот почему не рекомендуется включать iFrame как неотъемлемую часть вашего сайта.

Если вы считаете, что веб-сайт небезопасен, не ссылайтесь на него и не помещайте его содержимое в элемент iFrame.

Вам нужен сайт? Вы в поисках лучшего хостинг-провайдера? Тогда обязательно попробуйте Hostinger.

Заключение

В общем, іFrame является мощным элементом для привлечения внимания посетителей к вашему контенту. Однако не стоит использовать его чрезмерно. Это лишь часть контента, который вы создаёте, а не обязательная составляющая сайта.   Лучше, если есть такая возможность, разработать свой сайт без іFrame. Если вам всё ещё нужно использовать его в целях разработки, тогда добавляйте контент только с надёжных источников. Мы надеемся, что эта статья помогла вам разобраться с тем, что такое iFrame и как безопасно реализовать его на вашем сайте.

Анна долгое время работала в сфере социальных сетей и меседжеров, но сейчас активно увлеклась созданием и сопровождением сайтов. Она любит узнавать что-то новое и постоянно находится в поиске новинок и обновлений, чтобы делиться ими с миром. Ещё Анна увлекается изучением иностранных языков. Сейчас её увлёк язык программирования!

Більше статей від Anna

— HTML — Дока

  1. Кратко
  2. Пример
  3. Как понять
  4. Как пишется
  5. Атрибуты
  6. Подсказки
  7. На практике
    1. Дока Дог советует

Кратко

Скопировано

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

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

Пример

Скопировано

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

<iframe   title="Inline Frame Map"    frameborder="1"  allowfullscreen="true"  src="https://yandex.ru/map-widget/v1/-/CBFkaYSE0A"></iframe>
          <iframe
 
  title="Inline Frame Map"
 
 
  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, то он применит сразу все возможные ограничения. Либо можно указать нужные ограничения в любом порядке через пробел:

Возможные значения атрибута 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/Обыкновенные_лемуры"></iframe>
          <iframe title="Страница в Википедии о лемурах" src="https://ru.wikipedia.org/wiki/Обыкновенные_лемуры"></iframe>

На практике

Скопировано

Дока Дог советует

Скопировано

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

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

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

<video>

ctrl + alt + ←

→

<source>

ctrl + alt + →

HTML-фреймов Код

Вы можете использовать следующий HTML-код для создания веб-страницы, разделенной на отдельные фреймы. Вы также можете проверить эти шаблоны фреймов для шаблонов фреймов, совместимых с HTML5.

HTML5-совместимые фреймы

Поскольку HTML5 стал официальной рекомендацией, фреймы (в традиционном смысле) в HTML не поддерживаются. Фреймы раньше создавались с использованием элементов и , но эти элементы больше не поддерживаются в HTML.

Для создания фреймов, совместимых с HTML5, необходимо использовать либо фреймы iframe (т. е. использовать тег