Тег <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>