Iframe html: Тег | htmlbook.ru |

Posted:

Фев 9, 2023

Comments:

0 Comments

Iframe html: Тег | htmlbook.ru

Содержание

Тег iframe

HTML5CSS.ru

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

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

Пример

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

Пример

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

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

</body>
</html>

Пример

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

<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.

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

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

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

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

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

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

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

iframe:focus {
outline: none;
}

iframe[seamless] {
display: block;
}

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

— HTML — Дока

Кратко
Пример
Как понять
Как пишется
Атрибуты
Подсказки
На практике
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 для стилизации </code><br /> (см. пример ниже). </p> <p> <strong> Совет: </strong> Рекомендуется всегда включать заголовок<br /> атрибут для <code> <iframe> </code> . Это используется<br /> программами чтения с экрана, чтобы прочитать содержимое <code> <iframe> </code><br /> является. </p> <hr/> <h3><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%B4%D0%B4%D0%B5%D1%80%D0%B6%D0%BA%D0%B0_%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%B0-2"></span> Поддержка браузера <span class="ez-toc-section-end"></span></h3> <table> <tr> <th> Элемент </th> <th title="Chrome"/> <th title="Internet Explorer / Edge"/> <th title="Firefox"/> <th title="Safari"/> <th title="Opera"/> </tr> <tr> <td> <iframe> </td> <td> Да </td> <td> Да </td> <td> Да </td> <td> Да </td> <td> Да </td> </tr> </table> <hr/> <h3><span class="ez-toc-section" id="%D0%90%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B-3"></span> Атрибуты <span class="ez-toc-section-end"></span></h3> <table> <tr> <th> Атрибут </th> <th> Значение </th> <th> Описание </th> </tr> <tr> <td> разрешить </td> <td> </td> <td> Указывает политику функций для <iframe> </td> </tr> <tr> <td> разрешить полный экран </td> <td> правда <br /> ложь </td> <td> Установите значение true, если <iframe> может активировать полноэкранный режим, вызвав<br /> метод requestFullscreen() </td> </tr> <tr> <td> разрешитьзапрос платежа </td> <td> правда <br /> ложь </td> <td> Установите значение true, если <iframe> из другого источника должно быть разрешено вызывать<br /> API запроса платежа </td> </tr> <tr> <td> высота </td> <td> <i> пикселей </i> </td> <td> Задает высоту <iframe>.<img loading='lazy' src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="/800/600/http/img.youtube.com/vi/hS7gTKubSqk/0.jpg" /><noscript><img loading='lazy' src='/800/600/http/img.youtube.com/vi/hS7gTKubSqk/0.jpg' /></noscript> Высота по умолчанию 150 пикселей </td> </tr> <tr> <td> загрузка </td> <td> нетерпеливый <br /> ленивый </td> <td> Указывает, должен ли браузер загружать iframe немедленно или<br /> отложить загрузку iframe до тех пор, пока не будут выполнены некоторые условия </td> </tr> <tr> <td> имя </td> <td> <i> текст </i> </td> <td> Указывает имя <iframe> </td> </tr> <tr> <td> реферальная политика </td> <td> без реферера <br /> без реферера при переходе на более раннюю версию <br /> происхождение <br /> происхождение-при-перекрестном происхождении <br /> одно и то же происхождение <br /> строгое происхождение-при-перекрестном происхождении <br /> небезопасный-url </td> <td> Указывает, какую информацию о реферере отправлять при<br /> получение iframe </td> </tr> <tr> <td> песочница </td> <td> разрешить формы <br /> разрешить блокировку указателя <br /> разрешить всплывающие окна <br /> разрешить то же происхождение <br /> разрешить сценарии <br /> разрешить верхнюю навигацию </td> <td> Включает дополнительный набор ограничений для содержимого в <iframe> </td> </tr> <tr> <td> источник </td> <td> <i> URL-адрес </i> </td> <td> Указывает адрес документа для встраивания в <iframe> </td> </tr> <tr> <td> исходный документ </td> <td> <i> HTML_код </i> </td> <td> Указывает HTML-содержимое страницы для отображения в <iframe> </td> </tr> <tr> <td> ширина </td> <td> <i> пикселей </i> </td> <td> Задает ширину <iframe>.<img loading='lazy' src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="/800/600/http/img.youtube.com/vi/-25g1wgJwfY/0.jpg" /><noscript><img loading='lazy' src='/800/600/http/img.youtube.com/vi/-25g1wgJwfY/0.jpg' /></noscript> Ширина по умолчанию 300 пикселей </td> </tr> </table> <hr/> <hr/> <h3><span class="ez-toc-section" id="%D0%93%D0%BB%D0%BE%D0%B1%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B-2"></span> Глобальные атрибуты <span class="ez-toc-section-end"></span></h3> <p> Тег <code> <iframe> </code> также поддерживает глобальные атрибуты в HTML. </p> <hr/> <h3><span class="ez-toc-section" id="%D0%90%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B_%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B9"></span> Атрибуты событий <span class="ez-toc-section-end"></span></h3> <p> Тег <code> <iframe> </code> также поддерживает атрибуты событий в HTML. </p> <hr/> <h3><span class="ez-toc-section" id="%D0%94%D0%BE%D0%BF%D0%BE%D0%BB%D0%BD%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D1%8B"></span> Дополнительные примеры <span class="ez-toc-section-end"></span></h3> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-6"></span> Пример <span class="ez-toc-section-end"></span></h4> <p> Добавление и удаление границ iframe (с помощью CSS): </p> <p data-readability-styled="true"> <iframe loading="lazy" src="about:blank" data-rocket-lazyload="fitvidscompatible" data-lazy-src="/default.asp"> <br />


  <br />  
 Попробуйте сами » 

 Связанные страницы 
 Учебник 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 для создания встроенных фреймов: вот как это сделать ? 
  создает встроенный фрейм, который встраивает независимый HTML-документ в текущий документ. </dd>
