Что такое HTML iframe и с чем их "едят"? | Бизнес блог Макса Метелева

29 марта, 2018 Максим Метелев 97496 просмотров Комментариев нет

Всем привет дорогие друзья! В сегодняшнем очередном уроке по изучения языка HTML мы поговорим про iframe. Говоря простым языком — iframe это отображение страницы сайта внутри сайта. Т.е как бы сайт в сайте.

Выглядит он следующим образом:

Пример простого html iframe

Содержание

1 Синтаксис iframe
2 Установка высоты и ширины iframe
3 Удаление границы рамки iframe
4 Атрибут target для ссылки в iframe

Синтаксис iframe

Определяется очень просто парными тегами <iframe></iframe>

Пример:

<iframe src="URL"></iframe>

1	<iframe src="URL"></iframe>

в нашем случае атрибутом src будет являться ссылка другого веб-сайта, который будет в режиме реального времени отображаться на нашей странице, т. е у нас будет встроенный фрейм.

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

Используйте обязательные атрибуты высоты (height) и ширины (width) для задания iframe размера.

<iframe src="demo_iframe.htm" height="200" width="300"></iframe>

1	<iframe src="demo_iframe.htm" height="200" width="300"></iframe>

Встроенный iframe

Как мы видим из примера выше нам подгрузился iframe страницы с названием demo_iframe.html содержимое которого мы видим на экране.

Для определения высота и длины фрейма вы можете прибегнуть за помощью к таблице стилей CSS, т.е использовать внутренние CSS стили.

Пример:

<iframe src="demo_iframe.htm" style="height:200px;width:300px;"></iframe>

1	<iframe src="demo_iframe.htm" style="height:200px;width:300px;"></iframe>

Применение внутренних стилей к iframe

Удаление границы рамки iframe

По умолчанию вокруг нашего фрейма проходит рамка, чтобы ее удалить достаточно прописать некоторые стили и добавить свойство border:none; где значение None означает не использовать рамку.

<iframe src="demo_iframe.htm" style="border:none;"></iframe>

1	<iframe src="demo_iframe.htm" style="border:none;"></iframe>

Удаление рамки iframe

Используя дополнительные стили можно задать размер, цвет границы. Ниже пример все демонстрирует:

<iframe src="demo_iframe.htm" style="border:2px solid red;"></iframe>

1	<iframe src="demo_iframe.htm" style="border:2px solid red;"></iframe>

Добавили красную рамку Iframe

Как мы видим мы задали размер в 2px границам iframe и сделали ее красного цвета.

Атрибут target для ссылки в iframe

Iframe может использоваться как ссылка, таким образом мы ссылаемся на iframe у которого присвоено имя name:

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a" rel="noopener noreferrer">W3Schools.com</a></p>

<p><a href="https://www.w3schools.com" target="iframe_a" rel="noopener noreferrer">W3Schools.com</a></p>

Т.е у нас изначально есть iframe в первой строчке и ему присвоено имя name=iframe_a А следующая строчка его подгружает, благодаря атрибуту target с этим же именем.

Атрибут target iframe

Сейчас объясню механику примера. Изначально у нас подгрузился фрейм с другой страницы по умолчанию. В тексте параграфа мы видим ссылку, нажав на которую мы в области нашего исходного фрейма увидим сайт ссылку которого мы указали в href. Т.е получится вот такой результат:

При нажатии на ссылку подгрузился другой сайт во фрейме

На этом наш короткий урок, посвященный iframe в html подошел к концу. Я немного активизировался в предверии поставленной цели в 1000 уникальных посетителей в день. Поддержите мой проект. Рассказывайте о нем своим знакомым. Сделаем интернет интереснее, познавательнее и чище!

Рубрики: Обучение html