HTML-тег <iframe>

HTML-тег <iframe> используется для встраивания другого HTML-документа в текущий документ. Встраиваемый контент может представлять собой веб-страницу, видео, карту или другие ресурсы, создавая «рамку» внутри текущей веб-страницы. Тег <iframe> — это универсальный инструмент для бесшовной интеграции внешнего или дополнительного контента.

Тег <iframe> обычно используется для таких целей, как встраивание видео YouTube, Google Maps, рекламы или сторонних виджетов.

Базовый синтаксис HTML-тега <iframe>

Базовая структура тега <iframe> :

<iframe src="URL" width="width-value" height="height-value"></iframe>

Атрибут src указывает URL-адрес встроенного ресурса, а атрибуты width и height определяют размер iframe.

Атрибуты HTML-тега <iframe>

src: Указывает URL встроенного содержимого.
Ширина: определяет ширину iframe(в пикселях или процентах).
высота: определяет высоту iframe(в пикселях или процентах).
разрешить: задает разрешения для iframe, например fullscreen или autoplay .
имя: присваивает имя iframe, на которое могут ссылаться скрипты или ссылки.
«песочница»: включает ограничения на содержимое iframe в целях безопасности, например, запрещает формы или скрипты.
frameborder: указывает, должен ли iframe иметь рамку(устарело; вместо этого используйте CSS).
загрузка: определяет, когда следует загружать iframe: lazy (по требованию) или eager (немедленно).
allowfullscreen: позволяет отображать содержимое iframe в полноэкранном режиме.

Базовый пример HTML-тега <iframe>

Вот простой пример встраивания веб-страницы с помощью iframe:

<!DOCTYPE html>
<html>
    <body>
        <h2>Embedded Webpage</h2>
        <iframe src="https://www.example.com" width="500" height="400"></iframe>
    </body>
</html>

Пояснение: В этом примере веб-сайт https://www.example.com встраивается в iframe шириной 600 пикселей и высотой 400 пикселей.

Использование атрибута песочницы

Атрибут sandbox накладывает ограничения на содержимое внутри iframe в целях безопасности:

<!DOCTYPE html>
<html>
    <body>
        <h2>Sandboxed Iframe</h2>
        <iframe src="https://www.example.com" width="600" height="400" sandbox="allow-scripts"></iframe>
    </body>
</html>

Пояснение: Атрибут sandbox в этом примере позволяет выполнять только скрипты во встроенном содержимом, блокируя другие действия, такие как отправка форм или использование плагинов.

Стилизация тега <iframe> с помощью CSS

Вы можете настроить внешний вид iframe с помощью CSS:

<!DOCTYPE html>
<html>
    <head>
        <style>
            iframe {
                border: 2px solid #007BFF;
                border-radius: 10px;
                margin: 20px auto;
                display: block;
            }
        </style>
    </head>
    <body>
        <h2>Styled Iframe</h2>
        <iframe src="https://www.example.com" width="600" height="400"></iframe>
    </body>
</html>

Результат: iframe имеет синюю рамку, закругленные углы и располагается по центру страницы.

Практическое применение тега <iframe>

Встраивайте внешние веб-страницы: включайте другие веб-сайты или ресурсы в свою веб-страницу.
Интеграция видео: встраивайте видео с таких платформ, как YouTube или Vimeo.
Интерактивные карты: включите карты, такие как Google Maps, для навигации и отображения местоположения.
Реклама: показ рекламы или баннеров сторонних поставщиков.
Пользовательские виджеты: добавляйте виджеты погоды, калькуляторы и другие интерактивные инструменты.