<dt> Дисплей </dt>
<dd> Блок </dd>
</dl>
<p> Содержание </p>
<ul>
<li> 1 Пример кода </li>
<li> 2 Мощные, но легко неправильно используют
<ul>
<li> 2.<img loading='lazy' src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="/800/600/http/i.ytimg.com/vi/FPaC9-fXt3w/hqdefault.jpg" /><noscript><img loading='lazy' src='/800/600/http/i.ytimg.com/vi/FPaC9-fXt3w/hqdefault.jpg' /></noscript> 1. Как <iframe> и <1made> и как они отличаются. не воссоздавать макеты на основе фреймов с помощью iframe </li>
<li> 4 Хорошее (и плохое) использование <iframe> </li>
<li> 5 Поддержка браузером iframe </li>
<li> 6 Атрибуты iframe </li>
</ul>
<h3><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80_%D0%BA%D0%BE%D0%B4%D0%B0"></span> Пример кода <span class="ez-toc-section-end"></span></h3>
<pre> <iframe loading="lazy" src="about:blank" frameborder="0" allowfullscreen data-rocket-lazyload="fitvidscompatible" data-lazy-src="https://www.youtube.com/embed/%20owsfdh5gxyc"> 
 
 
 Мощный, но простой в использовании 
 В старые недобрые времена веб-дизайна было много  элементов  , висящих вокруг, разрушающих день каждого. Они почти всегда были плохим подходом к дизайну. К счастью,  Элемент   устарел в HTML5, но   </code> или «встроенный фрейм» все еще доступен. Это должно было быть устаревшим тоже? Лучше всего просто избегать этого? Есть несколько допустимых применений этого элемента, но вам действительно нужно понять, что это такое и как он работает, чтобы избежать некоторых ловушек, которые были так распространены в темные времена.<img loading='lazy' src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="/800/600/http/img.youtube.com/vi/8kNveHKwRAY/0.jpg" /><noscript><img loading='lazy' src='/800/600/http/img.youtube.com/vi/8kNveHKwRAY/0.jpg' /></noscript>  </p>
<h4><span class="ez-toc-section" id="%D0%A7%D0%B5%D0%BC"></span> Чем <span class="ez-toc-section-end"></span></h4>
<p><code> <iframe> </code> и <code> <frame> </code> похожи и чем они отличаются </h4>
<p> Оба элемента представляют собой независимый HTML-документ. На содержимое документа ссылается атрибут <code> src </code> каждого элемента, поэтому на самом деле это полностью независимый ресурс, на который <em> ссылается </em> из текущего документа. </p>
<pre> <!-- Вы можете сделать это --> <iframe loading="lazy" src="about:blank" data-rocket-lazyload="fitvidscompatible" data-lazy-src="https://example.com">   <!DOCTYPE html > <html> <заголовок> . . . </голова> <тело> . . . </body> </html>  
 Основное различие между   </code> и <code> <frame> </code> заключается в том, что <code> <iframe> </code> реализует это таким образом, который имеет смысл и в первую очередь учитывает то, что представляет собой HTML-документ. Содержимое <code> <iframe> </code> отображается внутри элемента, который явно является частью текущего документа. Например, рассмотрим это встроенное видео YouTube: </p>
