Iframe в HTML

Iframe HTML показывает веб-страницу внутри другой веб-страницы.

Синтаксис Iframe HTML

Тег <iframe> создаёт встроенный фрейм, который вставляет другой документ внутрь текущей страницы.

Совет: Всегда включайте атрибут title у <iframe>. Программы чтения с экрана используют его для описания содержимого iframe.

Синтаксис iframe

Форма iframe.

<iframe src="url" title="description"></iframe>

Iframe - установка высоты и ширины

Используйте атрибуты height и width, чтобы задать размер iframe (по умолчанию в пикселях), или задайте их с помощью CSS-свойств height и width в атрибуте style.

С атрибутами

Iframe с размером, заданным атрибутами height и width.

Страница с iframe, встраивающим demo_iframe.html, размером 300 в ширину и 200 в высоту, заданным через атрибуты height и width, с заголовком (title) для доступности.

> Output: полная HTML-страница

Prompt

Страница с iframe, встраивающим demo_iframe.html, размером 300 в ширину и 200 в высоту, заданным через атрибуты height и width, с заголовком (title) для доступности.

Output: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Размер Iframe через атрибуты</title>
</head>
<body>

<iframe src="demo_iframe.html" height="200" width="300" title="Пример Iframe"></iframe>

</body>
</html>

С CSS

Iframe с размером, заданным CSS в атрибуте style.

Страница с iframe, встраивающим demo_iframe.html, размером 300px на 200px, заданным через атрибут style с CSS-свойствами height и width, и с заголовком (title).

> Output: полная HTML-страница

Prompt

Страница с iframe, встраивающим demo_iframe.html, размером 300px на 200px, заданным через атрибут style с CSS-свойствами height и width, и с заголовком (title).

Output: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Размер Iframe через style</title>
</head>
<body>

<iframe src="demo_iframe.html" style="height:200px;width:300px;" title="Пример Iframe"></iframe>

</body>
</html>

Iframe - удаление рамки

По умолчанию у iframe есть рамка. Удалите её с помощью CSS-свойства border, установленного в none, или используйте CSS, чтобы изменить размер, стиль и цвет рамки.

Без рамки

Iframe без рамки.

Страница с iframe, встраивающим demo_iframe.html, у которого рамка убрана с помощью атрибута style со значением border:none, и с заголовком (title).

> Output: полная HTML-страница

Prompt

Страница с iframe, встраивающим demo_iframe.html, у которого рамка убрана с помощью атрибута style со значением border:none, и с заголовком (title).

Output: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframe без рамки</title>
</head>
<body>

<iframe src="demo_iframe.html" style="border:none;" title="Пример Iframe"></iframe>

</body>
</html>

Цветная рамка

Iframe с красной рамкой.

Страница с iframe, встраивающим demo_iframe.html, с красной сплошной рамкой шириной 2px, заданной через атрибут style, и с заголовком (title).

> Output: полная HTML-страница

Prompt

Страница с iframe, встраивающим demo_iframe.html, с красной сплошной рамкой шириной 2px, заданной через атрибут style, и с заголовком (title).

Output: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframe с цветной рамкой</title>
</head>
<body>

<iframe src="demo_iframe.html" style="border:2px solid red;" title="Пример Iframe"></iframe>

</body>
</html>

Iframe - цель для ссылки

Iframe может быть целевым фреймом для ссылки. Установите атрибут target ссылки равным атрибуту name iframe, и связанная страница загрузится внутри iframe.

Пример

Ссылка, загружающая свою страницу внутри именованного iframe.

Страница с iframe с именем iframe_a, встраивающим demo_iframe.html, и ссылкой на PromptCookbook, у которой target равен iframe_a, чтобы она загружалась внутри iframe.

> Output: полная HTML-страница

Prompt

Страница с iframe с именем iframe_a, встраивающим demo_iframe.html, и ссылкой на PromptCookbook, у которой target равен iframe_a, чтобы она загружалась внутри iframe.

Output: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframe с target</title>
</head>
<body>

<iframe src="demo_iframe.html" name="iframe_a" title="Пример Iframe"></iframe>

<p><a href="https://prompt-cookbook.com" target="iframe_a">PromptCookbook</a></p>

</body>
</html>

Итоги главы

Подведём итог: тег <iframe> создаёт встроенный фрейм, атрибут src задаёт страницу для вставки, и всегда следует указывать title для программ чтения с экрана. Атрибуты height и width задают его размер, а border:none; убирает рамку.