Атрибут data-* тега <object>
Описание
Атрибуты data-* позволяют хранить произвольные данные в элементе <object>. Эти пользовательские атрибуты полезны для:
- Хранения конфигурационных параметров для встроенного контента
- Передачи дополнительной информации JavaScript
- Интеграции с системами аналитики и отслеживания
<object data="game.swf" type="application/x-shockwave-flash"
data-game-version="1.2" data-settings='{"difficulty":"hard"}'>
<p>Требуется Flash Player для запуска игры</p>
</object>
Типичные сценарии применения:
| Атрибут | Пример | Назначение |
|---|---|---|
| data-config | data-config='{"autoplay":true}' |
Конфигурация встроенного объекта |
| data-track | data-track="embedded-media" |
Идентификатор для аналитики |
| data-fallback | data-fallback="alternative.html" |
Альтернативный источник контента |
Пример с JavaScript:
<object id="pdfViewer" data="document.pdf" type="application/pdf"
data-zoom-level="150" data-show-toolbar="false">
<p>PDF viewer не поддерживается</p>
</object>
<script>
const viewer = document.getElementById('pdfViewer');
const zoom = viewer.dataset.zoomLevel; // "150"
const showToolbar = viewer.dataset.showToolbar === 'true'; // false
console.log(`Настройки PDF: zoom=${zoom}%, toolbar=${showToolbar}`);
</script>
Рекомендации по использованию:
- Используйте осмысленные имена после префикса data-
- Для сложных данных используйте JSON-строки
- Избегайте хранения чувствительной информации
- Сочетайте с атрибутом id для удобного доступа
- Проверяйте поддержку в целевых браузерах
Ограничения и совместимость:
- Поддерживается всеми современными браузерами
- Доступ через dataset требует IE11+
- Данные видны в исходном коде страницы
- Не влияет на отображение контента
Примечание: Хотя атрибуты data-* предоставляют гибкий способ хранения информации, для сложных сценариев взаимодействия с встроенными объектами часто лучше использовать специализированные API или параметры, специфичные для конкретного типа контента.