Iframe html: Тег | htmlbook.ru

Содержание

Тег iframe

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮Назад
Полный HTML Ссылки
Дальше ❯

Пример

Встроенный фрейм помечен следующим образом:

<iframe src=»https://html5css.ru»></iframe>

Пример

Встроенный фрейм помечен следующим образом:

<!DOCTYPE HTML>
<html>
<head>
<title>Тег IFRAME</title>
</head>
<body>

<iframe src=»frame_b.htm»>
Ваш браузер не поддерживает плавающие фреймы!
</iframe>

</body>
</html>

Пример

Пример содержания файла frame_b.htm

<html>
<head>
</head>
<body>

<h4>Frame B</h4>

</body>
</html>


Определение и использование

Тег <iframe> определяет встроенный фрейм.

Встроенный фрейм используется для встраивания другого документа в текущий документ HTML.


Поддержка браузера

Элемент
<iframe>ДаДаДаДаДа

Советы и примечания

Совет: Чтобы иметь дело с обозревателями, не поддерживающими <iframe>, добавьте текст между открывающим тегом <iframe> и закрывающим тегом </iframe>.

Совет: Используйте CSS для стиля <iframe> (даже для включения полосы прокрутки).


Различия между HTML 4,01 и HTML5

HTML5 добавил некоторые новые атрибуты, и несколько атрибутов HTML 4,01 удалены из HTML5.


Различия между HTML и XHTML

В XHTML атрибут name является устаревшим и будет удален. Используйте
атрибут глобального идентификатора Вместо.



Атрибуты

= Новый в HTML5.

АтрибутЗначениеОписание
alignleft
right
top
middle
bottom
Не поддерживается в HTML5.
Задает выравнивание <iframe> в соответствии с окружающими элементами
frameborder1
0
Не поддерживается в HTML5.
Указывает, отображать ли рамку вокруг <iframe>
heightpixelsЗадает высоту <iframe>
longdescURLНе поддерживается в HTML5.
Задает страницу, содержащую подробное описание содержимого <iframe>
marginheightpixelsНе поддерживается в HTML5.
Задает верхние и нижние поля содержимого <iframe>
marginwidthpixelsНе поддерживается в HTML5.
Задает левое и правое поля содержимого <iframe>
nametextЗадает имя <iframe>
sandboxallow-forms
allow-pointer-lock
allow-popups
allow-same-origin
allow-scripts
allow-top-navigation
Включает дополнительный набор ограничений для содержимого в <iframe>
scrollingyes
no
auto
Не поддерживается в HTML5.
Указывает, отображать ли полосы прокрутки в <iframe>
srcURLЗадает адрес документа для встраивания в <iframe>
srcdocHTML_codeЗадает HTML-содержимое страницы, которое должно отображаться в <iframe>
widthpixelsЗадает ширину <iframe>

Глобальные атрибуты

Тег <iframe> также поддерживает Глобальные атрибуты в HTML.


Атрибуты события

Тег <iframe> также поддерживает Атрибуты событий в HTML.


Похожие страницы

HTML Учебник: HTML Iframes

HTML DOM Ссылки: IFrame Object


Параметры CSS по умолчанию

В большинстве обозревателей элемент <iframe> будет отображаться со следующими значениями по умолчанию:

iframe:focus {
    outline: none;
}

iframe[seamless] {
    display: block;
}

❮Назад
Полный HTML Ссылки
Дальше ❯

Популярное

html картинка
как вставить картинку в html
цвет текста фона
размер текста html
цвет размер шрифта html
формы html
список html
таблица html
как сделать ссылку в html
html элементы



Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности
О нас
Контакты

— HTML — Дока

  1. Кратко
  2. Пример
  3. Как понять
  4. Как пишется
  5. Атрибуты
  6. Подсказки
  7. На практике
    1. Дока Дог советует

Кратко

Секция статьи «Кратко»

<iframe> — это контейнер, который позволяет вставить любой HTML-документ из другого источника. Часто этот документ интерактивный — например, карта, видео или пост из соцсети.

Этот контейнер обычно называют фреймом. Внешний вид фрейма и его положение на странице можно задать через CSS.

Пример

Секция статьи «Пример»

С помощью такого нехитрого кода мы можем встроить карту размером 560 на 400 пикселей на любую страницу:

<iframe   title="Inline Frame Map"    frameborder="1"  allowfullscreen="true"  src="https://yandex.ru/map-widget/v1/-/CBFkaYSE0A"></iframe>
          <iframe
 
  title="Inline Frame Map"
 
 
  frameborder="1"
  allowfullscreen="true"
  src="https://yandex. ru/map-widget/v1/-/CBFkaYSE0A"
>
</iframe>

Как понять

Секция статьи «Как понять»

<iframe> можно представить как «окно» или фрейм, через которое на вашей странице можно увидеть любое содержимое с других сайтов. Это значит, что если карту, видео, пост или другой элемент удалят с оригинального сайта, он пропадёт и с вашей страницы. Останется только пустое место или надпись вроде «Контент недоступен».

Встраивать файлы можно либо по ссылке с помощью атрибута src, либо целиком HTML-код файла с помощью srcdoc.

Как пишется

Секция статьи «Как пишется»

Часто сервисы, из которых мы хотим что-то встроить (карты, посты и тому подобное), сами могут сгенерировать вам <iframe>. Его останется только добавить в свой код.

Контейнер <iframe>...</iframe> нужно всегда закрывать.

Атрибуты

Секция статьи «Атрибуты»

src — URL-адрес файла, который вы встраиваете.

