Атрибут name тега <iframe>
Описание
Атрибут name задаёт имя элемента <iframe>, которое может использоваться для ссылки на фрейм из JavaScript или как цель для ссылок и форм. Имя должно быть уникальным в пределах документа.
<iframe
src="content.html"
name="contentFrame"
width="600"
height="400">
</iframe>
<a href="newpage.html" target="contentFrame">Загрузить в фрейм</a>
Основные применения:
| Применение | Описание | Пример |
|---|---|---|
| Цель для ссылок | Загрузка контента по ссылке в указанный фрейм | <a href="page.html" target="frameName"> |
| Цель для форм | Отправка формы с отображением результата во фрейме | <form target="frameName"> |
| Доступ из JavaScript | Получение ссылки на фрейм через коллекцию window.frames | window.frames["frameName"] |
Работа с формами:
<iframe
name="formResults"
width="100%"
height="300">
</iframe>
<form action="process.php" target="formResults">
<input type="text" name="username">
<button type="submit">Отправить</button>
</form>
Доступ через JavaScript:
<iframe
name="dataFrame"
src="data.html"
width="0"
height="0"
style="visibility: hidden;">
</iframe>
<button onclick="getFrameData()">Получить данные</button>
<script>
function getFrameData() {
const frame = window.frames["dataFrame"];
const frameData = frame.document.body.innerText;
console.log("Данные из фрейма:", frameData);
}
</script>
Рекомендации по использованию:
- Используйте осмысленные имена, отражающие назначение фрейма
- Избегайте пробелов и специальных символов в именах
- Для динамически создаваемых фреймов генерируйте уникальные имена
- В современных приложениях предпочтительнее использовать id и DOM-методы
Особенности безопасности:
<iframe
name="secureFrame"
src="https://trusted-domain.com"
sandbox="allow-scripts allow-same-origin"
width="500"
height="300">
</iframe>
<script>
// Доступ к фрейму ограничен политикой same-origin
try {
console.log(window.frames["secureFrame"].document.title);
} catch (e) {
console.error("Доступ запрещен:", e.message);
}
</script>
Ограничения и совместимость:
- Поддерживается всеми браузерами
- Имена чувствительны к регистру в некоторых браузерах
- Доступ из JavaScript ограничен политикой same-origin
- Устаревший подход, но все еще широко используется
Примечание: Хотя атрибут name является устаревшим в HTML5 в пользу атрибута id, он остается важным для совместимости с унаследованным кодом и некоторых специфических сценариев работы с фреймами. Для новых проектов рекомендуется использовать современные методы работы с DOM.