Тег <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://zolin.digital/" target="myFrame">Открыть zolin.digital</a></p>

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.