Исчерпывающий путеводитель по тегу iframe
Элемент iframe (сокращение от встроенного фрейма), вероятно, является одним из старейших тегов HTML и был представлен ещё в далеком 1997 году в HTML 4.01 Microsoft Internet Explorer.
Хотя все современные браузеры поддерживают данный тег, многие разработчики пишут бесконечные статьи, не советуя им пользоваться. Я считаю, что плохая репутация, которая сформировалась, около данного тега не должна мешать вам использовать его. У данного тега есть много хороших примеров применения. Кроме того, iframe не так сложно защитить, поэтому вам не придется беспокоиться о заражении компьютера вашего пользователя.
Чтобы помочь вам сформировать собственное мнение и отточить свои навыки разработчика, мы расскажем обо всем, что вам нужно знать об этом противоречивом теге.
Мы рассмотрим большинство функций, которые предоставляет элемент iframe, и поговорим о том, как их использовать, а также о том, как iframe может быть полезен для преодоления некоторых сложных ситуаций. Наконец, мы поговорим о том, как вы можете защитить свой iframe, чтобы избежать потенциальных уязвимостей.
Что такое iframe и зачем мы его используем?
Разработчики в основном используют тег iframe для встраивания другого HTML-документа в текущий.
Скорее всего, вы пересекались с ним, когда вам нужно было добавить сторонний виджет (например, знаменитую кнопку «Нравится» на Facebook), видео с YouTube, или рекламный раздел на вашем веб-сайте.
Например, приведенный ниже код будет отображать квадрат размером 500px с главной страницей Google:
Вот еще один пример, в котором мы показываем кнопку, чтобы твитнуть вашу веб-страницу в Twitter:
Когда вы думаете о iframe, вы должны иметь в виду, что он позволяет вам встраивать независимый HTML-документ с его контекстом просмотра.Таким образом, он будет изолирован от JavaScript и CSS родительского элемента. Это одна из веских причин использования iframe — обеспечить определенную степень разделения между вашим приложением и содержимым iframe.
Тем не менее, как вы увидите дальше в этом руководстве, разделение не так что б идеально.Iframe все еще может вести себя раздражающим или злонамеренным образом.
Как пример — вызывать всплывающее окно или автоматически воспроизводить видео.
(*Привет онлайн-казино, и сайтам любителей клубники )
Чтобы проиллюстрировать, насколько удобна эта изоляция от JavaScript и CSS, давайте взглянем на эти две ситуации:
1)В приложении пользователь может создавать электронные письма и сохранять их в качестве шаблонов. На определенной странице мне нужно было перечислить их, чтобы он мог просмотреть и выбрать одно из них. Но чтобы не допустить влияния CSS-кода текущего сайта на стиль этих шаблонов, я поняла, что необходимо использование iframe с атрибутом srcdoc . Это представилось самым чистым решением.
*Примечание srcdoc
Позволяет установить содержимое фрейма непосредственно в атрибуте. Значение должно иметь корректный синтаксис HTML, по желанию содержать и , а также любое количество пробелов, переносов строк, комментариев и других элементов. При одновременном использовании атрибутов src и srcdoc, атрибут src игнорируется .
2)Другая ситуация, когда iframe спасли мне жизнь, возникла, когда пришлось создавать WYSIWYG-редактор для клиента. Проблема была связана с тем, что при помощи этих редакторов вы должны найти способ сохранить возможность производить фокус и выделение, когда пользователь нажимает на любые кнопки в интерфейсе.
Поскольку iframe предлагает изолированную среду, это означает, что фокус или выделение никогда не теряются, когда вы щелкаете за его пределами. Используя события связи между iframe и родителем (подробнее об этом позже в этой статье), мне удалось в одно мгновение создать мощный редактор.
Атрибуты, которые стоило бы знать работая с iframe
На сегодняшний день существует восемь атрибутов, которые мы можем использовать для настройки поведения или стилизации iframe.
Вы можете найти больше, чем перечисленные выше, но имейте в виду, что они больше не поддерживаются в HTML5: align, frameborder, longdesc, marginheight, marginwidth и scrolling…
*Примечание. По умолчанию элемент iframe имеет рамку вокруг него. Чтобы удалить его, вы можете использовать атрибут style, чтобы установить свойство CSS border в none.
iframe события и общение
Загрузка и ошибки
Поскольку iframe является документом, вы можете использовать большинство глобальных обработчиков событий. Когда вы запускаете iframe, есть пара событий, которые могут пригодятся для улучшения работы. Например, отображение счетчика или отдельное сообщение, чтобы помочь пользователю:
load event — cобытие загрузки. Оно запускается, когда iframe полностью загружен. Другими словами, все статические ресурсы были загружены, и все элементы в дереве DOM вызвали событие load.
Событие ошибки — error event которое вызывается при сбое загрузки.
Вы можете прослушивать их с помощью атрибутов onload и onerror соответственно:
Если хотите, то вы можете добавить слушателей в свой iframe программно.
// Для нового iframe const iframe = document.createElement("iframe"); iframe.onload = function() < console.log("iframe загрузился"); >; iframe.onerror = function() < console.log("Что-то пошло не так, давай, ищи ошибку!"); >; iframe.src = "https://logrocket.com/"; document.body.appendChild(iframe); // Для существующего iframe const iframe = document.querySelector('.my-iframe'); iframe.onload = function() < console.log("iframe загрузился"); >iframe.onerror = function()
Общение с фреймами
Довольно легко отправлять сообщения между родителем и iframe. Вы должны использовать функцию postMessage, которая описана в MDN здесь.
От родителя к фрейму
Отправьте сообщение от родительского элемента:
const myiframe = document.getElementById('myIframe'); myIframe.contentWindow.postMessage('message', '*'); И послушайте его в iframe:
window.onmessage = function(event) < if (event.data == 'message') < console('Message received!'); >>; От iframe к родителю
Отправьте сообщение из iframe:
window.top.postMessage('reply', '*')И прослушай это у родителя:
window.onmessage = function(event) < if (event.data == 'reply') < console('Reply received!'); >>; Примечание: имейте в виду, что вы можете оказаться в некоторых хитрых ситуациях, когда вам нужно что-то отладить, так как сообщения запускаются и забываются (fire-and-forget) (иначе говоря. — нет реальной обработки ошибок).
Безопасность
Когда вы используете iframe, вы в основном имеете дело с контентом, полученным от третьей стороны, который вы не можете контролировать.
Таким образом, вы повышаете риск потенциальной уязвимости в вашем приложении или просто сталкиваетесь с плохим пользовательским интерфейсом (например, раздражающим автоматическим воспроизведением видео).
К счастью, вы можете занести в черный список или белый список конкретные функции.
Вы должны использовать sandbox (песочницу) и allow(допустимые) атрибуты.
! Помните, хорошее эмпирическое правило — всегда предоставлять минимальный уровень возможностей, необходимый ресурсу для его работы. Эксперты по безопасности называют эту концепцию «принципом наименьших привилегий».
Атрибут sandbox
Вот полный список флагов песочницы и их назначение:
| Флаг | Описание |
|---|---|
| allow-forms | Позволяет отправлять формы |
| allow-modals | Позволяет ресурсу открывать новые модальные окна |
| allow-orientation-lock | Позволяет ресурсу блокировать ориентацию экрана. |
| allow-pointer-lock | Позволяет ресурсу использовать API блокировки указателя (Pointer Lock API) |
| allow-popups | Позволяет ресурсу открывать новые всплывающие окна или вкладки. |
| allow-popups-to-escape-sandbox | Позволяет ресурсу открывать новые окна, которые не наследуют песочницу. |
| allow-presentation | Позволяет ресурсу начать сеанс презентации. |
| allow-same-origin | Позволяет ресурсу сохранять свое происхождение. |
| allow-scripts | Позволяет ресурсу запускать сценарии. |
| allow-top-navigation | Позволяет ресурсу перемещаться по контексту просмотра верхнего уровня. |
| allow-top-navigation-by-user-activation | Позволяет ресурсу перемещаться по контексту просмотра верхнего уровня, но только если он инициирован жестом пользователя. |
Вы несете ответственность, какие привилегии вы можете предоставить каждому iframe.
Например, если вашему iframe нужно только отправить формы и открыть новые модальные окна, вот как вы настроите атрибут песочницы:
В случае, когда атрибут песочницы настроен, а одна функция не работает правильно в ресурсе, это может быть связано с отсутствием определенного флага.
Убедитесь, что вы знаете о них больше, чтобы отладить вещи быстро.
Кроме того, имейте в виду, что использование пустого атрибута «песочница» полностью создаст «песочницу» для iframe.
Это означает, что JavaScript внутри iframe не будет выполняться, а все перечисленные выше привилегии будут ограничены (*например, создание новых окон или загрузка плагина).
Пустой атрибут песочницы в основном используется для статического содержимого, но это значительно снизит возможности, необходимые для правильной работы других ресурсов.
Примечание. Атрибут песочницы не поддерживается в Internet Explorer 9 и более ранних версиях.
Атрибут allow
Этот атрибут allow в настоящее время является экспериментальным и поддерживается только браузерами на основе Chromium. Это позволяет вам разрешить определенные функции белого списка, такие как доступ iframe к акселерометру, информации об аккумуляторе или камере.
Доступно более 25 флагов, поэтому я не буду перечислять их все здесь. Вы можете просмотреть их в документации по политике в отношении функциональных возможностей Mozilla.
Я суммировала самые популярные в таблице ниже:
| Флаг | Описание |
|---|---|
| accelerometer | Позволяет получить доступ к интерфейсу акселерометра |
| ambient-light-sensor | Позволяет получить доступ к интерфейсу AmbientLightSensor |
| autoplay | Позволяет автоматически воспроизводить видео и аудио файлы |
| battery | Разрешает доступ к API состояния батареи |
| camera | Позволяет доступ к камере |
| fullscreen | Предоставляет доступ к полноэкранному режиму |
| geolocation | Разрешает доступ к API геолокации |
| gyroscope | Предоставляет доступ к интерфейсу Sensors API Gyroscope. |
| magnetometer | Предоставляет доступ к интерфейсу магнитометра API датчиков |
| microphone | Предоставляет доступ к микрофону устройства |
| midi | Разрешает доступ к веб-MIDI API |
| payment | Разрешает доступ к API запроса платежа |
| usb | Разрешает доступ к API WebUSB |
| vibrate | Allows access to the Vibration API |
Что нужно знать о фреймах
Как решать проблемы с браузерами, которые не поддерживают фреймы
Если браузер не поддерживает iframe, он будет отображать содержимое, включенное между открывающим тегом и закрывающим тегом .
Таким образом, вы всегда должны думать о том, чтобы разместить предупреждающее сообщение как запасной вариант для этих пользователей.
Как вы можете сделать так, чтобы iframe был частью родительского документа (т.е. без границ и полос прокрутки)?
Для этой цели был введен бесшовный атрибут seamless. Он все еще экспериментален и плохо поддерживается в браузерах (это понимают только Chromium).
*Примечание Он также не является частью спецификации W3C HTML5 на момент написания этой статьи. Ознакомиться тут
Могут ли iframes повлиять на SEO моего сайта?
Я мало что знала об этом, поэтому мне пришлось немного покопаться. Есть много спекуляций вокруг этой темы.
Долгое время краулеры не могли понять содержимое iframes, но это уже не так. Наиболее релевантный ответ, который я нашла, был из этой статьи, и сегодняшний вывод выглядит так:
“Поскольку поисковые системы считают, что содержимое в фреймах принадлежит другому веб-сайту, лучшее, на что вы можете надеяться, — это отсутствие эффекта. Iframes, как правило, не помогают и не повреждают ваш рейтинг в поисковых системах. “
Таким образом, лучше всего предположить, что контент, отображаемый с помощью iframes, может быть не проиндексирован или недоступен для отображения в результатах поиска Google. Обходным путем может быть предоставление дополнительных текстовых ссылок на контент, который они отображают, чтобы робот Googlebot мог сканировать и индексировать этот контент.
Примечание. Вам также не следует беспокоиться о проблемах с дублированием контента, поскольку сканеры сегодня обычно их распознают.
Могут ли фреймы повлиять на скорость загрузки моего сайта?
Каждый iframe на странице увеличивает объем используемой памяти, а также другие вычислительные ресурсы, такие как пропускная способность.Поэтому не следует чрезмерно использовать iframe, не следя за тем, что происходит, иначе вы можете повредить производительности своей страницы.
Чтобы избежать того, что ваши фреймы замедляют работу ваших страниц, хорошим способом является их ленивая загрузка (т.е. загрузка их только тогда, когда они необходимы, например, когда пользователь прокручивает рядом с ними).Этого легко добиться, просто добавив в тег атрибут loading = «lazy».
Имейте в виду, что все современные браузеры на основе Chromium поддерживают это на момент написания этой статьи. Вас заинтересует библиотека lazyload, которая работает везде.
Примечание. Атрибут loading = «lazy» также работает с тегом img, если вы еще этого не знали.
Как я могу сделать iframe отзывчивым?
По мере того, как все больше людей просматривают Интернет с помощью своих телефонов, важно убедиться, что каждый из ваших интерфейсов отзывчивый.Но как это сделать, если на вашей странице есть фрейм?
Мы могли бы посвятить целое руководство относительно множества способов сделать ваш iframe отзывчивым. Вместо этого я просто сошлюсь на две отличные статьи:
- Эта первая статья (возможно, с самым простым решением) покажет вам, как этого добиться, обернув свой iframe в другой элемент HTML и добавив в него несколько свойств CSS.
- Эта вторая статья покажет вам, как сделать iframe отзывчивым, имея дело с соотношениями сторон.
- Существует также библиотека Iframe Resizer, но имейте в виду, что она поставляется с множеством дополнительных функций, которые вам могут и не понадобиться, и просто раздуют ваш код.
Примечание. Если вы используете библиотеку начальной загрузки в своем проекте, есть embed-responsive и встроенные embed-responsive-16by9, которые вы можете использовать прямо из коробки, чтобы адаптировать свои фреймы.
Как предотвратить появление белой вспышки во время загрузки iframe
Да, друзья мои, для этого есть решение. В этой статье Крис Койер делится небольшим фрагментом, который скрывает все iframes на странице с помощью некоторого CSS-кода и удаляет его до тех пор, пока окно не будет загружено, а затем сделает их видимыми.
Как перезагрузить содержимое iframe
Легче лёгкого! Поскольку вы можете получить доступ к элементу окна iframe с помощью contentWindow, вы должны сделать это:
// Get the iframe const iframe = document.getElementById('myIframe'); // Reload the iframe iframe.contentWindow.location.reload(); Я надеюсь, что это руководство помогло вам улучшить ваши знания о фреймах.
Хотя они могут быть небезопасными, если вы загружаете ненадежный контент, они также предлагают некоторые существенные преимущества. Поэтому вам не следует полностью исключать их из своего развивающегося арсенала, а использовать их только в соответствующих ситуациях.
Если у вас есть что добавить в эту статью, вы можете связаться со мной в комментариях ниже или просто пинговать меня в Twitter @RifkiNada
Сделаем web лучше.
Как вставить iframe в html
Тег создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.
Тег .
Синтаксис
Атрибуты
align Определяет как фрейм будет выравниваться по краю, а также способ обтекания его текстом. allowtransparency
Устанавливает прозрачный фон фрейма, через который виден фон страницы. frameborder Устанавливает, отображать границу вокруг фрейма или нет. height Высота фрейма. hspace Горизонтальный отступ от фрейма до окружающего контента. marginheight Отступ сверху и снизу от содержания до границы фрейма. marginwidth Отступ слева и справа от содержания до границы фрейма. name Имя фрейма. sandbox Позволяет задать ряд ограничений на контент загружаемый во фрейме. scrolling Способ отображения полосы прокрутки во фрейме. seamless Определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа. src Путь к файлу, содержимое которого будет загружаться во фрейм. srcdoc Хранит содержимое фрейма непосредственно в атрибуте. vspace Вертикальный отступ от фрейма до окружающего контента. width Ширина фрейма.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
HTML5 IE Cr Op Sa Fx
Тег IFRAME Как установить frame, iframe на сайт
Фрэймы позволяют легко отображать на вашем сайте информацию с других веб ресурсов, например, погоду, курс валюты или весь сайт. Это бывает незаменимо для организации сложных сайтов или веб программ.
iframe
В современной верстке на html5 используется тег iframe. Сегодня он поддерживается практически всеми браузерами. Частым примером его использования является YouTube, где чтобы поделиться видеороликом используется iframe код.
Задать его на сайте очень просто:
Как видите, достаточно указать лишь ссылку на источник, с которого будет браться информация. За счет атрибутов width и height мы задаем область фрэйма, а frameborder отключает рамку вокруг него. Если высота фрэйма недостаточна для отображения всего содержимого, то появится полоса прокрутки.
На одной странице можно указывать множество таких фрэймов. Однако, с точки зрения поисковой оптимизации фрэймами лучше не увлекаться.
frame
Второй тип фрэймов является предшественником iframe и работает на тегах frameset (это уже устаревающий вариант). Для организации таких фрэймов создайте отдельную страницу и пропишите следующий код:
Важной особенностью работы таких фрэймах является отсутствие тегов и на странице. Здесь мы видим, что подключаются сразу два сайта внутри frameset. В нем rows означает, что фрэймы будут распологаться друг за другом в строковом виде (если поставить cols — то стобиками). 20%,80% — первый фрэйм займет 20% всего пространства, а второй 80%. Если поставить *,* — то пространство поделится поровну.
Как вставить iframe в html
Мы встроили одну страницу в другую страницу, чтобы ты смотрел страницу пока смотришь страницу.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Обновлено 8 сентября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
— это контейнер, который позволяет вставить любой HTML-документ из другого источника. Часто этот документ интерактивный — например, карта, видео или пост из соцсети.
Этот контейнер обычно называют фреймом. Внешний вид фрейма и его положение на странице можно задать через CSS.
Пример
Скопировать ссылку «Пример» Скопировано
С помощью такого нехитрого кода мы можем встроить карту размером 560 на 400 пикселей на любую страницу:
title="Inline Frame Map" width="560" height="400" frameborder="1" allowfullscreen="true" src="https://yandex.ru/map-widget/v1/-/CBFkaYSE0A">iframe id="inlineFrameExample" title="Inline Frame Map" width="560" height="400" frameborder="1" allowfullscreen="true" src="https://yandex.ru/map-widget/v1/-/CBFkaYSE0A" > iframe>
Как понять
Скопировать ссылку «Как понять» Скопировано
можно представить как «окно» или фрейм, через которое на вашей странице можно увидеть любое содержимое с других сайтов. Это значит, что если карту, видео, пост или другой элемент удалят с оригинального сайта, он пропадёт и с вашей страницы. Останется только пустое место или надпись вроде «Контент недоступен».
Встраивать файлы можно либо по ссылке с помощью атрибута src , либо целиком HTML-код файла с помощью srcdoc .
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Часто сервисы, из которых мы хотим что-то встроить (карты, посты и тому подобное), сами могут сгенерировать вам . Его останется только добавить в свой код.
Контейнер . . . < / iframe>нужно всегда закрывать.
Атрибуты
Скопировать ссылку «Атрибуты» Скопировано
src — URL-адрес файла, который вы встраиваете.
srcdoc — позволяет встроить HTML-код целиком, так что браузеру не придётся подгружать что-то по внешней ссылке. Если используется этот атрибут, то ссылка src игнорируется.
sandbox — ограничивает определённые действия и функции встраиваемого документа. Если просто указать атрибут sandbox , то он применит сразу все возможные ограничения. Либо можно указать нужные ограничения в любом порядке через пробел:
Возможные значения атрибута sandbox
- allow — forms — позволяет отправлять формы внутри .
- allow — modals — позволяет открывать модальные окна, которые мы все так не любим: вроде «Оставьте свой имейл» или «Не уходите так быстро! У вас товар в корзине». Обычно эти окна не дают пользоваться сайтом, пока их не закроешь.
- allow — orientation — lock — позволяет фиксировать горизонтальное или вертикальное положение экрана.
- allow — pointer — lock — позволяет пользователю управлять содержимым с помощью курсора через Pointer Lock API.
- allow — popups — разрешает показ всплывающих окон, вызванных с помощью window . open ( ) , target = » _ blank» или show Modal Dialog ( ) .
- allow — popups — to — escape — sandbox — позволяет содержимому фрейма открывать новые окна. С этим параметром у таких окон не будет тех ограничений, которые есть у с атрибутом sandbox .
- allow — presentation — разрешает использовать Presentation API.
- allow — same — origin — контент из загружается по тем же правилам и с теми же ограничениями, что и страница, на которой он находится.
- allow — scripts — позволяет загружать скрипты. При этом всплывающие окна будут запрещены.
- allow — top — navigation — позволяет открывать ссылки, которые есть в , в том же окне, в которое встроен фрейм.
- allow — top — navigation — by — user — activation — позволяет контенту из фрейма управлять страницей, на которой он находится. Но только по инициативе пользователя.
name — имя фрейма. Пригодится, чтобы создать ссылку, по которой новая страница будет открываться в нужном фрейме.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Атрибут sandbox будет игнорироваться, если использовать одновременно значения allow — scripts и allow — same — origin и если исходная страница и на ней загружаются из одного и того же источника.
�� Помните, что — этот как будто ещё одна страница, которая загружается внутри вашей страницы. Содержимое фрейма может загружаться дольше, чем ваш сайт.
�� В стоит добавить атрибут title на случай, если пользователь не может увидеть страницу и использует инструмент чтения с экрана. Например, так:
iframe title="Страница в Википедии о лемурах" src="https://ru.wikipedia.org/wiki/Обыкновенные_лемуры">iframe>
На практике
Скопировать ссылку «На практике» Скопировано
Дока Дог советует
Скопировать ссылку «Дока Дог советует» Скопировано
�� Я редко использую . Только когда надо, например, встроить видео с YouTube.
Почти всегда лучше настроить заголовок cross — origin (это делается на уровне сервера) так, чтобы сторонние сайты не могли встраивать к себе ваш сайт как фрейм — это часто используется для всяких махинаций.