Тег <iframe> (от англ. inline frame — встроенная рамка) — это отличный инструмент веб-дизайна, также известный как плавающий встроенный фрейм, которым пугают начинающих разработчиков. Он является одним из старейших тегов HTML и был представлен еще в 1997 году в HTML 4.01 Microsoft Internet Explorer. Видео с YouTube на других сайтах, кнопка «Нравится» известной социальной сети на любой странице, реклама казино? Все это <iframe>.
Данный тег позволяет добавлять на вашу страницу элементы мультимедиа и документы с других сайтов в контейнере заданного размера. Однако откуда взялись первые фреймы и почему вокруг <iframe> столько негативных мифов?
Содержание
История появления фреймов
Что такое iframe?
Атрибуты для работы с iframe
Безопасность
iframe: события и общение
Могут ли элементы iframes повлиять на SEO сайта?
Заключение
В начале-середине 1990-х годов интернет выглядел совершенно по-другому. Скорость соединения тогда была в сотни раз ниже, чем сейчас, а потому сайты старались делать максимально минималистичными. Более того, считалось, что разделение одной страницы на несколько отдельных блоков помогает сайту в целом работать быстрее (то есть, когда у пользователя страница прогружается отдельными блоками, он может видеть какой-то контент до полной загрузки страницы). Поэтому для создания веб-сайтов стали использовать фреймы.
Это отдельные законченные HTML-документы, которые вместе с другими HTML-документами могут быть отображены в окне браузера. По сути, одна страничка разбивается на прямоугольные блоки, каждый из которых содержит в себе разные HTML-документы. Фактически разработчики, используя фреймы, создавали из веб-страниц подобие таблиц с некоторым количеством ячеек, каждая из которых являлась независимым элементом. Можно сказать, что пользователь видел на одном экране сразу несколько отдельных страниц сайта. При этом работа в одной ячейке не влияла на содержимое других.
Чтобы наглядно показать как это выглядело, рассмотрим следующий пример:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Фреймы</title>
</head>
<frameset rows="25%,75%">
<frame src="top.html" name="TOP" scrolling="no" noresize>
<frameset cols="100,*">
<frame src="menu.html" name="MENU">
<frame src="content.html" name="CONTENT">
</frameset>
</frameset>
</html>
Вначале с помощью тега <frameset> создаются две строчки, которые разбивают страницу в соотношении 1:3. В верхней ячейке с помощью атрибута src= отображается документ top.html, который не прокручивается и размер которого не может быть изменен благодаря атрибутам scrolling="no" и noresize. Нижняя же строка разбивается на два столбца. При этом левая колонка занимает 100 пикселей, а правая — оставшееся пространство, заданное символом звездочки. В левую ячейку загружается страница menu.html, в правый — content.html. Таким образом у пользователя на одном экране отображается сразу три страницы одного сайта.
Фреймы очень хорошо подходили для создания шапки сайта. Например, сверху создается горизонтальная ячейка со списком всех доступных страниц, а ниже — ячейка отображения. Когда пользователь нажимает, допустим, «Новости», на второй ячейке у него идет отображение списка новостей, при этом, верхняя ячейка продолжает показывать список доступных страниц для перехода. В целом это касается любых неподвижных элементов интерфейса. То есть, если разработчику нужно было, чтобы на его сайте всегда отображалось какое-либо изображение (логотип), он мог зафиксировать его в отдельном фрейме. Еще одним интересным применением можно считать обучающие сайты, где на одном фрейме располагалась информация о задании, на другом — форма для ввода данных учеником, а на третьем — результат его действий.
Однако использование фреймов также играло с разработчиками злую шутку. Например, пользователи абсолютно не имели понятия в каком разделе сайта они находятся, потому что в адресной строке всегда отображала одна и та же информация (http://mysite.com/index.html). Все фреймы встраивались на одну страничку — index.html — и не влияли на отображение. То же касалось и поисковиков, они просто не могли находить отдельные страницы сайтов, использующих фреймы. Если же пользователь каким-то образом узнавал адрес внутренней страницы и переходил на нее напрямую, то вся структура сайта для него ломалась.
В конце 1990-х годов начали активно развиваться технологии Java и Flash, что позволило разработчикам не только встраивать на свои странички различные видео, анимации и приложения, но и решить некоторые проблемы с фреймами. Например, поломка структуры сайта при переходе на внутреннюю страницу легко устранялась средствами JavaScript. В начале кода прописывается скрипт, который будет создавать фреймовую структуру в том случае, когда пользователь попадает на «неверную» страницу. Кроме того, в мире начала расти средняя скорость интернет-соединения, доступная обывателям, а поэтому необходимость ячеистой структуры сайтов отпадала.
Поэтому постепенно фреймы канули в небытие и на данный момент уже считаются устаревшей технологией и не поддерживаются в HTML5 (таких тегов, как frame, frameset и noframes уже попросту не существует). А затем из-за проблем с безопасностью, скоростью работы и доступностью начали уходить и Flash-технологии (многие браузеры уже давно отказались от ее поддержки). А для встраивания мультимедийного контента на страницы появляется универсальный тег iframe.
Как уже упоминалось выше, тег <iframe> используют для того, чтобы на своей странице отображать внешние документы, будь то другие страницы, сторонние видео (например, с YouTube), презентации и другой визуальные контент, различные апплеты (например, формы оплаты или карты Google Maps), для отображения рекламы других сайтов (или же создания фонового трафика через партнерские программы), а также для создания приложений (например, справочных документов). То есть разработчик может добавлять контент в любом месте на странице, без необходимости включать его в структуру веб-макета как традиционный элемент. Кроме того, встраиваемый элемент будет независимым HTML-документом, а значит, он будет изолирован от JavaScript и CSS основной страницы.
Знатоки не рекомендуют использовать фреймы для создания фотогалерей и чатов, а делать их самостоятельными невстроенными элементами. Также стоит забыть об «олдскульном» применении фреймов для создания навигационной панели. Некоторые современные браузеры могут не поддерживать отображение встраиваемых элементов, поэтому нужно позаботиться о защите от такого сценария (добавлением предупреждающего текста между тегами <iframe> и </iframe>).
Одним из ярких примеров использования iframe, который каждый из читателей может проделать самостоятельно прямо сейчас, является добавление карт из Google Maps на любую страничку. Если взять приложение Google Maps и открыть «Меню», там можно найти строчку «Ссылка/код». Там есть два параметра: «Отправка ссылки», чтобы поделиться картой с другом через мессенджер или социальные сети, и «Встраивание карт». Последний выдает вам код с тегом <iframe> для размещения на своем сайте:
<iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d20325.35072803851!2d30.531452584657586!3d50.44726872840224!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sru!2sua!4v1637242327427!5m2!1sru!2sua" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
Чтобы добавить на страничку видео с YouTube, достаточно найти нужный ролик, нажать на кнопку «Поделиться» и выбрать из списка доступных вариантов «Встроить». Затем ввести у себя полученный код:
<iframe width="720" height="480" src="https://www.youtube.com/embed/ydxgOZG0BUI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Можно также использовать iframe, чтобы добавить кнопку для призыва пользователей делиться ссылкой на ваш сайт, например, в Twitter:
<iframe src="https://platform.twitter.com/widgets/tweet_button.html" style="border:0;” width:”100” height:”33”></iframe>
Во всех примерах у вас на странице будет отображаться внешний элемент (карта, видео, кнопка). Атрибут src определяет ссылку на источник для фрейма. Параметры width и height задают размеры блока (в данных примерах в пикселях, хотя можно использовать и процентное значение). Остальные атрибуты влияют на возможность открывать элементы в полноэкранном режиме, в режиме картинка-в-картинке и так далее. Давайте подробнее рассмотрим внутренности тега.
src=”ссылка” — задает путь к странице/файлу/элементу, содержимое которого будет отображаться во фрейме.
srcdoc=”ссылка” — дает возможность установить содержимое фрейма непосредственно в атрибуте, чтобы не допустить влияния CSS-кода текущего сайта на стиль элементов. Важно: значение должно иметь корректный синтаксис HTML, по желанию содержать <!DOCTYPE> и <html>, а при одновременном использовании атрибутов src и srcdoc, src игнорируется.
height=”” и width=”” — с помощью этих атрибутов задается высота и ширина блока iframe. Значение можно указывать в пикселях и оно будет фиксированным или в процентах для автоматической подстройки размера элемента на странице.
name=”имя” — задает имя фрейма (в основном используется для ссылки на элемент в JavaScript).
referrerpolicy=”” — используется для настройки реферера для отправки при получении содержимого iframe.
loading=”” — имеет несколько значений: auto (браузер сам определяет порядок загрузки элемента iframe), eager (загрузка происходит немедленно) и lazy (откладывает загрузку фрейма пока он находится вне поля зрения, что увеличивает скорость загрузки сайта).
style=”border:0;” — убирает рамку вокруг встраиваемого элемента, которую iframe имеет по умолчанию.
allow=”” и sandbox=”” — данные атрибуты задают политику и ограничения для объектов iframe. О них подробнее мы поговорим чуть ниже.
seamless — экспериментальный атрибут, который работает только с браузерами на базе Chromium, и позволяет отображать содержимое iframe без швов и полос прокрутки в главном документе.
Между тегами <iframe> и </ iframe> можно помещать содержимое, которое будет отображаться в случае когда браузер не поддерживает данный элемент. К примеру данный код побуждает пользователей обновить браузер, если они не видят часть контента:
<iframe src="ссылка на видео" width="720" height="480" style="border:0;” allowfullscreen>
Ваш браузер не поддерживает iframe. Пожалуйста, обновите его до последней версии.
</iframe>
Несмотря на то, что сам по себе элемент iframe не представляет ничего страшного, вокруг него и связанных с ним проблем с безопасностью ходит много слухов. Так как с помощью iframe вы, по факту, добавляете на свою страницу сторонний контент, то на сто процентов нельзя быть уверенными в том, что он не содержит в себе скрытых угроз. Потому что если установить ссылку на вредоносный сайт, то он будет угрожать и вашим посетителям. Одним из примеров использования iframe в мошеннических схемах — clickjacking. Это когда на сайт добавляется невидимый элемент, который захватывает действия пользователя. Так злоумышленники могут получать некоторые конфиденциальные данные.
Именно поэтому в интернете нельзя вводить данные карт или документов на сайтах, которым вы не доверяете. Благо в некоторых браузерах есть встроенная защита от подобных схем. Кроме непосредственного вреда, элементы iframe могут также раздражать посетителей вашего сайта, например, если встроенное видео автоматически воспроизводит какую-то рекламу.
Поэтому первое правило при добавлении элементов iframe на свой сайт — вы должны доверять источнику информации, чтобы не подставлять пользователей.
Второе правило — по возможности использовать HTTPS (зашифрованную версию HTTP), которая уменьшает вероятность кражи данных третьими лицами, а также разграничивает доступы сайта и встраиваемого элемента между собой.
Третье правило — предоставлять элементам iframe только необходимые для их работы разрешения. Это делается с помощью атрибутов sandbox и allow, о которых пришло время поговорить более детально.
Когда внутри тега iframe прописывается атрибут sandbox, то встраиваемое содержимое как бы попадает в так называемую песочницу, где у него забирают права и не дают выполнять определенные действия (JavaScript, отправку форм, вызов всплывающих окон и так далее). Причем без указания дополнительных параметров работают все доступные ограничения. Включать же различные функции для элементов в песочнице можно прописыванием внутри атрибута sandbox специальных флагов.
Список доступных флагов для атрибута sandbox, которые дают элементу отдельные права:
Если в теле тега iframe прописать sandbox="", то для элемента будут закрыты все права. sandbox="allow-popups, allow-presentation" — даст возможность запускать презентации и всплывающие окна. Нужно учитывать, что одновременное использование флагов allow-scripts и allow-same-origin позволит встраиваемому элементу использовать скрипты, позволяющие обходить политику безопасности.
Атрибут sandbox поддерживается в браузерах версии Chrome 4.0, IE/Edge 10.0, Firefox 17.0, Opera 15.0, Safari 5.0 и выше.
Атрибут allow позволяет открыть для содержимого iframe дополнительные возможности, которые по умолчанию всегда закрыты, даже без использования sandbox. Однако он работает только в браузерах на основе Chromium.
Список популярных флагов для атрибута allow:
Так как iframe, по сути, является документом, то для него применимы многие глобальные обработчики событий. К примеру, можно отображать счетчики или сообщения для пользователей. Когда элемент iframe полностью загружен, можно вызывать какое-либо событие с помощью load event, а если происходит сбой, то выдавать другое событие через error event. В iframe это реализовывается через атрибуты onload=”” и onerror=””.
Общение между основной страницей и содержимым iframe производится благодаря использованию функции Window.postMessage().
Пример отправки сообщения от основного документа к iframe:
const myiframe = document.getElementById('myIframe');
myIframe.contentWindow.postMessage('message', '*');
И его прием во встраиваемом элементе:
window.onmessage = function(event)
{
if (event.data == 'message')
{
console('Message received!');
}
};
Пример сообщения от iframe к основному документу:
window.top.postMessage('reply', '*'); И его прием:
window.onmessage = function(event)
{
if (event.data == 'reply')
{
console('Reply received!');
}
};
Вокруг данного вопроса также присутствует много спекуляций. Ранее роботы поисковых систем вообще не могли видеть содержимое iframe, а если и попадали каким-то образом в данный блок, то могли не выбраться и переставали индексировать остальное содержимое сайта. Однако данная проблема уже давно решена.
Поисковые системы легко понимают, что элементы iframe — это не дубликаты, не украденные материалы, а ссылки на другие сайты. Наличие встроенных элементов обычно никак не влияет на итоговый рейтинг сайта для поисковых выдач. Специалисты для уверенности советуют дополнительно индексировать содержимое iframe с помощью инструмента robots.txt, разрешая или запрещая поисковым системам доступ к содержанию страницы.
Подводя итог всего вышесказанного, <iframe> — это действительно мощный инструмент для наполнения вашего сайта различным медиаконтентом. В отличие от <video>, <audio> и <img>, данный элемент является универсальным и позволяет работать не только с видео, аудио, но и картами, баннерами, презентациями и так далее. При этом <iframe> не вредит SEO, не влияет на скорость загрузки сайтов и сам по себе не является вредоносным элементом.
Просто всегда следует держать в голове тот факт, что встраиваемый контент является сторонним и вы должны доверять источнику прежде, чем делиться им с пользователями. А главное правило — предоставлять <iframe> только необходимые для его работы разрешения.
Также о фреймах можно посмотреть это дополнительное обучающее видео:
Сегодня мы поговорим о том, как выбрать лучшие курсы Power BI в Украине, особенно для…
В 2023 году во всех крупнейших регионах конкуренция за вакансию выросла на 5–12%. Не исключением…
Unicorn Hunter/Talent Manager Лина Калиш создала бесплатный трекер поиска работы в Notion, систематизирующий все этапы…
Edtech-стартап Mate academy принял решение отправить своих работников в десятидневный отпуск – с 25 декабря…
Служба безопасности Украины задержала в Киеве 46-летнего программиста, который за деньги устанавливал шпионские программы и…
IT-специалист Джордан Катлер создал и выложил на Github подборку разнообразных ресурсов, которые помогут достичь уровня…