<pre> <iframe src="https://www.<img loading='lazy' src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="/800/600/http/i.ytimg.com/vi/phTmASsGvKc/hqdefault.jpg" /><noscript><img loading='lazy' src='/800/600/http/i.ytimg.com/vi/phTmASsGvKc/hqdefault.jpg' /></noscript> youtube.com/embed/M2kSJbLbIgQ" frameborder="0" allowfullscreen> 
 Видео явно  на странице  , а не в какой-то отдельной панели где-то еще. Элемент    нарушил эту парадигму и позволил документу контролировать окно браузера, разбив его на несколько меньших панелей (фреймов), каждая из которых отображает отдельный документ. (Это было ужасно.) Все остальные различия между    и    проистекают из этого основного различия. 

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

 Хорошее (и ужасное) использование 
  </code> </h3>
<p> Есть несколько законных способов использования <code> <iframe> </code> , и имитация ужасных шаблонов проектирования 1990-х годов не является одним из них. Вот некоторые из них: </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> . Если вы создаете все это с нуля вместе, почти нет веской причины разбивать дизайн страницы на несколько независимых документов, особенно если они на самом деле не являются независимыми частями контента.<img loading='lazy' src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="/800/600/http/i.ytimg.com/vi/aRGdDy18qfY/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&#038;rs=AOn4CLClMIEth2E1UnuGQg2uKIjUG8W1oQ" /><noscript><img loading='lazy' src='/800/600/http/i.ytimg.com/vi/aRGdDy18qfY/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&#038;rs=AOn4CLClMIEth2E1UnuGQg2uKIjUG8W1oQ' /></noscript>  </p>
<p> Адам Вуд </p>
<p> Адам — технический писатель, специализирующийся на документации и руководствах для разработчиков. </p>
<h3><span class="ez-toc-section" id="Browser_Support_for_iframe"></span> Browser Support for iframe <span class="ez-toc-section-end"></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"></span> Attributes of iframe <span class="ez-toc-section-end"></span></h3>
<table>
<tr>
<th> Имя атрибута </th>
<th> Значения </th>
<th> Примечания </th>
</tr>
<tr>
<td> Песочница  </td>
<td/>
<td> Накладывает набор ограничений безопасности и удобства использования на iframe. </td>
</tr>
<tr>
<td> источник  </td>
<td/>
<td> Указывает URL-адрес документа для отображения в iframe. </td>
</tr>
<tr>
<td> ширина  </td>
<td/>
<td> Задает ширину iframe. </td>
</tr>
<tr>
<td> name  </td>
<td/>
<td> Указывает имя iframe. </td>
</tr>
<tr>
<td> longdesc  </td>
<td/>
<td> Используется для указания URL-адреса, содержащего подробное описание iframe.<img loading='lazy' src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="/800/600/http/media.geeksforgeeks.org/wp-content/uploads/20190724152617/heightif2.png" /><noscript><img loading='lazy' src='/800/600/http/media.geeksforgeeks.org/wp-content/uploads/20190724152617/heightif2.png' /></noscript></p>
              <div class="clear"></div>
                            <p class="inner-meta">This entry was posted in <a href="https://consei.ru/category/populyarnoe" rel="category tag">Популярное</a></p>              
            </div>
              <div class="post comments" id="comments">              
                
<!-- You can start editing here. -->
              </div>
          </div>
       </div>
    
</div> <!-- END Narrowcolumn -->

<div id="sidebar" class="profile">
 <ul>
<li class="widget png_scale" id="widget_categories">
 <h2 class="blocktitle"><span>Рубрики</span></h2>
 <ul>
	<li class="cat-item cat-item-23"><a href="https://consei.ru/category/adsense">Adsense</a> (1)
</li>
	<li class="cat-item cat-item-20"><a href="https://consei.ru/category/chrome">Chrome</a> (1)
