IFRAME (тег в HTML)
Что такое iframe в html:
Позволяет встраивать контент (например, веб-страницы, видео) прямо в ваш документ HTML.Атрибуты:
- align - Определяет как фрейм будет выравниваться по краю, а также способ обтекания его текстом.
- allowtransparency - Устанавливает прозрачный фон фрейма, через который виден фон страницы.
- frameborder - Устанавливает, отображать границу вокруг фрейма или нет.
- height - Высота фрейма.
- hspace - Горизонтальный отступ от фрейма до окружающего контента.
- marginheight - Отступ сверху и снизу от содержания до границы фрейма.
- marginwidth - Отступ слева и справа от содержания до границы фрейма.
- name - Имя фрейма.
- scrolling - Способ отображения полосы прокрутки во фрейме.
- seamless - Определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа.
- src - Путь к файлу, содержимое которого будет загружаться во фрейм.
- srcdoc - Хранит содержимое фрейма непосредственно в атрибуте.
- vspace - Вертикальный отступ от фрейма до окружающего контента.
- width - Ширина фрейма.
Как прописать iframe в html:
<iframe src="https://dimos.ru/" width="600" height="400"></iframe>Другие атрибуты
sandbox
Это важный атрибут с точки зрения безопасности. Он позволяет контролировать, какие активности разрешены внутри <iframe>.
<iframe src="https://dimos.ru/" sandbox="allow-scripts allow-same-origin"></iframe>
Значение allow-scripts разрешает выполнение скриптов внутри фрейма, а allow-same-origin позволяет фрейму обращаться к ресурсам его исходной страницы.
loading
Атрибут loading может помочь с оптимизацией производительности и отложить загрузку iframe до тех пор, пока это не будет необходимо.
<iframe src="https://dimos.ru/" loading="lazy"></iframe>
allowfullscreen, allowpaymentrequest
allowfullscreen: позволяет встроенному контенту открываться в полноэкранном режиме.
allowpaymentrequest: позволяет встроенному контенту делать запросы на оплату.
title
Не забывайте об универсальных атрибутах, таких как title, которые способствуют улучшению доступности.
<iframe src="https://dimos.ru/" title="Example Content"></iframe>
