HTML Iframe

HTML Iframe используется для отображения вложенной веб-страницы (веб-страницы внутри веб-страницы). Тег HTML <iframe> определяет встроенный фрейм, поэтому он также называется встроенным фреймом.
iframe HTML встраивает другой документ в текущий документ HTML в прямоугольной области.
Содержимое веб-страницы и содержимое iframe могут взаимодействовать друг с другом с помощью JavaScript.
Синтаксис фрейма
HTML iframe определяется с помощью тега <iframe>:
<iframe src="URL"></iframe>
Здесь атрибут «src» указывает веб-адрес (URL) страницы встроенного фрейма.

Установить ширину и высоту iframe

Вы можете установить ширину и высоту iframe, используя атрибуты «width» и «height». По умолчанию значения атрибутов указаны в пикселях, но вы также можете указать их в процентах. т.е. 50%, 60% и т.д.

Пример: (Пиксели)<./h3>

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<h2>Пример HTML Iframes</h2>
<iframe src="https://example.com" height="300" width="400"></iframe>
</body>
</html>

Пример: (Процент)

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<h2>HTML Iframes</h2>
<iframe src="https://example.com" height="50%" width="70%"></iframe>
</body>
</html>

Вы также можете использовать CSS для установки высоты и ширины iframe.

Пример

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<h2>HTML Iframes</h2>
<iframe src="https://example.com" style="height:300px; width:400px"></iframe>
</body>
</html>

Удалить границу iframe

По умолчанию iframe содержит рамку вокруг себя. Вы можете удалить границу, используя атрибут style и свойство границы CSS.

Пример

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<h2>удаляем у Iframe рамку</h2>
<iframe src="https://example.com" style="border:none;"></iframe>
</body>
</html>

Вы также можете изменить размер, цвет, стиль границы iframe.

Пример

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<iframe src="https://example.com" style="border:2px solid tomato;"></iframe>
</body>
</html>

целевой фрейм для ссылки

Вы можете установить целевой фрейм для ссылки с помощью iframe. Указанный вами целевой атрибут ссылки должен ссылаться на атрибут имени iframe.

Пример

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<iframe height="300px" width="100%" src="new.html" name="iframe_a"></iframe>
<a href="https://example.com" target="iframe_a">example.com</a>
</body>
</html>

Встроить видео с YouTube с помощью iframe

Вы также можете добавить видео YouTube на свою веб-страницу, используя тег <iframe>. Прикрепленное видео будет воспроизводиться на вашей веб-странице, и вы также можете установить высоту, ширину, авто воспроизведение и многие другие свойства для видео.
Ниже приведены некоторые шаги для добавления видео YouTube на вашу веб-страницу:
◦ Перейдите к видео YouTube, которое вы хотите встроить.
◦ Нажмите ПОДЕЛИТЬСЯ ➦ под видео.
◦ Нажмите на опцию «Вставить <>».
◦ Скопируйте HTML-код.
◦ Вставьте код в свой HTML-файл
◦ Измените высоту, ширину и другие свойства (согласно требованию).

Пример

<iframe width="560" height="315" src="https://www.youtube.com/embed/usE9s6zbt0w" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Атрибуты <iframe>

allowfullscreen
Если это true, то этот кадр можно открыть в полноэкранном режиме.

height
Пиксели
Он определяет высоту встроенного iframe, а высота по умолчанию составляет 150 пикселей.

name
текст
Он дает имя iframe. Атрибут имени важен, если вы хотите создать ссылку в одном фрейме.

frameborder
1 или 0
Он определяет, должен ли iframe иметь границу или нет. (Не поддерживается в HTML5).

Width
Пиксели
Он определяет ширину встроенной рамки, а ширина по умолчанию составляет 300 пикселей.

src
URL-адрес
Атрибут src используется для указания пути или имени файла, содержимое которого загружается в iframe.

sandbox
Этот атрибут используется для применения дополнительных ограничений к содержимому фрейма.

allow-forms
Это позволяет отправить форму, если это ключевое слово не используется, то отправка формы блокируется.

allow-popups
Он активирует всплывающие окна, и если его не применить, всплывающее окно не откроется.

allow-scripts
Это позволит запустить скрипт.

allow-same-origin
Если используется это ключевое слово, встроенный ресурс будет считаться загруженным из того же источника.

srcdoc
Атрибут srcdoc используется для отображения содержимого HTML во встроенном iframe. Он переопределяет атрибут src (если браузер поддерживает).

scrolling
Это указывает, что браузер должен предоставлять полосу прокрутки для iframe или нет. (Не поддерживается в HTML5)

Обсуждение закрыто.