Blog. Just Blog

Использование HTML-комментариев для хранения данных

Версия для печати Добавить в Избранное Отправить на E-Mail 16.10.2010 | Категория: Web-мастеру и не только | Автор: ManHunter
Как-то меня посетила мысль проверить, как определяются HTML-комментарии в DOM-структуре документа, и как можно получить доступ к их содержимому. Ведь по сути они являются полноправными составляющими документа. Напрямую, через ID, имя и другими подобными способами, естественно, сделать это не получится, т.к. тег комментария не имеет ничего подобного. Но сделать это все-таки удалось, привязавшись к соседнему тегу одного уровня с нужным комментарием. После этого элемент комментария со всеми потрохами можно получить через функцию JavaScript nextSibling или previousSibling, в зависимости от вашей ситуации. Это можно посмотреть, например, вот на таком фрагменте кода:
  1. <div>
  2. <!--first comment--><div id="main_div">Main DIV</div><!--second comment-->
  3. </div>
  4.  
  5. <script type="text/javascript">
  6. // Получить опорный элемент
  7. var el=document.getElementById('main_div');
  8. // Сообщение "first comment"
  9. alert(el.previousSibling.nodeValue);
  10. // Сообщение "second comment"
  11. alert(el.nextSibling.nodeValue);
  12. </script>
Можно, конечно, перебрать все дочерние элементы документа, начиная от корневого, но описанным выше способом удобнее выбрать именно нужный комментарий. Способ с перебором элементов тоже приведу:
  1. <div id="overall">
  2.   <a href="#">link</a>
  3.   <!--first comment-->
  4.   <div id="inner_div">
  5.      inner div
  6.      <!--second comment-->
  7.   </div>
  8.   plain text
  9. </div>
  10.  
  11. <script type="text/javascript">
  12. var el=document.getElementById('overall');
  13. for (var 0el.childNodes.lengthi++) {
  14.   if (el.childNodes[i]=='[object Comment]' ||
  15.       el.childNodes[i]=='[object HTMLCommentElement]') {
  16.     alert(el.childNodes[i].nodeValue);
  17.   }
  18. }
  19. </script>
Последовательно перебираются все дочерние элементы, если текущий объект имеет тип [object Comment] или [object HTMLCommentElement] (в случае Internet Explorer), то значит найден комментарий. Несмотря на некоторые неудобства, способ с обходом дерева DOM тоже можно использовать, когда привязка к строго определенным элементам не требуется, а надо просто получить содержимое комментариев.

Где это можно использовать? Например, в скрипте проверки правильности заполнения формы на стороне пользователя. Я видел подобные скрипты, но они были выполнены путем добавления невалидных атрибутов к элементам, или добавлением атрибутов типа rel="регулярка для проверки" к элементам, которые их не поддерживают. Этот же способ полностью валидный и соответствует всем стандартам HTML.
  1. <script type="text/javascript">
  2. function chk_input() {
  3.     // По умолчанию форма правильная
  4.     var valid=true;
  5.     // Получить форму для проверки
  6.     var form=document.getElementById('myform');
  7.     for (var i=0i<form.elements.lengthi++) {
  8.         var elem form.elements[i];
  9.         // Если после элемента формы есть комментарий
  10.         if (elem.nextSibling=='[object Comment]' ||
  11.             elem.nextSibling=='[object HTMLCommentElement]') {
  12.             // Получить шаблон регулярного выражения проверки
  13.             // и проверить соответствие введенного текста шаблону
  14.             valid=valid && RegExp(elem.nextSibling.nodeValue).test(elem.value);
  15.         }
  16.     }
  17.     alert(valid 'Форма заполнена правильно' 'Форма заполнена с ошибками');
  18. }
  19. </script>
  20.  
  21. <form id="myform" onsubmit="chk_input(); return false;">
  22.     <input type="text"><!--^[0-9]{3,}$--> Введите не менее 3-х цифр
  23.     <br>
  24.     <input type="checkbox"> - галочку можно и не ставить
  25.     <br>
  26.     <input type="text"Любые символы или пусто
  27.     <br>
  28.     <input type="text"><!--^[a-zA-Z]+$--> Введите латинские буквы
  29.     <br>
  30.     <input type="button" value="Проверить" onclick="chk_input();">
  31. </form>
Обратите внимание, что между проверяемым элементом и комментарием не должно быть никаких пробелов, а в самом комментарии текст находится вплотную к ограничителям! Также нельзя будет оптимизировать документ различными программами, которые в целях экономии места удаляют лишние на их взгляд HTML-комментарии. Но это уже мелочи, тут главное понять сам принцип применения способа. Готовый рабочий пример можете посмотреть на сайте.

