Атрибут src тега <iframe>
Описание
Атрибут src определяет URL-адрес содержимого, которое будет загружено в элемент <iframe>. Это обязательный атрибут для работы iframe, если не используется srcdoc.
<iframe
src="https://example.com/embedded-content"
width="600"
height="400">
</iframe>
Поддерживаемые протоколы и форматы:
| Тип контента | Пример | Ограничения |
|---|---|---|
| HTTP/HTTPS | src="https://example.com" |
Подчиняется политике CORS |
| Относительные пути | src="/local-content.html" |
Только same-origin |
| Data URL | src="data:text/html,..." |
Ограниченный размер |
| Blob URL | src="blob:https://..." |
Требуется JavaScript |
Динамическое изменение содержимого:
<iframe id="dynamicFrame" width="500" height="300"></iframe>
<select onchange="changeIframeSource(this.value)">
<option value="page1.html">Страница 1</option>
<option value="page2.html">Страница 2</option>
</select>
<script>
function changeIframeSource(url) {
document.getElementById('dynamicFrame').src = url;
}
</script>
Рекомендации по использованию:
- Всегда используйте HTTPS для внешних ресурсов
- Для стороннего контента добавляйте атрибут
sandbox - Избегайте вложенных iframe (максимум 2-3 уровня)
- Указывайте явные размеры (width/height) для стабильного layout
Безопасная загрузка контента:
<iframe
src="https://trusted-domain.com"
sandbox="allow-scripts allow-same-origin"
referrerpolicy="no-referrer-when-downgrade"
width="100%"
height="500">
</iframe>
Обработка ошибок загрузки:
<iframe id="safeFrame" src="unstable-source.com" onerror="fallbackContent()">
<p>Альтернативное содержимое</p>
</iframe>
<script>
function fallbackContent() {
const frame = document.getElementById('safeFrame');
frame.srcdoc = '<h1>Контент недоступен</h1>';
}
</script>
Ограничения и совместимость:
- Поддерживается всеми браузерами
- Загрузка может блокироваться политикой CSP
- Некоторые сайты запрещают встраивание через X-Frame-Options
- Медленная загрузка iframe влияет на производительность страницы
Примечание: При работе с атрибутом src учитывайте политики безопасности (CSP, CORS, X-Frame-Options) целевых ресурсов. Для важного функционала предусматривайте fallback-решения на случай недоступности контента.