Тег <iframe> в HTML предназначен для встраивания другого документа, чаще всего из другого источника (например, веб-страницы) в текущий документ. Это позволяет разработчикам добавлять различные виды содержимого, такие как видео, карты, а также любые внешние веб-страницы, прямо в их собственные приложения и сайты.

Основные атрибуты `<iframe>`

src: Указывает URL-адрес документа, который будет загружен в <iframe>.

width: Задает ширину <iframe> в пикселях или процентах.

height: Задает высоту <iframe> в пикселях или процентах.

frameborder (устаревший): Определяет наличие границы вокруг <iframe>. Значение "0" означает отсутствие границы, "1" – наличие.

allowfullscreen: Разрешает встраиваемому контенту использовать полноэкранный режим.

sandbox: Применяет дополнительные меры безопасности, ограничивая, что может делать контент внутри <iframe>.

Пример использования тега `<iframe>`

Вот простой пример, который показывает, как использовать тег <iframe> для вставки YouTube видео на страницу:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример использования тега iframe</title>
</head>
<body>
<h1>Встраивание видео с YouTube</h1>
<iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/dQw4w9WgXcQ"
        title="YouTube video"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen>
</iframe>
</body>
</html>

Безопасность при использовании `<iframe>`

При использовании <iframe> важно учитывать безопасность. Вот некоторые рекомендации:

Кросс-доменные политики: Встраиваемые страницы могут иметь различные политики CORS, которые могут ограничивать доступ к их содержимому.
Атрибут sandbox: Используйте атрибут sandbox, чтобы ограничить возможности встраиваемого контента. Например, вы можете запретить выполнение скриптов или форму.

Заключение

Тег <iframe> является мощным инструментом для встраивания внешнего контента на веб-страницы. При правильном использовании он может значительно улучшить пользовательский опыт. Однако важно соблюдать меры безопасности, чтобы защитить свой сайт от потенциальных угроз.

Предыдущий вопрос

Какие встроенные плееры есть в HTML?

Следующий вопрос

Как вставить знак авторского права?

Содержание:

Основные атрибуты <iframe>

Пример использования тега <iframe>

Безопасность при использовании <iframe>

Заключение

Редактировать