HTML практически не нуждается в представлении, учитывая его широкое распространение во всем мире. HTML означает язык гипертекстовой разметки, наиболее широко используемый язык для разработки веб-приложений. HTML предоставляет несколько тегов, которые можно использовать практически в любом случае использования веб-приложения.
Одним из таких тегов является тег <iframe>. iframe — это тег, который используется для встраивания документа в документ. Например, встраивание карт на веб-страницу или видео YouTube на веб-сайт.
В этой статье основное внимание уделяется тому, что такое iframe и главные способы его реализации. Это важный тег HTML, поскольку многим веб-приложениям необходимы встроенные элементы, такие как карты, веб-реклама и так далее. HTML имеет решающее значение для веб-разработки, и если вы когда-нибудь задумывались о том, чтобы выбрать веб-разработку в качестве карьеры, вы, несомненно, столкнулись с этим языком.
Как работает iFrame?
HTML — это не что иное, как теги, которые он образует. В HTML есть тег почти для каждого элемента, который вы можете добавить на веб-страницу. <iframe> — один из важных тегов, который часто используется для встраивания других документов, таких как веб-страницы, карты и так далее.
iframe в HTML означает встроенный фрейм. Тег <iframe> определяет прямоугольную область внутри текущего документа или веб-страницы. Веб-браузер может отображать другой документ на текущей странице, включая полосы прокрутки и границы.
Как и любой другой тег, тег <iframe> также имеет несколько связанных с ним атрибутов. Такие атрибуты, как src, высота, ширина и другие, определяют и редактируют область, созданную тегом <iframe>.
Синтаксис:
<iframe src=»URL-адрес документа» title=»описание документа»></iframe>
Примеры кода для вставки iFrame на веб-страницу
Итак, давайте углубимся в практический аспект этого HTML-тега и напишем простую веб-страницу, которая отображает некоторый текст и другой документ на этой же странице.
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<h1>HTML Iframe Tag</h1>
<br />
<h2>Simplilearn video embedded using iframe...</h2>
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/ukzFI9rgwfU"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</body>
</html>Вот как выглядит код во время iFrame вставки на веб-страницу.
Давайте посмотрим на каждый HTML-тег, который мы использовали при создании этой веб-страницы:
<html>
Этот тег является своего рода оберткой для всего веб-приложения, все находится внутри этого тега и завершается до закрытия этого тега.
<head>
Этот тег используется для хранения метаданных о веб-приложении. В этом теге выполняются такие действия, как заголовок веб-приложения или импорт JavaScript или CSS в веб-приложение.
<body>
Этот тег используется для отображения содержимого на экране при просмотре веб-браузером. Таким образом, все, что должно быть показано пользователю на экране, помещается в этот тег.
<h1>, <h2>
В HTML имеется несколько тегов для форматирования текста. <h1> и <h2> — два таких тега. Эти теги означают «заголовок 1» и «заголовок 2» соответственно. Есть несколько других тегов, таких как «заголовок 3» и «абзац», которые обозначаются сокращениями <h3> и <p> соответственно.
<br>
Этот тег используется для разрыва строки между элементами HTML.
<iframe>
Этот HTML-тег является основной темой этой статьи. Как обсуждалось выше, он используется для встраивания других документов на веб-страницу. Атрибуты необходимы для определения и редактирования региона, созданного тегом <iframe>. Здесь используются следующие атрибуты:
- width: устанавливает ширину области iframe.
- height: устанавливает высоту области iframe.
- src: содержит URL-адрес документа, который должен быть встроен в веб-страницу.
- frameborder: определяет границу области iframe.
- allow: набор атрибутов для установки значений таких параметров, как автоповорот и т. д.
- allowfullscreen: определяет, можно ли расширить iframe до полноэкранного режима.
Результат:
Вот как должна выглядеть веб-страница, если вы закодируете ее точно так, как указано выше. Поздравляем, вы только что написали свое первое веб-приложение со встроенным документом.
Применение iFrame
Встроенные фреймы имеют множество практических применений, которые расширяют стандартный дизайн и функциональность веб-страницы. Наиболее распространенные случаи использования включают в себя:
- Встраивание мультимедийного контента. Элементы Iframe обычно используются для встраивания мультимедийного контента, такого как видео, аудиофайлы и анимация, с таких платформ, как YouTube, Vimeo и SoundCloud. Это позволяет пользователям взаимодействовать с контентом непосредственно на посещаемом веб-сайте, не уходя со страницы.
- Интеграция сторонних приложений. Веб-разработчики используют iframe для беспрепятственной интеграции сторонних приложений в свои веб-сайты. Например, компания может встроить виджет Google Maps, чтобы показать свое местоположение, или сайт электронной коммерции может включать платежный шлюз для транзакций.
- Отображение рекламы. Iframes — популярный выбор для отображения рекламы на веб-страницах. Они могут отделять рекламный контент от контента главной страницы, что помогает управлять рекламными сценариями и независимо отслеживать просмотры или клики.
- Загрузка внешнего контента. Iframes может загружать контент из внешних источников, таких как ленты новостей, обновления погоды или сообщения в социальных сетях. Таким образом, они обогащают хост-сайт динамическим контентом без сложной интеграции с серверной частью.
- Создание сайта внутри сайта. Iframes может создать «сайт внутри сайта», где посетители могут перемещаться по другому веб-сайту, не покидая исходную страницу. Это особенно полезно для размещения микросайтов или каталогов продукции.
- Изоляция контента, специфичного для браузера. Разработчики могут использовать iframe для изоляции контента, который ведет себя по-разному в разных браузерах, гарантируя, что он не влияет на остальную часть страницы. Это может быть временным решением, пока разрабатывается постоянное решение.
- Улучшение дизайна и макета. Iframes может помочь создать более сложные макеты веб-страниц. Дизайнеры могут использовать их для встраивания интерактивных или фиксированных элементов на страницу, таких как постоянный музыкальный проигрыватель или окно чата.
- Упрощение обновления контента. Когда один и тот же контент должен отображаться на нескольких страницах, можно использовать iframe для централизации контента в одном месте. Таким образом, обновления содержимого необходимо вносить только один раз, и изменения будут автоматически отражаться везде, где встроен iframe.
Iframes имеет также много практических применений, помимо видео или изображения на веб-странице.
Настройка iFrame через CSS
Чтобы применить iframe CSS в HTML, попробуйте упомянутые инструкции.
- Создайте элемент div
Сначала создайте контейнер div, используя тег «<div>», и вставьте атрибут «id» во внутренний тег div.
- Добавьте заголовки
Добавьте заголовок между тегом «<div>», используя тег «<h1>». Вставьте второй заголовок с помощью тега «<h2>».
- Вставьте тег «<iframe>»
Затем вставьте тег «<iframe>», чтобы добавить встроенный фрейм веб-страницы в контейнер div. Далее добавьте следующие атрибуты внутри тега iframe:
Атрибут «src» используется для добавления URL-адреса веб-страницы в фрейм.
- «Height» определяет высоту созданного встроенного фрейма.
- «Width» определяет размер ширины кадра.
- Оформление первого заголовка
Затем задайте стиль первому заголовку, применив свойства CSS:
- Свойство «font-family» может содержать несколько названий шрифтов в качестве «резервной» системы. Он используется для указания шрифта элемента.
- «color» определяет цвет шрифта.
- Оформление второго заголовка
Теперь оформите второй заголовок по вашему выбору:
Согласно приведенному выше фрагменту кода:
- «font-style» назначает определенный стиль для определенного шрифта.
- «color» установлен как «синий» цвет для <h2>.
- Доступ к контейнеру Div для стилизации
Получите доступ к контейнеру div «id», используя имя идентификатора «#div-iframe», и примените свойства CSS, указанные ниже:
- Свойство «margin» определяет данное пространство за пределами границы.
- Свойство text-align выравнивает добавленный текст по центру.
- Оформление iframe с помощью свойств CSS
Чтобы стилизовать iframe, примените свойства CSS в соответствии с вашими предпочтениями. Например, мы использовали свойство «border» для определения границы вокруг элемента и «border-style» для стилизации границы. CSS был успешно применен к добавленному iframe.
Чтобы применить CSS к iframe, сначала добавьте iframe, используя тег «<iframe>» в HTML. Затем откройте его, используя имя тега, и примените необходимые свойства CSS, включая «границу», «цвет», «высоту» и «ширину», чтобы стилизовать и улучшить внешний вид iframe. В этом посте продемонстрирован метод применения свойств CSS к iframe.
Безопасность и ограничения при использовании iFrame
Два вышеуказанных атрибута обеспечивают безопасность ваших элементов iframe, но не являются защитой от всех вредоносных сайтов. Если вредоносный сайт может убедить посетителей вашего сайта напрямую получить доступ к враждебному контенту (например, введя URL-адрес в своем браузере), они все равно могут быть атакованы. Если возможно, установите содержимое изолированного iframe в изолированной программной среде как MIME-тип text/html-sandbox.
Тестирование функциональности iFrame
Чтобы протестировать iframe, нам сначала нужно поговорить о том, когда вы можете тестировать содержимое iframe. Ранее мы говорили о модульных тестах: вы не собираетесь тестировать содержимое iframe на этапе модульного тестирования. Это связано с тем, что модульные тесты предназначены для проверки логики приложения вашего кода. Хорошо спроектированные модульные тесты не должны включать зависимости от внешних ресурсов.
При модульном тестировании вы хотите протестировать наименьшую возможную «единицу» кода, но вместо этого мы тестируем iFrames в течение периода тестирования, известного как функциональное тестирование. Функциональное тестирование — это часть плана тестирования, в которой вы определяете, работает ли все приложение в тот момент, когда с ним взаимодействует конечный пользователь.
Для веб-сайта это означает тестирование веб-сайта так, как он выглядит в реальном браузере. Вы будете загружать веб-сайт на реальный сервер, обслуживать реальный контент, а затем писать сценарии, чтобы гарантировать, что то, что вы видите, соответствует вашим ожиданиям.
Альтернативы iFrame
В этом блоке представлены некоторые эффективные альтернативы Iframe в HTML для отображения вашего.
Тег объекта
Тег объекта — одна из лучших альтернатив для встраивания внешних ресурсов и отображения другой веб-страницы на конкретной. Мы можем использовать его для различных мультимедийных компонентов, таких как видео, изображения или аудио.
Этот тег создан на основе атрибутивных данных, что позволяет пользователям определять URL-адрес веб-страницы для встраивания. Мы также можем установить ширину и высоту контейнера благодаря его атрибутам.
Встраиваемый тег
Подобно тегу объекта, он служит той же цели. Вы можете использовать его для внешних ресурсов на веб-страницах, таких как изображения, видео, PDF-файлы и аудио.
Самозакрывающийся тег создан для определения контейнера для встраивания определенного желаемого контента. Атрибут src и тип one помогают пользователям указать URL-адрес встроенной веб-страницы.
Измерение высоты и ширины этого тега указывается в пикселях. Поэтому это будет идеальная альтернатива тегу iframe в HTML.
Заключение
В заключение отметим, что код iframe в HTML предлагают веб-разработчикам мощный инструмент для беспрепятственного встраивания внешнего контента в веб-страницы. Понимая основы iframe и внедряя лучшие практики, разработчики могут улучшить взаимодействие с пользователем и предоставить привлекательный контент. Кроме того, получение сертификации HTML является важным шагом на пути к освоению веб-разработки, получению конкурентного преимущества и поддержанию соответствия отраслевым стандартам. Обладая необходимыми навыками и знаниями, вы сможете открыть мир возможностей и поднять свою карьеру на новые высоты в захватывающей сфере веб-разработки вместе с FoxmindED!
Остались вопросы о том, что такое iframe? Спрашивайте в комментариях ниже!