Понимание iFrame и их использование

Опубликовано: 2022-04-06

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

Давайте прыгнем в это.

Что такое iFrame ?

iFrame — это сокращение от «Inline Frame». Его цель — встроить HTML-контент в другой HTML-контент и отобразить его как элемент веб-страницы.

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

iFrames — это HTML-тег, который существует уже целую вечность, будучи представленным еще в 1997 году. Несмотря на свой возраст, они по-прежнему широко используются и поддерживаются всеми современными браузерами.

Как использовать фреймы

Чтобы создать простой iFrame, вы должны использовать HTML-элемент <iframe> и установить источник в атрибуте src . Чтобы попробовать, создайте html-файл, например, index.html . Затем откройте его в своем любимом редакторе и вставьте следующий код:

 <!DOCTYPE html> <html> <body> <h1>This is an iframe</h1> <iframe src="http://www.example.com"> </iframe> </body> </html>

Теперь, если вы откроете файл в браузере, вы должны увидеть что-то вроде этого:

iFrame

Как видите, размер iframe по умолчанию не включает всю ширину встроенного содержимого (в данном случае веб-страницы), поэтому автоматически появляется полоса прокрутки, позволяющая перемещаться внутри окна.

Теперь давайте сами установим ширину и высоту iFrame:

 <!DOCTYPE html> <html> <body> <h1>This is an iframe</h1> <iframe src="http://www.example.com" width="480" height="320" > </iframe> </body> </html>

Обновите страницу и посмотрите, как она выглядит сейчас.

iFrame с размерами

Существует множество других параметров, которые можно настроить при использовании iFrames. Наиболее популярными и полезными являются:

  • name : мы можем установить имя Fframe, чтобы использовать его в JavaScript.
  • loading : определите, как загружается iFrame. Выберите «ленивый», «нетерпеливый» или «автоматически». Например, когда используется значение «ленивый», iFrame загружается, когда пользователь прокручивает страницу вниз до iFrame. Это приводит к увеличению скорости загрузки страницы. «Eager» загружает его сразу, в то время как «auto» позволяет браузеру решать, когда загружать iFrame.
 <!DOCTYPE html> <html> <body> <div class="wrapper"> <iframe src="https://www.youtube.com/embed/PMz9ovrVb_Q" loading="lazy"></iframe> </div> </body> </html>
  • песочница : этот атрибут устанавливает некоторые ограничения для содержимого в iFrame, такие как выполнение скрипта, отправка формы и многое другое. Вы также можете сделать исключения для любого из них. Вот некоторые из ограничений:
    – разрешительные формы
    - разрешить блокировку указателя
    - разрешить всплывающие окна
    - разрешить то же происхождение
    - разрешить-скрипты
    - разрешить верхнюю навигацию
    - разрешить модальные окна

Вы можете применить все ограничения, просто добавив атрибут песочницы, или вы можете указать, что из вышеперечисленного будет исключено, определив его в коде следующим образом:

 <!DOCTYPE html> <html> <body> <iframe src="https://www.youtube.com/embed/PMz9ovrVb_Q" sandbox="allow-forms allow-modals"></iframe> </body> </html>
  • allowfullscreen : делает то, что написано на банке, и позволяет iFrame полностью открываться на экране.

Чтобы протестировать allowfullscreen , вы можете попробовать его, вставив видео с YouTube следующим образом:

 <!DOCTYPE html> <html> <body> <iframe width="560" height="315" src="https://www.youtube.com/embed/jofNR_WkoCE" allowfullscreen></iframe> </body> </html>

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

Как сделать iFrame адаптивным

Очень важно, чтобы все элементы на вашем сайте были адаптивными. iFrame не исключение. Чтобы обеспечить адаптивность HTML iFrame, необходимо сначала удалить атрибуты ширины и высоты из кода, а затем использовать некоторые элементы HTML и код CSS, как показано ниже:

 <!DOCTYPE html> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .container { position: relative; width: 100%; overflow: hidden; padding-top: 56.25%; /* 16:9 Aspect Ratio */ } .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; } </style> </head> <body> <div class="container"> <iframe class="responsive-iframe" src="https://www.youtube.com/embed/PMz9ovrVb_Q"></iframe> </div> </body> </html>

Мы обернули наш iFrame в элемент div и применили некоторый CSS для установки размеров, чтобы он хорошо выглядел на всех экранах, включая мобильные.

Разместите свой сайт с Pressidium

60- ДНЕВНАЯ ГАРАНТИЯ ВОЗВРАТА ДЕНЕГ

ПОСМОТРЕТЬ НАШИ ПЛАНЫ

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

ПРИМЕЧАНИЕ. Если вы не разбираетесь в инструментах своего браузера, вам может пригодиться такое расширение, как «Тестер адаптивного веб-дизайна» для Chrome.

Преимущества использования iFrame

iFrames очень популярны, и на то есть веские причины. Давайте рассмотрим некоторые из причин, почему:

Совместное использование внешних носителей

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

Пользовательские конфигурации

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

Изолировать вещи

Еще одна замечательная особенность iFrames заключается в том, что они не мешают родительскому документу (обычно странице вашего веб-сайта, в которую они встроены). Это означает, что на iFrames не влияет CSS и/или Javascript вашего веб-сайта.

Некоторые из наиболее популярных применений iFrames:

  • Вставьте видео с Youtube, временную шкалу Twitter или список воспроизведения подкастов Spotify.
  • Получите информацию о погоде на свой сайт, включив прогноз погоды.
  • Добавление местоположения на Google Maps

Пока источник, который вы хотите отобразить, предоставляет код для встраивания, вы обычно всегда можете отобразить его на своем сайте в iFrame.

Потенциальные недостатки использования iFrames

Одна из основных причин НЕ использовать iFrames заключается в том, что они могут увеличить риск того, что ваш сайт подвергнется межсайтовой атаке.

Если источник, встроенный в ваш iFrame, не заслуживает доверия, вы рискуете столкнуться с тем, что известно как «злонамеренная инъекция iFrame», когда злоумышленник внедряет iFrame на веб-страницу. При атаке с внедрением iFrame «вредоносные веб-сайты обычно используют код, который потенциально может скомпрометировать компьютер конечного пользователя».

Таким образом, при встраивании контента на ваш веб-сайт с помощью iFrames жизненно важно, чтобы этот контент исходил из надежного источника. Если сомневаетесь, не используйте его.

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

Вывод

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