Тег <iframe> или встроенный фрейм используется для отображения внешних объектов, в том числе других веб-страниц. Iframe в значительной степени действует как мини-браузер в веб-браузере. Кроме того, содержимое внутри iframe существует полностью независимо от окружающих элементов.
Основной синтаксис для добавления iframe на веб-страницу может быть выражен с помощью:
<iframe src="URL"></iframe>URL-адрес, указанный в атрибуте src, указывает на местоположение внешнего объекта или веб-страницы.
В следующем примере файл hello.html отображается внутри iframe в текущем документе.
<iframe src="hello.html"></iframe>Настройки width и height для iFrame
Атрибуты height и width используются для указания высоты и ширины iframe.
<iframe src="hello.html" width="400" height="200"></iframe>Вы также можете использовать CSS, чтобы установить ширину и высоту фрейма, как показано здесь:
<iframe src="hello.html" style="width: 400px; height: 200px;"></iframe>См. Руководство по стилям в HTML, чтобы узнать методы применения CSS к HTML-элементам.
Значения атрибутов width и height задаются в пикселях по умолчанию, но вы также можете установить эти значения в процентах, например, 50%, 100% и т. д. Для iframe ширина по умолчанию составляет 300 пикселей, а высота 150 пикселей.
Удаление рамки по умолчанию
По умолчанию у iframe есть рамка. Однако, если вы хотите изменить или удалить границы iframe, лучше всего использовать CSS-свойство border.
Следующий пример просто отобразит iframe без каких-либо границ.
<iframe src="hello.html" style="border: none;"></iframe>Точно так же вы можете использовать свойство border, чтобы добавить границы в iframe. В следующем примере будет отображаться iframe с синей рамкой в 2 пикселя.
<iframe src="hello.html" style="border: 2px solid blue;"></iframe>Использование iFrame в качестве ссылки
Iframe также может быть использован в качестве цели для гиперссылки.
Iframe может быть назван с использованием атрибута name. Это означает, что при нажатии на ссылку с целевым атрибутом target в качестве значения связанный ресурс откроется в этом фрейме.
Посмотрим пример, чтобы понять, как это работает:
<iframe src="demo-page.html" name="myFrame"></iframe>
<p><a href="https://artzolin.ru/" target="myFrame">Открыть zolin.digital</a></p>