</li>
	<li class="cat-item cat-item-19"><a href="https://consei.ru/category/direkt">Директ</a> (51)
</li>
	<li class="cat-item cat-item-18"><a href="https://consei.ru/category/dorvei">Дорвеи</a> (26)
</li>
	<li class="cat-item cat-item-15"><a href="https://consei.ru/category/klyuchevye-slova">Ключевые слова</a> (145)
</li>
	<li class="cat-item cat-item-14"><a href="https://consei.ru/category/lendingi">Лендинги</a> (44)
</li>
	<li class="cat-item cat-item-12"><a href="https://consei.ru/category/populyarnoe">Популярное</a> (7&nbsp;222)
</li>
	<li class="cat-item cat-item-17"><a href="https://consei.ru/category/prodvizhenie">Продвижение</a> (289)
</li>
	<li class="cat-item cat-item-22"><a href="https://consei.ru/category/rsya">Рся</a> (2)
</li>
	<li class="cat-item cat-item-13"><a href="https://consei.ru/category/semanticheskoe-yadro">Семантическое ядро</a> (215)
</li>
	<li class="cat-item cat-item-21"><a href="https://consei.ru/category/spam">Спам</a> (6)
</li>
	<li class="cat-item cat-item-16"><a href="https://consei.ru/category/ssylochnoe">Ссылочное</a> (44)
</li>
	<li class="cat-item cat-item-11"><a href="https://consei.ru/category/ticz">Тиц</a> (381)
</li>
</ul>
</li>
 
</ul></div>
<div class="clear"></div>

    
</div>  
<div class="clear"></div>
</div><!-- END main wrapper -->
<div id="footer">
<div class="wrapper" style="margin: auto;">
<p style="margin-left: 50px; padding-top: 10px;">
</p><div style="margin-left: 50px; padding-bottom: 10px; border-bottom: 1px solid #444;">
<ul class="clearfix">
<li style="padding-right: 8px; height: 32px; padding-left: 43px; margin: 17px 0 0 0; float: left; background-image: ; background-repeat: no-repeat;">Подписаться на RSS <br><span>100+ Подписчиков</span></li>
<li style="padding-right: 8px; height: 32px; padding-left: 43px; margin: 17px 0 0 0; float: left; background-image: ; background-repeat: no-repeat;">Услуги и реклама<span><br>Я свободен</span></li>
<li style="padding-right: 8px; height: 32px; padding-left: 43px; margin: 17px 0 0 0; float: left; background-image: ; background-repeat: no-repeat;">Контакты <span><br>Скажи мне привет!</span></li>
</ul>
</div><p></p>
<br><p style="margin-left: 50px; padding-top: 10px;">
</p>
<p style="margin-left: 50px; color: #ffffff;">© Копирование моих статей приветствуется, если вы поставите ссылку на мой блог будет просто математично!</p>
<div class="clear"></div>
	</div>
</div>
		<style type="text/css">
			.archive #nav-above,
					.archive #nav-below,
					.search #nav-above,
					.search #nav-below,
					.blog #nav-below,
					.blog #nav-above,
					.navigation.paging-navigation,
					.navigation.pagination,
					.pagination.paging-pagination,
					.pagination.pagination,
					.pagination.loop-pagination,
					.bicubic-nav-link,
					#page-nav,
					.camp-paging,
					#reposter_nav-pages,
					.unity-post-pagination,
					.wordpost_content .nav_post_link,.page-link,
					.post-nav-links,
					.page-links,#comments .navigation,
					#comment-nav-above,
					#comment-nav-below,
					#nav-single,
					.navigation.comment-navigation,
					comment-pagination {
						display: none !important;
					}
					.single-gallery .pagination.gllrpr_pagination {
						display: block !important;
					}		</style>
	<script type="text/javascript" charset="utf-8">/*<![CDATA[*/ 
    jQuery(document).ready(function() {
        jQuery(".slideshow").cycle({
          fx: "turnDown",
          timeout: 5000,
          speed: 1000,
          prev: "#left-arrow",
          next: "#right-arrow",
          pagerEvent: "click",
          pauseOnPagerHover: true,
          cleartypeNoBg: true });						
      });
      /*]]>*/</script><link rel='stylesheet' id='pgntn_stylesheet-css' href='https://consei.ru/wp-content/plugins/pagination/css/nav-style.css?ver=6.1.1' type='text/css' media='all' />
