Самоучитель HTML Справочник HTML Глобальные атрибуты События Типы элементов Таблица цветов Спецсимволы HTML
Теги HTML

HTML тег <iframe>

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

Описание

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" width="400" height="300">
  Ваш браузер не поддерживает iframe!
</iframe> 

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

Пример использования тега <iframe>
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2016 © puzzleweb.ru

Реклама на сайте | puzinfo@puzzleweb.ru