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>
Результат данного примера в окне браузера: