Атрибут srcdoc тега <iframe>
Описание
Атрибут srcdoc позволяет задать содержимое элемента <iframe> непосредственно в HTML-коде, без необходимости загружать внешний ресурс. Переопределяет атрибут src, если указан.
<iframe
srcdoc="<h1>Встроенный контент</h1><p>Этот HTML загружен напрямую.</p>"
width="400"
height="200">
</iframe>
Основные особенности:
| Характеристика | Описание | Примечание |
|---|---|---|
| Приоритет | Игнорирует src если указан |
Можно комбинировать для fallback |
| Кодировка | HTML-сущности должны быть экранированы | Используйте < вместо < |
| Безопасность | Безопаснее чем src с data-URI |
Все равно рекомендуется sandbox |
| Размер | Ограничен длиной строки атрибута | Для большого контента лучше src |
Динамическое обновление содержимого:
<iframe id="dynamicDoc" width="500" height="300"></iframe>
<button onclick="updateContent()">Обновить контент</button>
<script>
function updateContent() {
const html = `<h2>Новое содержимое</h2>
<p>Сгенерировано: ${new Date()}</p>`;
document.getElementById('dynamicDoc').srcdoc = html;
}
</script>
Комбинация с sandbox:
<iframe
srcdoc="<button onclick='alert("Clicked!")'>Нажми меня</button>"
sandbox="allow-scripts"
width="300"
height="100">
</iframe>
Рекомендации по использованию:
- Используйте для небольших фрагментов HTML
- Экранируйте кавычки и спецсимволы
- Для сложного контента используйте шаблонизаторы
- Всегда указывайте атрибут sandbox для безопасности
Fallback-решение:
<iframe
srcdoc="<p>Новое содержимое</p>"
src="fallback.html"
width="400"
height="200">
</iframe>
Ограничения и совместимость:
- Поддерживается всеми современными браузерами
- Не работает в IE
- Максимальная длина около 2MB (зависит от браузера)
- Относительные URL в контенте работают неожиданно
Примечание: Атрибут srcdoc особенно полезен для демонстраций, интерактивных примеров кода и случаев когда нужно избежать дополнительных HTTP-запросов. Для production-решений с большим контентом предпочтительнее использовать src с внешними ресурсами.