Тег iframe: Тег | htmlbook.ru - Блог сумасшедшего сисадмина

Содержание

Тег | HTML справочник

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

Описание

HTML тег <iframe> определяет встроенную область (рамку), которая может отображать содержимое отдельно взятого документа или даже другого веб-сайта в ограниченном пространстве на текущей веб-странице. Содержимое внутри области существует независимо от окружающей страницы. Две страницы: родительская и дочерняя, отображаемая в рамке, могут взаимодействовать друг с другом через JavaScript или серверный язык программирования.

Атрибут src указывает URL-адрес страницы для загрузки во встроенную область, но сам элемент <iframe> также может содержать текст или разметку в качестве резервного содержимого для отображения в браузерах, не поддерживающих этот элемент (например: очень старые браузеры, текстовые браузеры и так далее).


<iframe src="news.html">
  <p>Извините, но ваш браузер не может отобразить содержимое фрейма, но
    вы можете сами перейти на <a href="news. html">страницу с новостями</a>.
  </p>
</iframe>

Любые CSS стили, применяемые к родительскому элементу, не будут применяться к содержимому встроенной области, также как стили, примененные к встроенному содержимому, не будут распространяться на родительский элемент.

Можно указать размер для встроенной области с помощью необязательных атрибутов width и height или с помощью CSS. Обычно размер по умолчанию равен 300px в ширину и 150px в высоту, но, в зависимости от браузера, размер может быть иным. Большинство браузеров по умолчанию отображают содержимое элемента <iframe> с узкой рамкой, которую можно изменить или удалить с помощью CSS свойства border.

Если содержимое тега <iframe> превышает размеры элемента, то появляются полосы прокрутки, позволяющие пользователям прокручивать содержимое во встроенной области. Вы можете отключить полосы прокрутки с помощью CSS объявления overflow: hidden, но в этом случае у пользователя не будет возможности увидеть скрытое содержимое.

Атрибуты

height:

Указывает высоту элемента в пикселях. Пример »

name:

Определяет имя для элемента.

Значение этого атрибута может быть использовано для ссылки на элемент в JavaScript, либо в качестве значения для атрибута target элемента <a> или <form>, либо в качестве значения для атрибута formtarget элемента <button> или <input>. Пример »

sandbox:

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

Значением атрибута может быть либо пустая строка (sandbox=»»), это значение указывает, что применяются все ограничения, либо список определенных значений, разделенных пробелами, которые будут снимать конкретные ограничения:

«» — применяет все ограничения, снимаемые перечисленными ниже значениями. Таким образом ограничивая содержимое фрейма влиять на родительский элемент, изолируя страницу, отображаемую во фрейме, в виртуальной песочнице, поэтому любой вредоносный код не сможет нанести вред родительской странице, сайту или компьютеру пользователя.
allow-forms — разрешает отправку данных форм.
allow-same-origin — указывает, что информация представленная в iframe имеет тот же источник, что и информация представленная в содержащем его документе.
allow-scripts — разрешает выполнение сценариев (исключая всплывающие окна).

allow-top-navigation — разрешает использовать ссылки внутри содержимого iframe для перемещения по содержащему его документу.

Примечание: атрибут sandbox не поддерживается в IE9 и более ранних версиях, и в Opera.

seamless:

Указывает, что содержимое iframe должно выглядеть так, словно оно является частью документа (без рамки и полос прокрутки).

Возможные значения логического атрибута seamless:


<iframe seamless>
<iframe seamless="">
<iframe seamless="seamless">

Примечание: атрибут seamless поддерживается только в Chrome и Safari6+.

src:

Указывает адрес документа, который будет отображен во встроенном фрейме. Пример »

width:

Указывает ширину элемента в пикселях. Пример »

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

Стиль по умолчанию


iframe:focus {
    outline: none;
}

iframe[seamless] {
    display: block;
}

Пример


<iframe src="www.puzzleweb.ru/html/iframe.html">
  Ваш браузер не поддерживает iframe!
</iframe>

Результат данного примера в окне браузера:

Тег | HTML справочник

HTML теги

Значение и применение

Тег <iframe> (HTML Inline Frame Element) определяет встроенную в веб-страницу область, которая может отображать содержимое отдельно взятого документа (например, *. pdf), медиа-контента или другого веб-сайта в заданном пространстве. Содержимое внутри области существует независимо от окружающей страницы.

Синтаксис для добавления фрейма:

<iframe src = "URL"> </iframe>, где src атрибут, который определяет местоположение документа или веб-сайта.

Обращаю Ваше внимание, на то что некоторые сайты, например такие как поисковые системы, блокируют возможность размещения страницы сайта во фреймах, либо осуществляют переход по таймеру на свою «реальную» страницу.

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

