Атрибут data тега <object> — файл для показу
Атрибут data визначає файл, який слід відобразити у вікні браузера. Для популярних форматів даних досить вказати шлях до файлу і його тип (атрибут type) для завантаження і демонстрації результату. Для специфічних плагінів бажано ще включити атрибут classid.
Шлях до файлу визначається щодо папки, заданої атрибутом codebase. Якщо codebase не вказано, тоді шлях слід задавати щодо поточного документа.
Загальний опис
автор: NagarD
Синтаксис
<object data="URL">Атрибут data може отримувати єдине значення:
-
URL -
Задає URL-адресу ресурсу, який буде використовуватися об'єктом. Можливі значення:
- Абсолютний URL - вказує на дані на інший веб-сайт (наприклад href = "http://www.example.com/helloworld.swg")
- Відносний URL - вказує на дані в межах веб-сайту (наприклад href = "helloworld.swg")
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
П'ять вставок з одним і тим самим SVG: звичайна адреса в data, повна відсутність data (видно резервний вміст), недосяжна адреса (теж резервний вміст), type="text/plain" на даних SVG — картинка малюється попри хибний тип, — і об'єкт без width та height, який бере власний розмір ресурсу.
HTML
<p class="lbl">1. Звичайний випадок: адреса в data</p>
<object width="120" height="60" type="image/svg+xml"
data="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Crect width='120' height='60' fill='%2372b043'/%3E%3Ccircle cx='60' cy='30' r='18' fill='%23ffffff'/%3E%3C/svg%3E"><b class="fb">резерв</b></object>
<p class="lbl">2. data немає — показано резервний вміст із середини теґа</p>
<object width="120" height="60"><b class="fb">резерв: адреси немає</b></object>
<p class="lbl">3. Адреса недосяжна — той самий резервний вміст</p>
<object width="120" height="60" data="data:application/x-nevidomyj-typ,zzz"><b class="fb">резерв: ресурс не взято</b></object>
<p class="lbl">4. type="text/plain", а дані — SVG: картинка все одно малюється,
бо type лише підказка</p>
<object width="120" height="60" type="text/plain"
data="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Crect width='120' height='60' fill='%23f2b134'/%3E%3Ccircle cx='60' cy='30' r='18' fill='%23ffffff'/%3E%3C/svg%3E"><b class="fb">резерв</b></object>
<p class="lbl">5. Без width і height — коробка за власним розміром ресурсу</p>
<object data="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Crect width='120' height='60' fill='%232f6fd0'/%3E%3Ccircle cx='60' cy='30' r='18' fill='%23ffffff'/%3E%3C/svg%3E"><b class="fb">резерв</b></object>CSS
.lbl {
margin: 18px 0 6px;
max-width: 520px;
color: #5a6472;
font-size: .95em;
}
object {
display: block;
outline: 2px dashed #b9c6d8;
outline-offset: 2px;
}
.fb {
color: #c0392b;
}<h3>Приклад використання атрибуту <code>data</code></h3>
<object id ="image" width="300" height="300" border="0"
data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='180'%3E%3Crect%20width='320'%20height='180'%20fill='%231b2536'/%3E%3Crect%20x='12'%20y='12'%20width='296'%20height='156'%20fill='%23264653'/%3E%3Ccircle%20cx='160'%20cy='90'%20r='42'%20fill='%23e63946'/%3E%3Cpath%20d='M146%2066%20192%2090%20146%20114Z'%20fill='%23ffffff'/%3E%3C/svg%3E">
</object>
<object id ="image" width="300" height="300" border="0"
data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%20viewBox='0%200%20120%20120'%3E%3Crect%20width='120'%20height='120'%20fill='%23a8dadc'/%3E%3Crect%20y='84'%20width='120'%20height='36'%20fill='%23457b9d'/%3E%3Ccircle%20cx='94'%20cy='24'%20r='12'%20fill='%23f4a261'/%3E%3Cpath%20d='M0%2084%2034%2038%2066%2074%2084%2056%20120%2084Z'%20fill='%232a9d8f'/%3E%3C/svg%3E" >
</object>
<object id ="image" width="300" height="300" border="0"
data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%20viewBox='0%200%20120%20120'%3E%3Crect%20width='120'%20height='120'%20fill='%23a8dadc'/%3E%3Crect%20y='84'%20width='120'%20height='36'%20fill='%23457b9d'/%3E%3Ccircle%20cx='94'%20cy='24'%20r='12'%20fill='%23f4a261'/%3E%3Cpath%20d='M0%2084%2034%2038%2066%2074%2084%2056%20120%2084Z'%20fill='%232a9d8f'/%3E%3C/svg%3E" >
</object>Різниця між HTML 4.01 та HTML5
Атрибут data з'явився в Html 4.0.1.
Коментарі
Коментарів ще немає — будьте першим!