Data: URL

data: URL — это определённая стандартом RFC 2397 схема, которая позволяет включать небольшие элементы данных в строку URL, как если бы они были ссылкой на внешний ресурс. Она гораздо проще альтернативных методов включения, таких как MIME с cid: или mid:. Согласно букве RFC “data: URI” это фактически “data: URL” (URL — унифицированный указатель ресурса), хотя реально он ни на что не указывает

Эта схема в настоящее время поддерживается браузерами Mozilla (и его производными типа Firefox), Opera, Safari и Konqueror. Internet Explorer версии 7 не поддерживает data: URI. Ранние версии Internet Explorer принимали неопознанные “about: URI” за HTML-ресурс, так что about:<b>bold</b> соответствовало data:text/html,<b>bold</b> в браузерах которые поддерживают data: URI.

Содержание

Преимущества

  • Для внедрённых данных не требуются заголовки HTTP, так что data: URI позволяет уменьшить нагрузку на сеть в тех случаях, когда встроенное содержимое меньше, чем заголовок HTTP
  • Браузеры обычно ограничены четырьмя одновременными подключениями к серверу, таким образом встроенные данные освобождают подключения для загрузки другого контента.
  • Браузеру требуется меньше запись в кэш для файлов содержащих data: URI.
  • Окружения, с ограниченным доступом к внешним ресурсам могут внедрить контент, даже если к нему закрыт доступ. Например, расширенное поле редактирования HTML может принять вставленное изображение и конвертировать его в data: URI, чтобы скрыть сложность обращения к внешним ресурсам от пользователя.
  • Может использоваться, чтобы создать документы XML содержащие изображения, но остающиеся в пределах контекста XML. (нет нужды использовать MIME/MHTML методы, нарушающие правильность XML).

Недостатки

  • Чтобы внести изменения во внедрённый контент, его нужно сначал извлечь и декодировать, потом снова закодировать и встроить.
  • data: URIs закодированные в Base64 примерно на 33 % больше по размеру чем их бинарный эквивалент.
  • Текст закодированный в URL data: URIs может быть больше в три раза (в критических случаях) чем первоначальный.
  • Внедрённая неоднократно информация, повторно загружается как часть содержащего файла, и таким образом не извлекается выгода из кэша браузера.
  • Браузеры имеют ограничения по длине URL, что определяет максимальный размер данных. Например, URIs в Опере имели предел 4 КБ.
  • Данные включаются как простой поток, и многие среды обработки (типа web-браузеров) не могут поддерживать контейнеры (вроде multipart/alternative или message/rfc822), чтобы обеспечить большую гибкость, типа метаданных, сжатия данных, или content negotiation(согласования контента по языку).

Формат

 data:[<mediatype>][;encoding],<data>

<mediatype> - спецификация типа носителей данных (с дополнительными параметрами; см. MIME). Появление “; base64″ означает, что данные закодированы в base64. Без “; base64″, данные (как последовательность байтов) представляются, с использованием кодировки ASCII в диапазоне безопасных символов URL и используя стандартное %xx шестнадцатеричное кодирование URL для символов вне этого диапазона. Если <mediatype> опущен, значение по умолчанию - text/plain; charset=US-ASCII. Для краткости, можно опустить “text/plain”, оставив параметр charset.

Схема data: URI не поддерживает относительные формы URL

Примеры

XHTML

Фрагмент внедрённого в XHTML небольшого изображения (Перенос для новую строку осуществлён для лучшей ясности восприятия):

<img
src="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw
AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz
ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp
a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl
ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis
F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH
hhx4dbgYKAAA7"
alt="Larry" />

Помните, что data: URI, как любой URI должен выдерживать форматирование отступами, но на практике существуют проблемы с кодированием в base64. Нужно избегать использовать отступы в data: URIs с закодированными в base64 данными.

CSS

Правило CSS с внедрённым фоновым изображением (опять-таки переносы сделаны для большей для лучшей ясности восприятия):

ul.checklist > li.complete { margin-left: 20px; background:
  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAA
    ABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeN
    Ge4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC) top left no-repeat; }

JavaScript

Инструкция JavaScript открывающая встроенное окно-сноску:

window.open('data:text/html;charset=utf-8,%3C!DOCTYPE%20HTML%20PUBLIC%20%22-'+
  '%2F%2FW3C%2F%2FDTD%20HTML%204.0%2F%2FEN%22%3E%0D%0A%3Chtml%20lang%3D%22en'+
  '%22%3E%0D%0A%3Chead%3E%3Ctitle%3EEmbedded%20Window%3C%2Ftitle%3E%3C%2Fhea'+
  'd%3E%0D%0A%3Cbody%3E%3Ch1%3E42%3C%2Fh1%3E%3C%2Fbody%3E%0D%0A%3C%2Fhtml%3E'+
  '%0D%0A','_blank','height=300,width=400');

См. также

Альтернативой для присоединения ресурсов к документу HTML служит MIME HTML используемый обычно в HTML сообщениях e-mail.

Ссылки

 
Начальная страница  » 
А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ы Э Ю Я
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
0 1 2 3 4 5 6 7 8 9 Home