iframeЭто тег в HTML, который используется для вложения другого независимого HTML-документа в текущую страницу. iframe(Аббревиатура Inline Frame) позволяет встраивать другой веб-контент в текущую страницу, позволяя одновременно отображать на странице несколько независимых документов.
При использовании iframeвы можете srcуказать URL-адрес документа для встраивания, задав свойство. Вот простой iframeпример:
<iframe src="https://www.example.com" width="600" height="400" frameborder="0"></iframe>
В приведенном выше коде srcатрибут указывает URL-адрес встраиваемого документа widthи heightустанавливает iframeширину и высоту соответственно frameborder, чтобы контролировать, отображать ли границу, 0 означает, что она не отображается.
iframeСценарии применения очень широки и в основном включают следующие аспекты:
-
Встраивание внешних веб-страниц. Чаще всего используется встраивание другой веб-страницы в веб-страницу, чтобы пользователи могли просматривать содержимое других веб-сайтов на текущей странице, не покидая текущую страницу.
<iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315" frameborder="0" allowfullscreen></iframe>Видео YouTube встроено в приведенный выше код
iframe, и пользователи могут смотреть видео прямо на текущей странице. -
Отображение рекламы. Рекламные объявления обычно
iframeвстраиваются в веб-страницы для отображения рекламного контента в определенных местах страницы.<iframe src="https://advertising.com/ads" width="300" height="250" frameborder="0"></iframe>В приведенном выше коде показан код, используемый для показа рекламы
iframe. -
Реализуйте многопанельный макет веб-страниц. В некоторых сложных сценариях приложений вы можете использовать
iframeвложение различных функциональных блоков или модулей на одну и ту же страницу для формирования многопанельного макета.<iframe src="sidebar.html" width="200" height="600" frameborder="0"></iframe> <iframe src="main-content.html" width="800" height="600" frameborder="0"></iframe>Приведенный выше код демонстрирует, как
iframeреализовать разделение боковой панели и области основного контента страницы с помощью . -
Загрузка стороннего контента. Некоторые поставщики услуг могут предоставлять коды для внедрения, которые
iframeможно интегрировать в их собственные веб-страницы.<iframe src="https://widgets.example.com/widget" width="300" height="150" frameborder="0"></iframe>Приведенный выше код
iframeвстраивает виджеты, предоставленные третьими лицами, в текущую страницу. -
Сохраняйте независимость:
iframeсодержимое относительно независимо. Даже если оно вложено в главную страницу, оно имеет собственный поток документов и область действия и не зависит от главной страницы. Эта функция позволяетiframeиспользовать ее для изоляции контента из разных источников и повышения безопасности.
Следует отметить, что использование iframeтакже может вызвать некоторые проблемы, такие как проблемы безопасности, проблемы с производительностью и влияние на поисковые системы. Поэтому при использовании iframeнеобходимо тщательно учитывать различные факторы, чтобы обеспечить его применимость в конкретных сценариях.