Элемент iframe (сокращение от internal frame) предназначен для того, чтобы встраивать на страницу HTML содержимое из других источников. Например, благодаря использованию iframe, можно не думать о создании собственного видеоплеера и хранении объемных видеофайлов. Вместо этого можно использовать YouTube и добавить необходимое видео в свое веб-приложение с помощью iframe.
Использование iframe для видео с YouTube
Рассмотрим на конкретном примере. Создадим страницу на которой можно будет посмотреть видео с YouTube канала AppMaster про использование файлов в бизнес-процессах. Для этого необходимо лишь разместить на холсте элемент iframe, указать необходимые настройки (например, по размеру и отступам) и в поле Src установить ссылку на нужное видео.
При этом YouTube изначально предполагает возможность подобного встраивания видео и предоставляет необходимые инструменты для максимального удобства процесса. Нажав на кнопку “Share” под видео, можно воспользоваться вариантом “Embed”.
Что такое iFrame
YouTube предоставит весь необходимый HTML-код для размещения видео на своей странице, но в нашем случае интерес представляет не весь код, а лишь ссылка на необходимое видео. Нужно скопировать ее и разместить в настройках iframe.
Тут же видны предложенные по умолчанию настройки ширины и высоты — 560 и 315. Соответственно можно установить такие же значения в настройках своего iframe.
Можно опубликовать приложение и убедиться в том, что теперь в нем действительно есть встроенное видео.
Аналогичным образом можно встроить и другие типы данных с других источников. Например, добавить карту.
В результате таких настроек можно отобразить карту в виде круга с толстой пунктирной рамкой.
Использование кастомного HTML в iframe
Рассмотрим более сложный вариант. Будем самостоятельно создавать html-страницы для iframe, а не использовать данные из сторонних источников. Для этого добавим на холст элемент RichtextEditor. Он позволяет создавать HTML, как с помощью удобного визуального редактора, так и через прямое редактирование HTML-кода.
Необходимо сделать так, чтобы любой HTML, созданный в редакторе, можно было сохранить в виде файла, а дальнейшем отобразить через iframe. Добавим кнопку и создадим соответствующий бизнес-процесс, который будет запускаться при ее нажатии.
В рамках бизнес-процесса необходимо:
- Получить HTML из редактора с помощью блока Richtext Get Properties.
- Выполнить преобразование HTML в байты (To Bytes).
- Воспользоваться блоком Make File для создания файла. Нужно учитывать, что для создания файла необходимо только его содержимое (Bytes, его получили на предыдущем шаге) и название (оно может быть любым, но установить его нужно обязательно).
- Отправить созданный файл на сервер, сохранить в базу данных (Server request POST /_files/).
- Получить ID созданного файла (Expand File — ID).
- Преобразовать ID в String (To String).
- Собрать ссылку на файл с помощью Concat String. В результате должна получиться ссылка типа https://vdjyien-app.apms.io/api/_files/dQhJVTYrToCqr9G4KWKRD/download/, где vdjyien-app.apms.io — адрес вашего сервера, а dQhJVTYrToCqr9G4KWKRD ID файла, полученный на предыдущем шаге. Итоговая ссылка должна открываться в браузере. Убедитесь при этом, что сам эндпойнт получения файла (GET /_files/:id/download/) не требует авторизации и открыт для доступа.
- Если ссылка в порядке, то остается только передать ее в iframe и увидеть полученный результат (iFrame Update Properties).
Теперь любой HTML созданный в редакторе Richtext Editor можно сохранить в базе и отобразить в приложении. Таким образом, с помощью блока iframe можно добавить в свое приложение даже такие элементы, которые изначально не предусмотрены в дизайнере, использовать нестандартные шрифты или создавать блоки с кастомным HTML-кодом.
Источник: appmaster.io
Что такое iframe-вставки на сайте?
Если по-простому, это такая область на веб-странице, в которой отображается другая страница, медиа-контент. И то, что происходит во фрейме, происходит именно там, обособленно от основной. страницы.
Например, вставим так видеоплеер с каким-нибудь роликом. Активировали — он запустит показ, притом страница с плеером никуда не уйдёт. Даже если развернуть его на весь экран, переадресации не произойдет.
автор вопроса выбрал этот ответ лучшим
в избранное ссылка отблагодарить
Голубоглазая юристка [200K]
Поясню: проверила сайт на вирусы и ресурс выдал,что есть вирус (ссылаясь на iframe-вставки или подозрительные ссылки). Ссылок на сайте у меня хватает, но, вроде, нормальные. Сама пользуюсь услугами этих сайтов (не всех,правда). И открываю я эти сайты (все) через Яндекс.
При этом, Яндекс и Гугл сайт индексируют, Тьху-тьху, а проверка от Доктор Веб вообще ничего подозрительного на сайте не нашла. Переживать стоит? Или проверить ссылки (что-то админка странновата стала — поэтому и проверила)? — 7 лет назад
Gelneren [224K]
Может быть, просто временный загон. У меня однажды так яндекс ругался, хотя лично я ничего на сайте не менял. То ли на той стороне источники этих ифрэймов корректировали, то ли на яндексе решили некие коды считать подозрительными, и они как раз там были. Где-то в глубинах яндекс-вебмастера я попросил робота проверить ещё раз, и всё отобразилось как надо. — 7 лет назад
Источник: www.bolshoyvopros.ru
Что за программа iframe
Тег означает «встроенный фрейм» и используется для встраивания документов в текущий HTML-документ. Например, с помощью тега можно добавить видео, карты, посты из социальных сетей, рекламу и другой тип внешнего контента.
Синтаксис тега
Спецификация HTML
Тег является частью спецификации HTML Living Standard.
Семантический или нет
Тег не считается семантическим, так как не придаёт никакого конкретного значения содержимому.
Примеры использования
Встраивание внешней веб-страницы в HTML-документ:
Встраивание видео YouTube в HTML-документ:
Встраивание карты Google:
Встраивание социальных сетей:
Встраивание PDF-документа с помощью Google Docs:
Для чего использовать тег
- Для вставки внешнего контента в HTML-документ.
- Для отображения карты, видео или сообщения в социальных сетях.
- Для встраивания рекламы.
- Для отображения документов PDF или других типов файлов.
Атрибуты тега
allowfullscreen — указывает, разрешать или нет отображение iframe в полноэкранном режиме.
height — высота iframe .
width — ширина iframe .
name — имя iframe .
sandbox — включает «песочницу» для содержимого iframe .
src — URL документа, который будет отображаться в iframe .
srcdoc — HTML-содержимое, которое будет отображаться в iframe .
Глобальные атрибуты
Ограничения
- Содержимое должно быть из того же домена, что и родительский документ, или сервер должен специально разрешить отображение этого содержимого.
- Использование может замедлить время загрузки страницы.
Нюансы
- может использоваться для атак clickjacking , чтобы обманом заставить пользователя нажать на кнопку или ссылку, выполняющую вредоносное действие.
- может вызывать проблемы со скринридерами, потому что такие программы не всегда способны прочитать содержимое .
Поддержка браузерами
Тег поддерживается всеми современными браузерами. Актуальная информация — на сaniuse.
Альтернативные теги
Альтернативных тегов для тега не существует.
Чем заменить тег
- Использовать JavaScript для манипулирования DOM и добавления внешнего содержимого на страницу.
- Использовать язык сценариев на стороне сервера, например PHP, для включения внешнего содержимого в страницу.
Актуальность
Тег не устарел, можете использовать его в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Источник: htmlacademy.ru