1) Использование XML islands в разметке — тег XML. Содержимое тега — это XML документ, где сам тег XML является корневым элементом. Любое содержимое можно поместить в CDATA. Преимуществом данного подхода является возможность хранения ресурсов в древовидной структуре, а также доступность XPATH для поиска элементов xml-документа.
2) Хранение графических файлов в самой разметки, используя base64. Данная возможность присутствует с выходом 7й версии Internet Explorer. Пример:
<img
src="data:image/gif;base64,R0lGODlhUAAPAKIAAAsLav///88PD9WqsYmApmZmZtZfYmdakyH5BAQUAP8ALAAAAABQAA8AAAPb
WLrc/jDKSVe4OOvNu/9gqARDSRBHegyGMahqO4R0bQcjIQ8E4BMCQc930JluyGRmdAAcdiigMLVr
ApTYWy5FKM1IQe+Mp+L4rphz+qIOBAUYeCY4p2tGrJZeH9y79mZsawFoaIRxF3JyiYxuHiMGb5KT
kpFvZj4ZbYeCiXaOiKBwnxh4fnt9e3ktgZyHhrChinONs3cFAShFF2JhvCZlG5uchYNun5eedRxM
AF15XEFRXgZWWdciuM8GCmdSQ84lLQfY5R14wDB5Lyon4ubwS7jx9NcV9/j5+g4JADs=
" />3) Хранение ресурсов с помощью MHT-файлов. Все ресурсы можно расположить в одном MHT файле. А обращаться к ним через протокол mhtml.
mhtml:index.html!ИдентификаторРесурсаСохраним веб-страницу с нужными изображениями как MHT-файл. Откроем этот файл блокнотом.
Увидим содержимое приблизительно следующего характера:
------------foAU6rlzk2jhLlX6C7PQfA
Content-Disposition: inline
Content-Type: image/gif
Content-Location: http://www.securityfocus.com/images/site/list_arrow.gif
Content-Transfer-Encoding: Base64
R0lGODlhBgAGAIABAP9mAP///yH5BAEAAAEALAAAAAAGAAYAAAIJjI8Hi2wQYEwF
ADs=Идентификатор ресурса — это значение Content-Location.
В HTA приложении добавим тег IMG, который будет ссылаться на этот рисунок.
<img src="mhtml:C:\\index2.mht!http://www.securityfocus.com/images/site/list_arrow.gif" width=100 height=100>В примере я использовал протокол mhtml. Ниже я выделю каждую часть строки вызова:
mhtml:{Path To MHT File}!{Content-Location Value}
Path To MHT File — содержит полный путь к файлу mht.
Content-Location Value — значение взятое из поля Content-Location нужного ресурса.
Для хранения заготовок в гипертекстовых приложениях можно воспользоваться и уже имеющимися элементами разметки. Например, COMMENT (IE-специфичный тег комментариев). Или SCRIPT, указав язык или тип содержимого, для которых отсутствует обработчик сценариев, например, честно указав type='text/plain'. В обоих случаях разбор содержимого элементов не производится, а получить его можно через свойство innerHTML или характерное для этих элементов свойство text.
Простой пример наподобие примера из #1:
<HTML>
<HEAD>
<SCRIPT language='JavaScript'>
function main() {
var element = document.getElementById("MyResource");
//alert(element.innerHTML);
alert(element.text);
var success=(element.innerText=="");
alert("Проверим элемент на наличие текстовых узлов:\n"+
"element.innerText = "+element.innerText+"\n"+
"Как видим, "+(success?"их нет":"они есть")+
" — парсинг элемента "+(success?"":"не ")+"отключен.");
}
</SCRIPT>
<SCRIPT id='MyResource' type='text/plain'><b>text resource</b></SCRIPT>
</HEAD>
<BODY onLoad='main();'></BODY></HTML>Более развёрнутый пример:
<HTML>
<HEAD>
<META http-equiv='Content-Type' content='text/html; charset=windows-1251'>
<TITLE>Ресурсы в комментариях <COMMENT></TITLE>
<!-- НАЧАЛО РАЗДЕЛА РЕСУРСОВ -->
<COMMENT id='resource:Greeting'
>Вас приветствует пример хранения ресурсов в комментариях <COMMENT>!
Это сообщение тоже хранится в ресурсе. (Закрывающий тег </C OMMENT>
вставить в ресурс в неизменном виде нельзя.)</COMMENT>
<COMMENT id='resource:Frame1.html'><HTML>
<BODY>
<P style='color:navy;'>Содержимое документа,<BR>загружаемого во фрейм.</P>
<P><SMALL><I>Для просмотра исходного кода этого фрейма
выберите в его контекстном меню соответствующий пункт.</I></SMALL></P>
</BODY></HTML>
</COMMENT>
<!-- КОНЕЦ РАЗДЕЛА РЕСУРСОВ -->
<SCRIPT language='JavaScript'>
function getResource(resourceID) {
return document.getElementById("resource:"+resourceID).text;
}
</SCRIPT>
</HEAD>
<BODY bgColor='silver'>
<IFRAME name='Frame1' application='yes' width='100%' height='75%'></IFRAME>
<SCRIPT language='JavaScript'>
alert(getResource("Greeting"));
frames["Frame1"].document.write(getResource("Frame1.html"));
frames["Frame1"].document.close();
</SCRIPT>
</BODY></HTML>Для помещения внутрь ресурса текста, совпадающего с закрывающим тегом его элемента («</COMMENT» или «</SCRIPT»), необходимо использовать ухищрения. Например, помещать его как «<//COMMENT», а при извлечении из ресурса выполнять замену
… .replace(/(<\/*)\/(?=COMMENT\b)/ig, "$1")Для удаления форматирования содержимого ресурса можно воспользоваться заменой каждой последовательности пробельных знаков на один пробел:
… .replace(/\s+/g, " ")Для работы с ресурсами, кроме самого HTA-приложения, нам понадобится дополнительный текстовый файл resource.htc, который должен находиться рядом с нашим приложением:
<PUBLIC:COMPONENT TAGNAME="data" LITERALCONTENT="true" />Само HTA-приложение:
<html xmlns:resource>
<script>
function main ()
{
var element = document.getElementsByTagName('data')[0];
alert(element.innerHTML);
alert('Парсинг элемента отключен. Проверим его на наличие текстовых узлов. \nelement.innerText \t' + element.innerText+'\n Как мы видим, их нет.');
}
</script>
<?import namespace = "resource" implementation = "resource.htc" />
<body onload="main()">
<resource:data><b>text resource</b></resource:data>
</body>
</html>Несколько примечаний.
Можно хранить текстовые ресурсы просто в переменных JavaScript, но это менее удобно, т.к. придётся чаще использовать экранирование служебных символов, например, переводов строк.
Можно также хранить текстовые ресурсы просто с помощью разметки DHTML, например:
<html>
<script>
function main ()
{
var element = document.getElementById('oops');
alert(element.innerHTML);
alert(element.innerText);
}
</script>
<body onload="main()">
<span id="oops" style="display:none"><b>какой-то текст</b></span>
</body>
</html>Но данные, содержащиеся в таком теге, проходят парсинг. Это может быть плохо тем, что дерево документа будет содержать ненужные объекты, расходуя память (в данном случае — поле innerText).
Автор идеи — JSman.
]]>