srcdoc — позволяет встроить HTML-код целиком, так что браузеру не придётся подгружать что-то по внешней ссылке. Если используется этот атрибут, то ссылка src игнорируется.

sandbox — ограничивает определённые действия и функции встраиваемого документа. Если просто указать атрибут sandbox, то он применит сразу все возможные ограничения. Либо можно указать нужные ограничения в любом порядке через пробел:

Возможные значения атрибута sandbox

  • allow-forms — позволяет отправлять формы внутри <iframe>.
  • allow-modals — позволяет открывать модальные окна, которые мы все так не любим: вроде «Оставьте свой имейл» или «Не уходите так быстро! У вас товар в корзине». Обычно эти окна не дают пользоваться сайтом, пока их не закроешь.
  • allow-orientation-lock — позволяет фиксировать горизонтальное или вертикальное положение экрана.
  • allow-pointer-lock — позволяет пользователю управлять содержимым <iframe> с помощью курсора через Pointer Lock API.
  • allow-popups — разрешает показ всплывающих окон, вызванных с помощью window.open(), target="_blank" или showModalDialog().
  • allow-popups-to-escape-sandbox — позволяет содержимому фрейма открывать новые окна. С этим параметром у таких окон не будет тех ограничений, которые есть у <iframe> с атрибутом sandbox.
  • allow-presentation — разрешает использовать Presentation API.
  • allow-same-origin — контент из <iframe> загружается по тем же правилам и с теми же ограничениями, что и страница, на которой он находится.
  • allow-scripts — позволяет загружать скрипты. При этом всплывающие окна будут запрещены.
  • allow-top-navigation — позволяет открывать ссылки, которые есть в <iframe>, в том же окне, в которое встроен фрейм.
  • allow-top-navigation-by-user-activation — позволяет контенту из фрейма управлять страницей, на которой он находится. Но только по инициативе пользователя.

name — имя фрейма. Пригодится, чтобы создать ссылку, по которой новая страница будет открываться в нужном фрейме.

Подсказки

Секция статьи «Подсказки»

💡 Атрибут sandbox будет игнорироваться, если использовать одновременно значения allow-scripts и allow-same-origin и если исходная страница и <iframe> на ней загружаются из одного и того же источника.

💡 Помните, что <iframe> — этот как будто ещё одна страница, которая загружается внутри вашей страницы. Содержимое фрейма может загружаться дольше, чем ваш сайт.

💡 В <iframe> стоит добавить атрибут title на случай, если пользователь не может увидеть страницу и использует инструмент чтения с экрана. Например, так:

<iframe title="Страница в Википедии о лемурах" src="https://ru.wikipedia.org/wiki/Обыкновенные_лемуры"></iframe>
          <iframe title="Страница в Википедии о лемурах" src="https://ru.wikipedia.org/wiki/Обыкновенные_лемуры"></iframe>

На практике

Секция статьи «На практике»

Дока Дог советует

Секция статьи «Дока Дог советует»

🛠 Я редко использую <iframe>. Только когда надо, например, встроить видео с YouTube.

Почти всегда лучше настроить заголовок cross-origin (это делается на уровне сервера) так, чтобы сторонние сайты не могли встраивать к себе ваш сайт как фрейм — это часто используется для всяких махинаций.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

<video>

alt +

<source>

alt +

HTML-тег iframe

❮ Назад
Полный справочник HTML
Далее ❯

Пример

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

Попробуйте сами »

Дополнительные примеры «Попробуйте сами» ниже.


Определение и использование

кадр используется для встраивания другого документа в текущий HTML-документ.0003

Совет: Используйте CSS для стилизации

Попробуйте сами »


Связанные страницы

Учебник HTML: HTML Iframes

Ссылка HTML DOM: Объект IFrame


Настройки CSS по умолчанию 909017 элемент со следующими значениями по умолчанию:

iframe:focus {
  контур: нет;
}

iframe[seamless] {
  display: block;
}

❮ Предыдущий
Полный справочник HTML
Следующий ❯

ПИКЕР ЦВЕТА



Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебник по jQuery

Основные ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

4 Top7 Examples
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры How To
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery


FORUM |
О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Использование тега HTML для создания встроенных фреймов: вот как »

В тегах HTML

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше

Элемент
HTML-фреймы устарели в HTML5: вот как сделать их адаптивными
Что означает Использование тега HTML для создания встроенных фреймов: вот как это сделать ?

Мощный, но простой в использовании

В старые недобрые времена веб-дизайна было много элементов , висящих вокруг, разрушающих день каждого. Они почти всегда были плохим подходом к дизайну. К счастью, Элемент устарел в HTML5, но

Основное различие между

Видео явно на странице , а не в какой-то отдельной панели где-то еще. Элемент нарушил эту парадигму и позволил документу контролировать окно браузера, разбив его на несколько меньших панелей (фреймов), каждая из которых отображает отдельный документ. (Это было ужасно.) Все остальные различия между и проистекают из этого основного различия.

Не создавать повторно макеты на основе фреймов с iframe

Вам может понадобиться обновить или изменить дизайн старого веб-сайта, созданного с использованием фреймов. И тогда у вас может возникнуть соблазн использовать и дизайн с фиксированной шириной, чтобы воссоздать тот же кошмар независимых панелей и подокон. Затем вы обнаружите, что не можете использовать атрибут target , чтобы открыть ссылку в определенном фрейме. Этот должен вас остановить, но тогда вы можете начать искать решения на JavaScript, и тогда вы перестроите что-то ужасное. Пожалуйста, не делайте этого.

Хорошее (и ужасное) использование