Тег	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<iframe>	Да	Да	Да	Да	Да	Да

Атрибуты

Атрибут	Значение	Описание
align	left right top middle bottom	Не поддерживается в HTML5. Определяет выравнивание элемента в соответствии с окружающими элементами.
frameborder	0 1	Не поддерживается в HTML5. Указывает, следует ли отображать рамку вокруг элемента.
height	pixels	Определяет высоту элемента.
longdesc	URL	Не поддерживается в HTML5. Указывает страницу, содержащую длинное описание содержания элемента.
marginheight	pixels	Не поддерживается в HTML5. Отступ сверху и снизу от содержания до границы фрейма.
marginwidth	pixels	Не поддерживается в HTML5. Указывает отступ слева и справа от содержания до границы фрейма.
name	text	Задаёт имя элемента.
sandbox	allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation	Включает дополнительный набор ограничений для содержания в элементе.
scrolling	auto yes no	Не поддерживается в HTML5. Указывает, отображать или нет полосы прокрутки в элементе.
src	URL	Определяет адрес документа для встраивания в элемент.
srcdoc	HTML_code	Указывает HTML-код, который будет показан во фрейме.
width	pixels	Определяет ширину элемента.

Пример использования

В этом примере мы возьмем в качестве загрузки во фрейм отличный сайт — TinyPng.com, который предоставляет возможность сжимать изображения, предназначенные к загрузке на Ваш сайт. Как правило, удаётся уменьшить размер изображений на 50%, а то и больше, что значительно уменьшает их объем, экономит дисковое пространство и увеличивает скорость загрузки страниц.

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования элемента <iframe></title>
	</head>
	<body>
		<iframe name = "myframe" width = "665px" height = "265px" src = "https://tinypng.  com"></iframe><br> <!-- в атрибуте src указываем абсолютный адрес сайта, который хотим открыть во фрейме -->
		<a href = "https://tinypng.com" target = "myframe">TinyPng</a> <!-- указываем, что ссылка откроется во фрейме -->
		<a href = "moscow.jpg" target = "myframe">Moscow</a> <!-- задаем относительный путь к изображению и имя фрейма, где оно откроется -->
		<a href = "paris.jpg" target = "myframe">Paris</a> <!-- задаем относительный путь к изображению и имя фрейма, где оно откроется -->
		<a href = "london.jpg" target = "myframe">London</a> <!-- задаем относительный путь к изображению и имя фрейма, где оно откроется -->
	</body>
</html>

В этом примере мы:

Элементом <iframe> создали фрейм, которому атрибутом name задали имя — «myframe», атрибутом width установили ширину фрейма «665px», а атрибутом height высоту фрейма «265px» . В обязательном атрибуте src указали абсолютный адрес сайта, который хотим открыть во фрейме «https://tinypng. com».
Разместили четыре ссылки, при клике на которые ссылка открывается непосредственно во фрейме (в значении атрибута target указано имя нашего фрейма — «myframe»). Первая ссылка открывает сайт, загруженный изначально, а остальные три загружают различные изображения, находящиеся в той же папке, что и файл с примером.

Результат нашего примера:

Пример использования фреймов в HTML.

Рассмотрим пример добавления видео с YouTube во фрейм:

<!DOCTYPE html>
<html>
	<head>
		<title>Размещение видео с YouTube</title>
	</head>
	<body>
		<p>Размещение видео с YouTube</p>
		<iframe  width = "320" height = "240" src = "https://www.youtube.com/embed/d9TpRfDdyU0?autoplay=1?loop=1&start=28&color=white">
		</iframe>
	</body>
</html>

В этом примере элементом <iframe> мы разместили фрейм на странице и задали для него ширину 320 пикселей (атрибут width) и высоту 240 пикселей (height). В атрибуте src мы указали путь к странице с видео, указали ID видео (выделен курсивом) и добавили дополнительные параметры плеера YouTube (подробное описание доступно в официальной документации):

autoplay = «1» (видео автоматически запускается).
loop = «1» (проигрыватель будет воспроизводить видео по кругу, в бесконечном цикле).
start = «28» (определяет с какой секунды начнется воспроизведение видео, значение длжно быть положительным целым числом).
color = «white» (бегунок просмотренного отмеряет белым цветом, по умолчанию — красным).

Результат нашего примера:

Добавление видео с YouTube во фрейм.

Более подробную информацию о добавлении видео с видео хостинга YouTube вы можете найти на сайте в статье учебника HTML 5 «Размещение видео с видео хостинга YouTube».

Отличия HTML 4.01 от HTML 5

