Тег object (от английского object, «объект») подключает к странице внешний ресурс: картинку, SVG, страницу или PDF. Главная функция тега, которой нет у соседних embed и iframe, — это запасное содержимое: если файл не открылся, браузер показывает то, что записано между открывающим и закрывающим тегами. Когда-то через object запускали Flash, Java-апплеты и ActiveX, а сегодня плагинов в браузерах нет.
Дальше разобраны атрибуты, то, что открывает data, роль type, запасное содержимое, размер, SVG и PDF, работа из JavaScript, сравнение с embed и iframe и причины, по которым файл не открывается. Другие теги группы собраны в шпаргалке по тегам.
<object data="guide.pdf" type="application/pdf"
width="600" height="400">
<a href="guide.pdf">Скачать PDF</a>
</object>В этой статье
- Тег object в HTML: что это и для чего нужен
- Атрибуты тега object: data, type, width, height и другие
- Атрибут data тега object: что можно открыть
- Атрибут type тега object: MIME-тип и поведение файла
- Запасное содержимое тега object: когда оно показывается
- Размер тега object: width, height и CSS
- Тег object для SVG и PDF
- Тег object в JavaScript: contentDocument, load и error
- Тег object, embed или iframe: чем отличаются
- Почему тег object не работает
Тег object в HTML: что это и для чего нужен
Сначала о том, что делает object на странице и в каких случаях его берут сегодня.
Тег object резервирует на странице место и открывает в нём файл по адресу из data. Как показать файл, решает браузер. Картинка выводится со своим размером и без окна внутри. SVG, страница, текст, PDF, видео и звук открываются в окне внутри тега: у SVG оно по размеру файла, у остальных файлов по умолчанию 300 на 150. Полная таблица дана в разделе про атрибут data.
Закрывающий тег нужен всегда: между <object> и </object> записывают запасное содержимое. Там могут быть текст, ссылка, img или другой object. Когда файл открылся, это содержимое на странице не видно. Рамки у тега нет.
Сегодня object берут в трёх случаях: когда нужен SVG со скриптом или с доступом из JavaScript страницы, когда PDF показывают с запасной ссылкой и когда нужна цепочка из нескольких файлов на выбор. Обычные картинки выводят тегом img, видео — тегом video, чужие страницы — тегом iframe.
Атрибуты тега object: data, type, width, height и другие
Атрибутов у object немного, и часть из них осталась от плагинов, которых в браузерах больше нет.
| Атрибут | Что делает | Пример |
|---|---|---|
data | Адрес файла. Без него файл не открывается | <object data="a.svg"> |
type | Тип файла в формате MIME. Тип, который браузер не знает, сразу отправляет в запасное содержимое | <object data="a.pdf" type="application/pdf"> |
width | Ширина в пикселях или процентах | <object width="600"> |
height | Высота в пикселях или процентах | <object height="400"> |
name | Название окна внутри тега: на него указывает атрибут target у ссылки | <object name="view"> |
form | Связывает тег с формой по её id | <object form="order"> |
usemap | Карта-ссылка. У object клик по областям не срабатывает, карту делают на img | <object usemap="#map"> |
| Устарели, были нужны плагинам. Не используют | Не нужен |
Атрибутов sandbox и referrerpolicy у object нет: записанные на теге, они не действуют, и скрипты внутри файла выполняются. Тег param когда-то передавал параметры плагину, сегодня он не нужен. Общие атрибуты id, class, style и hidden работают как у других тегов.
Значение name позволяет открыть ссылку внутри самого тега. У ссылки записывают target с тем же значением, и страница по её адресу загружается в object, а не в новую вкладку.
<object name="view" data="a.html"></object>
<a href="b.html" target="view">Открыть B внутри object</a>Пример: атрибуты name и target тега object
Три ссылки открываются внутри тега object, потому что их target совпадает со значением name. Кнопка меняет адрес файла из JavaScript, строка показывает текущее содержимое.
Атрибут data тега object: что можно открыть
Атрибут data задаёт адрес файла, а размер и вид тега зависят от того, какой это файл.
Адрес в data может быть полным или относительным. Что получится на странице, зависит от файла.
| Файл | Размер тега | Окно внутри |
|---|---|---|
| Картинка PNG или JPG | Свой размер файла | Нет |
| SVG с размером в файле | Размер из файла | Да |
SVG только с viewBox | Вся ширина контейнера, пропорции сохранены | Да |
| HTML-страница | 300 на 150 | Да |
| Текстовый файл | 300 на 150 | Да |
| 300 на 150, если у браузера есть просмотрщик | Да | |
| Видео и звук | 300 на 150, внутри плеер | Да |
Flash (.swf) | Пустая область 300 на 150 | Нет |
| Файла нет по адресу | 0 на 0, а с запасным содержимым размер этого содержимого | Нет |
Нет data и нет содержимого | Пустая область 300 на 150 | Нет |
Если у тега задан display: none, файл с сервера не запрашивается. Поэтому скрытый object не тратит трафик.
<object data="photo.png"></object>
<object data="logo.svg"></object>
<object data="page.html" width="400" height="300"></object>Атрибут type тега object: MIME-тип и поведение файла
Атрибут type подсказывает тип файла, но показывает файл браузер по ответу сервера.
В type записывают тип файла в формате MIME, например image/svg+xml или application/pdf. Превратить файл в другой нельзя: PNG с type="text/html" остаётся картинкой, только окном 300 на 150, а страница с type="image/png" открывается как страница. У embed та же страница с таким типом даёт ошибку.
Тип решает в одном случае: когда браузер его не знает. Тогда файл с сервера не загружается совсем, а сразу показано запасное содержимое. Файл PNG с type="application/x-nothing" и файл Flash с сервера не запрашиваются.
Пример: атрибут type тега object
Четыре кнопки меняют файл и атрибут type. Строки показывают размер, наличие окна и тип документа внутри тега: он зависит от файла, а не от type.
<object data="a.png" type="application/x-nothing">
Запасной текст
</object>Запасное содержимое тега object: когда оно показывается
Запасное содержимое показывается, когда файл не открылся, и скрыто, когда файл открыт.
Всё, что записано между <object> и </object>, браузер держит наготове. Оно выводится вместо тега, если файл не открыт.
| Ситуация | Что видно |
|---|---|
| Файл открылся | Файл. Запасное содержимое скрыто |
| Файла нет по адресу | Запасное содержимое, пришло событие error |
Сервер запретил встраивание заголовком X-Frame-Options или frame-ancestors | Запасное содержимое, пришло событие error |
Браузер не знает тип из type | Запасное содержимое, файл не загружался |
| Файл Flash | Запасное содержимое |
Нет data | Запасное содержимое |
Если запасного содержимого нет, а файла нет по адресу, тег сжимается до 0 на 0, и посетитель не видит ничего. Поэтому внутрь всегда записывают хотя бы ссылку или короткий текст.
Пример: запасное содержимое тега object
Каждая кнопка создаёт object с другим файлом. Строка «Что видно» показывает, на экране файл или запасное содержимое. В цепочке из трёх уровней первые два файла не найдены, и открыта картинка из самого внутреннего уровня.
Запасное содержимое может быть цепочкой. Если не открылся внешний object, браузер пробует вложенный, а если не открылся и он, показывает последний вариант, обычно img или текст.
<object data="logo.svg" type="image/svg+xml">
<object data="logo.webp" type="image/webp">
<img src="logo.png" alt="Логотип" loading="lazy">
</object>
</object>Есть тонкость с картинкой в запасном содержимом. Тег img внутри object запрашивается с сервера, даже когда основной файл открылся и картинка не видна. Атрибут loading="lazy" убирает это обращение. Вложенный object так себя не ведёт: его файл не запрашивается, пока открыт внешний.
Размер тега object: width, height и CSS
Размер задают атрибутами width и height или стилями, и у разных файлов он ведёт себя по-разному.
Без размеров картинка занимает размер файла, а страница, текст, PDF и видео получают окно 300 на 150. Для PDF этого мало, поэтому width и height у него записывают всегда. SVG, у которого в файле есть только viewBox, растягивается на всю ширину контейнера с сохранением пропорций.
Если задан один width, высота картинки считается по пропорциям: PNG 200 на 100 при width="300" занимает 300 на 150. Если заданы оба размера, картинка растягивается и искажается, а object-fit: cover обрезает её по рамке тега. SVG с viewBox в большей рамке не искажается: рисунок сохраняет пропорции и стоит по центру. Проценты считаются от контейнера: width="50%" в контейнере 303 пикселя даёт 152 пикселя.
Тег строчный, поэтому под ним остаётся зазор около 4 пикселей, как у картинки. Его убирает display: block. Рамка по умолчанию нулевая.
object {
display: block;
width: 100%;
height: auto;
}Пример: размер и CSS тега object
Кнопки задают размер атрибутами и стилями. Строки показывают итоговый размер тега и ширину контейнера. У PNG при двух размерах картинка растягивается, а object-fit обрезает её по рамке.
Тег object для SVG и PDF
SVG и PDF — сегодня главные причины, по которым вообще используют object.
SVG в object остаётся полноценным документом. Скрипт внутри файла выполняется, а тот же файл в img показан как неподвижная картинка: скрипт не запускается. В примере SVG сам меняет свой текст: в object текст заменён, в img остался прежний.
Пример: SVG со скриптом в теге object и в img
Один и тот же SVG показан двумя способами. В object скрипт заменил надпись, в img надпись осталась исходной.
| Свойство | img | object |
|---|---|---|
| Скрипт внутри SVG | Не выполняется | Выполняется |
| Доступ из JavaScript страницы | Нет | Есть через contentDocument, если файл с того же источника |
| Стили страницы | Не действуют | Не действуют |
| Запасной вариант | Атрибут alt | Вложенное содержимое |
Стили страницы в файл не проникают: правило text{fill:red !important} не перекрашивает текст внутри SVG. Файл управляется своими стилями или из JavaScript через contentDocument. Для запасного варианта SVG обычно записывают картинку PNG, а чтобы она не загружалась зря, добавляют loading="lazy".
<object data="logo.svg" type="image/svg+xml">
<img src="logo.png" alt="Логотип" loading="lazy">
</object>PDF в object открывается просмотрщиком браузера в окне, размер которого по умолчанию 300 на 150. Поэтому width и height нужны. Внутрь записывают ссылку на файл: если PDF не открылся, она остаётся единственным способом получить документ.
<object data="guide.pdf" type="application/pdf"
width="600" height="800">
<p>PDF не открылся. <a href="guide.pdf">Скачать файл</a></p>
</object>Тег object в JavaScript: contentDocument, load и error
Из JavaScript у object есть события load и error, а также contentDocument и contentWindow.
Событие load приходит, когда файл открыт: для картинки, SVG и страницы. Событие error приходит, когда файла нет по адресу и когда сервер запретил встраивание заголовком. В отличие от embed, при таком запрете показано запасное содержимое. Для файла Flash и для тега без data не приходит ни то ни другое.
const box = document.querySelector("object");
box.addEventListener("load", () => console.log("файл открыт"));
box.addEventListener("error", () => console.log("файл не открылся"));Свойство contentDocument даёт документ внутри тега: у SVG, страницы и текста. Для картинки оно равно null. Если файл с другого источника, contentDocument тоже null, а contentWindow есть, но чтение contentWindow.document приводит к ошибке SecurityError.
const doc = box.contentDocument;
if (doc) {
doc.getElementById("r").setAttribute("fill", "#2E8B57");
}Если записать новое значение в свойство data, тег загрузит другой файл и снова пришлёт событие load.
box.data = "other.html";Пример: тег object в JavaScript и contentDocument
Кнопки создают object с файлом. Для SVG и страницы из того же источника contentDocument читается, текст и заголовок достаются из него, а цвет меняется. Для адреса data: документ закрыт и равен null.
Тег object, embed или iframe: чем отличаются
Три тега открывают внешние файлы, но различаются запасным содержимым, доступом из скрипта и поведением при запрете.
| Свойство | object | embed | iframe |
|---|---|---|---|
| Запасное содержимое | Есть | Нет | Нет |
| Адрес файла | data | src | src |
contentDocument и contentWindow | Есть | Нет | Есть |
| Запрет встраивания заголовком сервера | Событие error и запасное содержимое | Событие load и пустое окно | Страница не показана |
Страница с type="image/png" | Открыта как страница | Ошибка | Нет такого атрибута |
| Картинка внутри | Свой размер, без окна | Свой размер, без окна | В окне 304 на 154 с рамкой |
| Закрывающий тег | Нужен | Не нужен | Нужен |
Атрибут sandbox | Не действует | Не действует | Действует |
Выбор простой. Если нужны запасное содержимое, SVG со скриптом или PDF со ссылкой на случай ошибки, берут object. Если нужны ограничения через sandbox, ленивая загрузка или чужая страница, берут iframe. Если нужно коротко показать файл без запасного варианта, подойдёт embed.
Почему тег object не работает
Если файл не открывается, причину ищут в трёх местах: в самом теге, в ответе сервера и в возможностях браузера.
| Причина | Что видно | Что делать |
|---|---|---|
Нет data и нет содержимого | Пустая область 300 на 150 | Записать data |
| Файла нет по адресу | Запасное содержимое, а без него 0 на 0; событие error | Проверить адрес, открыть его отдельно |
| Сервер запретил встраивание | Запасное содержимое, событие error | Дать ссылку внутри тега или взять разрешённый код |
Браузер не знает тип из type | Запасное содержимое, файл не загружался | Убрать type или записать верный |
| Файл Flash или другой плагин | Запасное содержимое, а без него пустая область | Заменить на video, canvas или скрипт |
| Не задан размер у PDF | Окно 300 на 150, читать неудобно | Записать width и height |
Скрипт читает contentDocument файла с другого источника | Значение null или ошибка SecurityError | Брать файл с того же источника |
У тега display: none | Файл не загружается | Показать тег или не скрывать его стилем |
Частые ошибки с тегом object
Основные ошибки связаны с адресом в неверном атрибуте, незакрытым тегом и ожиданием того, что object ведёт себя как iframe или img.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
<object src="a.png"></object> | У тега нет src, адрес не задан: пустая область 300 на 150 | Записать data |
<object data="a.png" /> | Слэш тег не закрывает: всё записанное дальше оказывается внутри object | Записать </object> |
<object data="a.pdf"></object> | Нет размера и запасной ссылки: окно 300 на 150, а при ошибке тег пустой | Добавить width, height и ссылку внутри |
<object data="a.png" type="x/nothing"> | Тип неизвестен браузеру, файл не загружен, виден запасной текст | Убрать type или записать верный |
<object sandbox=""> | Атрибут не действует, скрипты внутри выполняются | Взять iframe с sandbox |
<object data="a.svg"> | Стили страницы в файл не проникают, текст не перекрашивается | Задать стили в файле или через contentDocument |
object.contentDocument для файла с другого источника | Значение null | Брать файл с того же источника |
Картинка в запасном содержимом без loading="lazy" | Файл запрашивается, даже когда основной файл открыт | Добавить loading="lazy" |
<object usemap="#map"> | Клик по областям карты не срабатывает | Сделать карту на img |
<object data="a.swf"> | Flash не запускается, события нет | Заменить на video или скрипт |
