Что такое Iframe и как его использовать.

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

Что такое iframe?

Iframe – это небольшой код HTML, размещенный на сайте, который в этом месте показывает другой сайт. Вот как это выглядит.

На этом скриншоте вы видите, что в свой тестовый сайт, на страницу на которой описывается, сколько планет, я вставил сайт wp-system.ru. В этом случае, смысла от применения Iframe нет. Но я пока хочу показать, как это работает и как это просто сделать.

С точки зрения кода HTML, iframe это один из тегов, который также может включать указатель местоположения содержимого, которое вы хотите встроить на свой сайт. Однако, у этого тега есть и другие атрибуты, которые вы можете включить, например, атрибуты с указанием размера окна.

Вот как выглядит код для вставки iframe в редакторе WordPress.

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

Когда следует использовать iframe?

Основной целью iframe для большинства пользователей WordPress, не являющихся разработчиками, является отображение стороннего контента на вашем сайте. Вот некоторые общие рекомендации по применению.

Рекламные объявления. Многие боковые виджеты и рекламные баннеры на самом деле являются iframes. Это позволяет вашим рекламным партнерам легко предоставлять и при необходимости заменять рекламные объявления, которые отображаются на вашем сайте.

YouTube видео. Да, есть автоматическая вставка, когда достаточно вставить URL видео в нужное место, а дальше WordPress сам всё сделает. Но если вы хотите использовать дополнительные параметры, например, указать размер видео, или указать с какого места оно должно воспроизводиться, то тогда нужно использовать iframe.

Яндекс Карты. Если у вас локальный бизнес, например кафешка или магазинчик, то вы можете добавить на свой сайт фрагмент карты, на котором отображена метка с указанием вашей торговой точки или кафешки. Это поможет легко найти вас посетителям, которые не знают ваш район.

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

Новостная лента. Как и постоянно меняющиеся сообщения в социальных сетях, RSS-каналы иногда проще отображать с помощью iframe. Вы просто используете URL канала RSS в качестве атрибута src.

Есть и другие варианты для использование фреймов.

Каковы преимущества у использования iframes?

Для большинства пользователей iframes выгодны, поскольку поддерживают разделение между основным HTML-документом (вашим сайтом) и внешним контентом, который вы загружаете в него. Это полезно по двум причинам.

Во-первых, вам не нужно беспокоиться об обновлении стороннего контента, который вы хотите отобразить. Ваши рекламные партнеры могут изменять свои рекламные акции, ваша лента на Facebook может обновляться, даже Яндекс Карты могут обновляться, если в указанном вами районе были изменения. Ваш iframe загрузит последнюю версию. И всё это автоматически, без вашего участия.

Кроме того, создание разделения между вашим контентом и контентом других сайтов может обеспечить дополнительную безопасность. Вам не нужно беспокоиться о непреднамеренном импорте любых уязвимостей или багов, добавляя сторонний код непосредственно в файлы вашего сайта.

Тем не менее, есть много разработчиков, которые выступают против использования iframes, потому что они также могут представлять угрозу безопасности. Любые вредоносные элементы в документе, который вы загружаете во фрейм, также будут доступны на вашем сайте. Третьи стороны могут воспользоваться этой возможностью для «фишинга» пользовательских данных.

Однако, если вы получаете сторонний контент из авторитетных источников, таких как Яндекс,  YouTube, из популярных социальных сетей или новостных платформ, то это не должно быть проблемой. Просто как всегда, будьте осторожны при добавлении новых функций на ваш сайт.