Другое применение - сокрытие реальных адресов email от спамерских программ, автоматически собирающих адреса электронной почты со страниц сайтов.
  1. <div>Email:
  2. <!--username--><a href="#" onclick="this.href=
  3. this.nextSibling.nextSibling.nodeValue+':'+
  4. this.previousSibling.nodeValue+'@'+
  5. this.nextSibling.nodeValue;">hidden</a><!--domain.com--><!--mailto-->
  6. </div>
Сама ссылка при этом остается активной, и при клике на нее открывается почтовая программа с нужным почтовым адресом, в данном примере username@domain.com

И напоследок, как обычно, извращение. Готового кода нет, пока только теоретическая выкладка. Можно, например, зашифровать скрипт JavaScript, а в комментариях на странице хранить ключ расшифровки, тем самым привязывая его к определенной странице. Дальше мысль развивать не хочу, ибо лениво.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на Я.ру Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Поделиться ссылкой на Friendfeed Добавить в Яндекс.Закладки Добавить в закладки Memori Добавить в закладки Google
Просмотров: 2861 | Комментариев: 17

Метки: JavaScript, HTML
Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
Александр (16.03.2011 в 19:24):
Очень полезный код! спасибо!
ManHunter (03.11.2010 в 23:49):
Все правильно. Я на сайте даже предусмотрел специальное сообщение для пользователей IE6.
Infocatcher (03.11.2010 в 23:44):
А ведь если в IE6 перестанут нормально работать сайты, то его пользователей сразу же должно поубавиться, по идее. :)
ManHunter (28.10.2010 в 16:33):
Пора уже отказываться от поддержки IE6
Infocatcher (18.10.2010 в 02:53):
По идее, надежнее проверять через
node.nodeName == "#comment"
или
node.nodeType == 8 // Node.COMMENT_NODE, только вот в IE нету полезных "констант"

А то IE6 вообще "[object]" выдает.
64-ядерный процессор (17.10.2010 в 22:51):
ManHunter, всегда пожалуйста =))
ManHunter (17.10.2010 в 12:39):
64-ядерный процессор, это потому что в IE комментарии имеют название [object HTMLCommentElement]. Добавил условие в проверку, сейчас работает и в IE. Спасибо.
64-ядерный процессор (16.10.2010 в 22:40):
ManHunter, проверь на IE 8: ввожу в первое поле пару букв и ни одной цыфры, в третье поле ввожу русские буквы. Пишет, что "Форма заполнена правильно".
ManHunter (16.10.2010 в 19:54):
После этого получил сообщение "Форма заполнена ПРАВИЛЬНО" и пишешь в камменты что не работает.
Роман (16.10.2010 в 19:13):
А что не так-то?
Все обязательные поля я заполнил:
1. Ввел цифры
2. Ввел латинские буквы
ManHunter (15.10.2010 в 19:36):
Роман, лучше не пиши такие комментарии, не смеши людей.
Роман (15.10.2010 в 19:31):
Плоховато работает ваш метод...
http://clip2net.com/s/zvL9
64-ядерный процессор (15.10.2010 в 17:07):
ManHunter, особенно 2 хорош))))
ManHunter (15.10.2010 в 16:18):
чо там придумывать? appendChild(), removeChild(), replaceChild(), innerHTML
64-ядерный процессор (15.10.2010 в 16:15):
ManHunter, ты лучше придумай, как на JS добавить на страницу див, а потом удалить его, не оставив при этом на странице никаких следов от него. А способов решения твоей задачи есть масса. И каждый способ можно выбрать в зависимости от конкретной задачи =))
ManHunter (15.10.2010 в 11:24):
Угу, предположим у тебя есть одна, а лучше несколько форм из 50 полей, которые меняются пару раз в месяц, движок, работающий на многоязычных html/tpl-шаблонах и внешний скрипт проверки корректности заполнения полей. Я посмотрю, как ты это все в переменные будешь заталкивать.
64-ядерный процессор (15.10.2010 в 11:14):
Забавно посмотреть, как на это отреагируют старые версии браузеров))) Мне кажется, ято для хранения информации можно создать просто переменную в JS. Например:
var temp;
temp = "ляляля";
ну или что-то в этом роде...

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п. будут удаляться. Злостным нарушителям доступ к сайту может быть заблокирован.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2014
При использовании материалов ссылка на сайт обязательна
Время генерации: 0,12 сек. / MySQL: 2 (0,001 сек.) / Память: 6 Mb
Наверх