В HTML5 добавлено два новых атрибута, большинство используемых в HTML 4.01 атрибутов было удалено.

Значение CSS по умолчанию

iframe [seamless] {
display: block;
}
iframe:focus {
outline: none;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

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

Элемент поддерживает «атрибуты событий».

HTML теги

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

В тегах HTML

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

Элемент

HTML-фреймы устарели в HTML5: вот как сделать их адаптивными

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

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

В старые недобрые времена веб-дизайна было много элементов, висящих вокруг, портящих всем день. Они почти всегда были плохим подходом к дизайну. К счастью, элемент устарел в HTML5, но </code> или «встроенный фрейм» все еще доступен. Это должно было быть устаревшим тоже? Лучше всего просто избегать этого? Есть несколько допустимых применений этого элемента, но вам действительно нужно понять, что это такое и как он работает, чтобы избежать некоторых ловушек, которые были так распространены в темные времена.</p><h4><span class="ez-toc-section" id="i-14"> Чем </span></h4><code> <iframe> </code> и <code><frame> </code> похожи и чем они отличаются</h4><p> Оба элемента представляют собой независимый документ HTML. На содержимое документа ссылается атрибут <code> src </code> каждого элемента, поэтому на самом деле это полностью независимый ресурс, на который <em> ссылается </em> из текущего документа.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/shots.jotform.com/jimr/~uploads/08-09-2017-1502272103.png?1.0.449' /><noscript><img loading='lazy' src='/800/600/http/shots.jotform.com/jimr/~uploads/08-09-2017-1502272103.png?1.0.449' /></noscript></p><pre> <iframe src="https://example.com"> <!DOCTYPE html > <html> <заголовок> . . . </голова> <тело> . . . <script defer src="https://ylianova.ru/wp-content/cache/autoptimize/js/autoptimize_b571acc6cfbf27b3c47d854f72b9c121.js"></script></body> </html>

Основное различие между </code> и <code><frame> </code> заключается в том, что <code> <iframe class="lazy lazy-hidden"> </code> реализует это таким образом, который имеет смысл и в первую очередь учитывает то, что представляет собой HTML-документ. Содержимое <code> <iframe class="lazy lazy-hidden"> </code> отображается внутри элемента, который явно является частью текущего документа. Например, рассмотрим это встроенное видео YouTube:</p><pre> <iframe class="lazy lazy-hidden" data-lazy-type="iframe" data-src="https://www.youtube.com/embed/M2kSJbLbIgQ" frameborder="0" allowfullscreen>

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

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

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

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

  </code></h3><p> Есть несколько законных способов использования <code> <iframe> </code> , и имитация ужасных шаблонов проектирования 1990-х годов не является одним из них.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf.ppt-online.org/files/slide/1/1sq80w6jYNretaP3Hc9g54OQodAKGThxuC7LRI/slide-17.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/1/1sq80w6jYNretaP3Hc9g54OQodAKGThxuC7LRI/slide-17.jpg' /></noscript> Вот некоторые из них:</p><ul><li> встраивание сторонних медиафайлов</li><li> встраивание ваших собственных медиафайлов независимо от документа</li><li> встраивание примеров кода (мы делаем это на этом сайте)</li><li> встраивание сторонних «апплетов», таких как платежные формы</li></ul><p> А вот и ужасные варианты использования <code> <iframe> </code></p><ul><li> фотогалерея</li><li> форум или канал</li></ul><p> По сути — если вам нужно встроить какой-то независимый, уже существующий HTML-документ в текущий документ, используйте <code> <iframe> </code> . Если вы создаете все это с нуля вместе, почти нет веской причины разбивать дизайн страницы на несколько независимых документов, особенно если они на самом деле не являются независимыми частями контента.</p><p> Адам Вуд</p><p> Адам — технический писатель, специализирующийся на документации и руководствах для разработчиков.</p><h3><span class="ez-toc-section" id="Browser_Support_for_iframe"> Browser Support for iframe </span></h3><table><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td> All</td><td> All</td><td> All</td><td> All</td><td> All</td><td> All</td></tr></table><p/><h3><span class="ez-toc-section" id="Attributes_of_iframe"> Attributes of iframe </span></h3><table><tr><th> Имя атрибута</th><th> Значения</th><th> Примечания</th></tr><tr><td> Песочница <br/></td><td/><td> Накладывает набор ограничений безопасности и удобства использования на iframe.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/1.bp.blogspot.com/-qrsaPYn6w6s/Vx83ItTxX6I/AAAAAAAABow/H-1zwzXqY4E3x-aeQaJRY9RvF3n09L73gCLcB/w1200-h630-p-k-no-nu/iframe.bmp' /><noscript><img loading='lazy' src='/800/600/http/1.bp.blogspot.com/-qrsaPYn6w6s/Vx83ItTxX6I/AAAAAAAABow/H-1zwzXqY4E3x-aeQaJRY9RvF3n09L73gCLcB/w1200-h630-p-k-no-nu/iframe.bmp' /></noscript></td></tr><tr><td> источник <br/></td><td/><td> Указывает URL-адрес документа для отображения в iframe.</td></tr><tr><td> ширина <br/></td><td/><td> Задает ширину iframe.</td></tr><tr><td> name <br/></td><td/><td> Указывает имя iframe.</td></tr><tr><td> longdesc <br/></td><td/><td> Используется для указания URL-адреса, содержащего подробное описание iframe. Устарело в HTML5. Вместо этого используйте CSS.</td></tr><tr><td> рамка <br/></td><td/><td> Используется для переключения отображения рамки вокруг iframe. Устарело в HTML5. Вместо этого используйте CSS.</td></tr><tr><td> marginwidth <br/></td><td/><td> Используется для управления шириной полей вокруг iframe. Устарело в HTML5. Вместо этого используйте CSS.</td></tr><tr><td> прокрутка <br/></td><td/><td> Используется для переключения прокрутки в iframe. Устарело в HTML5. Вместо этого используйте CSS.</td></tr><tr><td> align <br/></td><td/><td> Используется для установки выравнивания встроенного фрейма относительно окружающих элементов.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.ytimg.com/vi/dhV0DvtKfBc/hqdefault.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.ytimg.com/vi/dhV0DvtKfBc/hqdefault.jpg' /></noscript> Устарело. Вместо этого используйте CSS.</td></tr><tr><td> vspace <br/></td><td/><td> Используется для управления интервалом по вертикали вокруг iframe. Устарело в HTML5. Вместо этого используйте CSS.</td></tr></table><h2><span class="ez-toc-section" id="_HTML-4"> Тег HTML </span></h2><p> ❮ Пред.  Следующий ❯</p><p> Тег <iframe> создает встроенный фрейм для встраивания стороннего контента (медиафайлов, апплетов и т. д.). Хотя содержимое фрейма и веб-страницы независимы, они могут взаимодействовать через JavaScript.</p><p> Тег <iframe> идет парами. Содержимое записывается между открывающим (<iframe>) и закрывающим () тегами.
 Пример тега HTML 
:</h4><pre> <!DOCTYPE html>
<html>
  <голова>
    <title>Название документа</title>
  </голова>
  <тело>
    <iframe src="https://www.w3docs.com">

  Попробуй сам »
 Чтобы установить размер iframe, используйте атрибуты высоты и ширины или используйте CSS. Значения атрибутов по умолчанию задаются в пикселях, но могут быть и в процентах.
 Пример тега HTML 
  с атрибутами высоты и ширины <!DOCTYPE html>:</h4><pre> <!DOCTYPE html>
<html>
  <голова>
    <title>Название документа</title>
  </голова>
  <тело>
    <iframe class="lazy lazy-hidden"  data-lazy-type="iframe" data-src="https://www.w3docs.com">

  Попробуй сам »
 По умолчанию iframe окружен рамкой. Чтобы удалить границу, вы можете использовать свойство границы CSS.
 Пример тега HTML 
  со свойством рамки CSS:</h4><pre> <!DOCTYPE html>
<html>
  <голова>
    <title>Название документа</title>
  </голова>
  <тело>
    <iframe class="lazy lazy-hidden"  data-lazy-type="iframe" data-src="https://www.w3docs.com">

  Попробуй сам »
 Существует новый атрибут загрузки HTML, который позволяет откладывать загрузку изображений и iframe до тех пор, пока они не будут близки к отображению. Для этой функции у WHATWG есть запрос на вытягивание, и она уже является частью Chromium (начиная с версии 76).
 Поддерживаемые значения атрибута загрузки включают:
 «ленивый», который откладывает загрузку до тех пор, пока изображение или iframe не достигнет порогового значения расстояния от области просмотра.No related posts.

Тег iframe: Тег | htmlbook.ru

Тег | HTML справочник

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

Описание

Атрибуты

Стиль по умолчанию

Пример

Тег | HTML справочник

Значение и применение

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

Атрибуты

Пример использования

Отличия HTML 4.01 от HTML 5

Значение CSS по умолчанию

Поддержка глобальных атрибутов

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

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

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

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

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

Пример тега HTML

Пример тега HTML

Пример тега HTML

`Добавить комментарий Отменить ответ`

Рубрики

Рубрики