Тег iframe - это отличный способ «встроить» в свою страницу кусочек другого сайта или отдельный документ. Самое интересное здесь то, что этот контент живет своей жизнью и полностью независим от остального окружения. При этом родительская страница и дочерняя (та самая, что внутри фрейма) вполне могут общаться друг с другом через JavaScript или серверные скрипты!

Чтобы загрузить нужную страницу во встроенную область, используется атрибут src. Но не думайте, что внутри может быть только ссылка: между тегами можно вписать и обычный текст. Это полезный запасной вариант (fallback), который покажут пользователи со старенькими или текстовыми браузерами, если они по какой-то причине не поддерживают этот элемент.

Здесь кроется важный нюанс: стили изолированы! Никакие CSS-правила из родительского документа не просочатся внутрь фрейма, а правила внутри него - никак не повлияют на внешнюю страницу. Это своего рода жесткая граница для стилей.

Размер встроенной области легко настроить через CSS или необязательные атрибуты width и height. Если ничего не указывать, браузеры по умолчанию предложат рамку размером ровно 300px в ширину и 150px в высоту (хотя в зависимости от браузера значения могут отличаться). К слову, большинство из них рисуют вокруг контента тонкую рамочку, которую можно легко изменить или скрыть с помощью CSS.

Что произойдет, если втиснутый контент окажется больше отведенного места? Логично: появятся привычные полосы прокрутки. Да, их можно отключить с помощью CSS-объявления hidden, но будьте осторожны! В этом случае пользователь просто потеряет возможность увидеть скрытую часть информации.

Познакомимся поближе с основными атрибутами:

• height: Задаем высоту элемента в пикселях.
• name: Даем элементу имя. Это значение очень удобно использовать для ссылок из JavaScript, либо как параметр target для элементов и форм.
• sandbox: Настоящий спаситель безопасности! Этот атрибут накладывает ограничения на содержимое фрейма, если вы хотите подключить ненадежный веб-сайт. Значением может быть пустая строка (sandbox=""), что включает режим максимальной защиты, либо список значений через пробелы для снятия конкретных запретов:

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

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

Атрибут seamless: Волшебное слово для тех, кто хочет, чтобы содержимое iframe выглядело как естественная часть вашего документа (без рамки и скроллбаров). Возможные значения логического атрибута: iframe seamless, iframe seamless="" или iframe seamless="seamless". Обратите внимание: этот атрибут поддерживается только в Chrome и Safari6+.

Атрибут src: Указывает адрес документа, который будет отображен во встроенном фрейме.
Атрибут width: Задаем ширину элемента в пикселях.