<script type='text/javascript' src='https://consei.ru/wp-includes/js/comment-reply.min.js?ver=6.1.1' id='comment-reply-js'></script>
<script type='text/javascript' src='https://consei.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.3.0' id='q2w3_fixed_widget-js'></script>
<script type='text/javascript' src='https://consei.ru/wp-content/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js?ver=2.2.0' id='jquery-smooth-scroll-js'></script>
<script type='text/javascript' src='https://consei.ru/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.2.1' id='js-cookie-js'></script>
<script type='text/javascript' src='https://consei.ru/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2' id='jquery-sticky-kit-js'></script>
<script type='text/javascript' id='ez-toc-js-js-extra'>
/* <![CDATA[ */
var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"};
/* ]]> */
</script>
<script type='text/javascript' src='https://consei.ru/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=2.0.17-1617043686' id='ez-toc-js-js'></script>
<script>window.lazyLoadOptions = {
                elements_selector: "img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",
                data_src: "lazy-src",
                data_srcset: "lazy-srcset",
                data_sizes: "lazy-sizes",
                class_loading: "lazyloading",
                class_loaded: "lazyloaded",
                threshold: 300,
                callback_loaded: function(element) {
                    if ( element.tagName === "IFRAME" && element.dataset.rocketLazyload == "fitvidscompatible" ) {
                        if (element.classList.contains("lazyloaded") ) {
                            if (typeof window.jQuery != "undefined") {
                                if (jQuery.fn.fitVids) {
                                    jQuery(element).parent().fitVids();
                                }
                            }
                        }
                    }
                }};
        window.addEventListener('LazyLoad::Initialized', function (e) {
            var lazyLoadInstance = e.detail.instance;

            if (window.MutationObserver) {
                var observer = new MutationObserver(function(mutations) {
                    var image_count = 0;
                    var iframe_count = 0;
                    var rocketlazy_count = 0;

                    mutations.forEach(function(mutation) {
                        for (i = 0; i < mutation.addedNodes.length; i++) {
                            if (typeof mutation.addedNodes[i].getElementsByTagName !== 'function') {
                                return;
                            }

                           if (typeof mutation.addedNodes[i].getElementsByClassName !== 'function') {
                                return;
                            }

                            images = mutation.addedNodes[i].getElementsByTagName('img');
                            is_image = mutation.addedNodes[i].tagName == "IMG";
                            iframes = mutation.addedNodes[i].getElementsByTagName('iframe');
                            is_iframe = mutation.addedNodes[i].tagName == "IFRAME";
                            rocket_lazy = mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');

                            image_count += images.length;
			                iframe_count += iframes.length;
			                rocketlazy_count += rocket_lazy.length;

                            if(is_image){
                                image_count += 1;
                            }

                            if(is_iframe){
                                iframe_count += 1;
                            }
                        }
                    } );

                    if(image_count > 0 || iframe_count > 0 || rocketlazy_count > 0){
                        lazyLoadInstance.update();
                    }
                } );

                var b      = document.getElementsByTagName("body")[0];
                var config = { childList: true, subtree: true };

                observer.observe(b, config);
            }
        }, false);</script><script data-no-minify="1" async src="https://consei.ru/wp-content/plugins/rocket-lazy-load/assets/js/16.1/lazyload.min.js"></script><script>function lazyLoadThumb(e){var t='<img loading="lazy" data-lazy-src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"></noscript>',a='<div class="play"></div>';return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.dataset.query.length?'':'&'+this.dataset.query;e.setAttribute("src",t.replace("ID",this.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.replaceChild(e,this)}document.addEventListener("DOMContentLoaded",function(){var e,t,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)e=document.createElement("div"),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query", a[t].dataset.query),e.setAttribute("data-src", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id),e.onclick=lazyLoadYoutubeIframe,a[t].appendChild(e)});</script> 
</body>
</html>

Posted:

Comments:

Iframe html: Тег | htmlbook.ru

Тег iframe

Пример

Пример

Пример

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

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

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

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

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

Атрибуты

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

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

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

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

Популярное

— HTML — Дока

Кратко

Пример

Как понять

Как пишется

Атрибуты

Подсказки

На практике

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

HTML-тег iframe

Пример

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

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

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

ПИКЕР ЦВЕТА

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

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

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

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

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

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