Атрибут id тега <iframe>
Описание
Атрибут id задаёт уникальный идентификатор элементу <iframe>. Этот идентификатор используется для стилизации элемента через CSS, обращения к нему через JavaScript и как якорная ссылка.
<iframe
src="dashboard.html"
id="mainDashboard"
width="100%"
height="500">
</iframe>
Основные применения:
| Применение | Пример | Описание |
|---|---|---|
| CSS-стилизация | #mainDashboard { border: none; } |
Уникальное оформление элемента |
| JavaScript-доступ | document.getElementById('mainDashboard') |
Манипуляции с содержимым iframe |
| Якорные ссылки | <a href="#mainDashboard">К дашборду</a> |
Быстрая навигация к элементу |
Пример взаимодействия через JavaScript:
<iframe
id="interactiveFrame"
src="app.html"
width="800"
height="600">
</iframe>
<button onclick="resizeFrame()">Изменить размер</button>
<script>
function resizeFrame() {
const frame = document.getElementById('interactiveFrame');
frame.width = frame.width === '800' ? '100%' : '800';
frame.height = frame.height === '600' ? '400' : '600';
}
</script>
Рекомендации по именованию:
- Используйте осмысленные имена (не "frame1", "frame2")
- Придерживайтесь одного стиля (camelCase, kebab-case)
- Избегайте цифр в начале имени
- Не используйте пробелы и специальные символы
Пример с CSS и JavaScript:
<style>
#videoPlayer {
transition: all 0.3s ease;
max-width: 100%;
}
#videoPlayer.fullscreen {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1000;
}
</style>
<iframe
id="videoPlayer"
src="video.html"
width="640"
height="360">
</iframe>
<button onclick="toggleFullscreen()">Полноэкранный режим</button>
<script>
function toggleFullscreen() {
const player = document.getElementById('videoPlayer');
player.classList.toggle('fullscreen');
}
</script>
Ограничения и совместимость:
- Поддерживается всеми браузерами
- Значение должно быть уникальным в пределах документа
- Чувствительность к регистру зависит от DOCTYPE
- Не используйте зарезервированные слова (например, "top", "window")
Примечание: Хотя атрибут id очень полезен, избегайте его чрезмерного использования для стилизации. Для оформления предпочтительнее применять классы. Идентификатор лучше сохранить для JavaScript-взаимодействия и особых случаев.