Введение в iframes в HTML

Iframes в HTML - это не что иное, как встроенные фреймы, которые используются в качестве HTML-документа для добавления в него другого HTML-документа. Он в основном используется на веб-страницах или в процессах веб-разработки для включения некоторого другого контента через другой источник, например рекламу на этой веб-странице.

Большинство веб-дизайнеров используют Iframe для представления интерактивных приложений на веб-сайте или на веб-страницах. Это стало возможным благодаря использованию javaScript или атрибута target в HTML.

Основной целью Iframe является отображение веб-страницы на другой веб-странице. Встроенная рамка должна отображаться с помощью тега

  • Также возможно задать некоторую конкретную высоту и ширину для нашего Iframe в формате пикселей следующим образом:
  • В приведенном выше синтаксисе все будет происходить одинаково, кроме того, мы можем указать высоту и ширину в формате пикселей, определяя как

Пример:

  • Еще один метод определения высоты и ширины для iframe с использованием значений через CSS показан в синтаксисе ниже:
  • Все то же самое, что и выше, только внесение изменений в указание значений.

Пример:

  • В iframe добавлена ​​еще одна особенность: мы можем удалить уже определенные границы фрейма, используя свойство border none. Синтаксис для этого следующий:
  • С помощью CSS можно также сделать много вещей с рамкой, например, изменить размер рамки, применить некоторый цвет к границе и т. Д.

Iframe может использоваться как Target для ссылки, используя синтаксис:

  • В приведенном выше синтаксисе src - это наш обычный URL, здесь целевой атрибут ссылки будет ссылаться на атрибут name в нашем теге iframe.

Пример:

Атрибут тега iframes

Существуют разные теги атрибутов, которые используются в Iframe, а именно:

  • Src: Этот атрибут используется для вставки файла, который необходимо включить во фрейм. URL указывает целевую веб-страницу, которая будет загружена в iframe.
  • Имя: Имя - это атрибут, который используется для присвоения некоторого идентификационного имени фрейму. Это наиболее полезно, когда вы создаете одну ссылку, чтобы открыть другую веб-страницу.
  • allowfullscreen: этот атрибут позволяет отображать ваш кадр в формате полной ширины. поэтому мы должны установить значение true, чтобы это произошло
  • Frameborder: это полезный атрибут, который позволяет показывать рамку или не показывать рамку рамке. Значение 1 показывает границу & 0, чтобы не показывать границу фрейма.
  • Пропускная способность: позволяет определить пространство между левой и правой сторонами кадра
  • Marginheight: позволяет определить пространство между верхом и низом рамки.
  • Прокрутка: Эти атрибуты используются для управления показом полосы прокрутки или нет. включены значения «да» или «нет» или «авто».
  • Высота: используется для определения высоты рамки. Погода в% или в пикселях
  • Ширина: используется для определения ширины рамки. Погода в% или в пикселях
  • Longdesc: с помощью этого атрибута вы можете связать другую страницу с длинным описанием содержимого вашего фрейма.

Примеры фреймов в HTML

Вот несколько примеров iframes в HTML, которые описаны ниже:

Пример № 1

Давайте рассмотрим один пример, в котором мы собираемся показать, как создать iframe с определенной высотой и шириной.

Код:

HTML Iframes Demo


Здесь мы показываем пример Iframe, который содержит определенные высоту и ширину в формате пикселей

Выход:

Пример № 2

Давайте рассмотрим другой пример, в котором мы собираемся показать, как создать iframe с определенной высотой и шириной. Но в этом примере мы указываем высоту и ширину с помощью CSS. Здесь мы видим, что полоса прокрутки настраивается в соответствии с размером содержимого.

Код:

HTML Iframes Demo


Здесь мы показываем пример Iframe, который содержит определенные высоту и ширину в формате пикселей

Выход:

Пример № 3

Здесь мы рассматриваем один пример, в который мы собираемся добавить границу в iframe, добавив некоторые дополнительные свойства CSS, чтобы показать изменение размера границы, изменение цвета границы и т. Д. Таким образом, мы можем добавить столько, сколько стиль для нашего iframe.

Код:

HTML Iframes Demo


Здесь мы показываем пример Iframe, который содержит рамку с некоторыми дополнительными CSS-свойствами

Выход:

Пример № 4

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

Код:

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


EDUCBA

Когда цель ссылки совпадает с именем iframe, ссылка открывается в iframe.

Выход:

Целевой выход:

Как показано в примере выше, мы можем нажать на целевую ссылку EDUCBA, чтобы открыть следующую веб-страницу, показанную ниже.

Вывод

Исходя из всей вышеупомянутой информации, он пришел к выводу, что iframe является встроенным фреймом, который включает в себя еще один HTML-документ. Он считается наиболее мощным элементом HTML для веб-дизайна. С его помощью вы также можете добавлять контент из другого источника. Он использует различные виды атрибутов HTML, такие как глобальные атрибуты, атрибуты событий, некоторые связанные страницы и т. Д.

Рекомендуемые статьи

Это руководство по Iframes в HTML. Здесь мы обсудим синтаксис, атрибут тега iframes в HTML, а также различные примеры и реализацию кода. Вы также можете посмотреть следующие статьи, чтобы узнать больше -

  1. Команды Selenium
  2. HTML-фреймы
  3. HTML текстовая ссылка
  4. Создать таблицы в HTML

Категория:

Инструменты веб-разработки