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

16.10.2010 | Категория: Web-мастеру и не только | Автор: ManHunter

Как-то меня посетила мысль проверить, как определяются HTML-комментарии в DOM-структуре документа, и как можно получить доступ к их содержимому. Ведь по сути они являются полноправными составляющими документа. Напрямую, через ID, имя и другими подобными способами, естественно, сделать это не получится, т.к. тег комментария не имеет ничего подобного. Но сделать это все-таки удалось, привязавшись к соседнему тегу одного уровня с нужным комментарием. После этого элемент комментария со всеми потрохами можно получить через функцию JavaScript nextSibling или previousSibling, в зависимости от вашей ситуации. Это можно посмотреть, например, вот на таком фрагменте кода:

Code (HTML) : Убрать нумерацию

<div>
<div id="main_div">Main DIV</div>
</div>
<script type="text/javascript">
// Получить опорный элемент
var el=document.getElementById('main_div');
// Сообщение "first comment"
alert(el.previousSibling.nodeValue);
// Сообщение "second comment"
alert(el.nextSibling.nodeValue);
</script>

Можно, конечно, перебрать все дочерние элементы документа, начиная от корневого, но описанным выше способом удобнее выбрать именно нужный комментарий. Способ с перебором элементов тоже приведу:

Code (HTML) : Убрать нумерацию

<div id="overall">
<a href="#">link</a>
<div id="inner_div">
inner div
</div>
plain text
</div>
<script type="text/javascript">
var el=document.getElementById('overall');
for (var i = 0; i < el.childNodes.length; i++) {
if (el.childNodes[i]=='[object Comment]' ||
el.childNodes[i]=='[object HTMLCommentElement]') {
alert(el.childNodes[i].nodeValue);
}
}
</script>

Последовательно перебираются все дочерние элементы, если текущий объект имеет тип [object Comment] или [object HTMLCommentElement] (в случае Internet Explorer), то значит найден комментарий. Несмотря на некоторые неудобства, способ с обходом дерева DOM тоже можно использовать, когда привязка к строго определенным элементам не требуется, а надо просто получить содержимое комментариев.

Где это можно использовать? Например, в скрипте проверки правильности заполнения формы на стороне пользователя. Я видел подобные скрипты, но они были выполнены путем добавления невалидных атрибутов к элементам, или добавлением атрибутов типа rel="регулярка для проверки" к элементам, которые их не поддерживают. Этот же способ полностью валидный и соответствует всем стандартам HTML.

Code (HTML) : Убрать нумерацию

<script type="text/javascript">
function chk_input() {
// По умолчанию форма правильная
var valid=true;
// Получить форму для проверки
var form=document.getElementById('myform');
for (var i=0; i<form.elements.length; i++) {
var elem = form.elements[i];
// Если после элемента формы есть комментарий
if (elem.nextSibling=='[object Comment]' ||
elem.nextSibling=='[object HTMLCommentElement]') {
// Получить шаблон регулярного выражения проверки
// и проверить соответствие введенного текста шаблону
valid=valid && RegExp(elem.nextSibling.nodeValue).test(elem.value);
}
}
alert(valid ? 'Форма заполнена правильно' : 'Форма заполнена с ошибками');
}
</script>
<form id="myform" onsubmit="chk_input(); return false;">
<input type="text"> Введите не менее 3-х цифр
<br>
<input type="checkbox"> - галочку можно и не ставить
<br>
<input type="text"> Любые символы или пусто
<br>
<input type="text"> Введите латинские буквы
<br>
<input type="button" value="Проверить" onclick="chk_input();">
</form>

Обратите внимание, что между проверяемым элементом и комментарием не должно быть никаких пробелов, а в самом комментарии текст находится вплотную к ограничителям! Также нельзя будет оптимизировать документ различными программами, которые в целях экономии места удаляют лишние на их взгляд HTML-комментарии. Но это уже мелочи, тут главное понять сам принцип применения способа. Готовый рабочий пример можете посмотреть на сайте.

Другое применение - сокрытие реальных адресов email от спамерских программ, автоматически собирающих адреса электронной почты со страниц сайтов.

Code (HTML) : Убрать нумерацию

<div>Email:
<a href="#" onclick="this.href=
this.nextSibling.nextSibling.nodeValue+':'+
this.previousSibling.nodeValue+'@'+
this.nextSibling.nodeValue;">hidden</a>
</div>

Сама ссылка при этом остается активной, и при клике на нее открывается почтовая программа с нужным почтовым адресом, в данном примере username@domain.com

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

Просмотров: 5346 | Комментариев: 17

Метки: JavaScript, HTML

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

ManHunter, ты лучше придумай, как на JS добавить на страницу див, а потом удалить его, не оставив при этом на странице никаких следов от него. А способов решения твоей задачи есть масса. И каждый способ можно выбрать в зависимости от конкретной задачи =))

ManHunter (15.10.2010 в 11:24):

Угу, предположим у тебя есть одна, а лучше несколько форм из 50 полей, которые меняются пару раз в месяц, движок, работающий на многоязычных html/tpl-шаблонах и внешний скрипт проверки корректности заполнения полей. Я посмотрю, как ты это все в переменные будешь заталкивать.

64-ядерный процессор (15.10.2010 в 11:14):

Забавно посмотреть, как на это отреагируют старые версии браузеров))) Мне кажется, ято для хранения информации можно создать просто переменную в JS. Например:
var temp;
temp = "ляляля";
ну или что-то в этом роде...

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

Заполните форму для добавления комментария

Если программист в девять утра уже на работе, значит он там же и ночевал

Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина

Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал

Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.

Метки статей

Свернуть

Вам помог этот сайт?

Поблагодарили 36,306 раз

День штурманской службы ВВС России

Международный день борьбы с депрессией

Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите

Ctrl

Enter

Буду очень благодарен, если размеcтите мою кнопочку:

<a href="https://www.manhunter.ru" target="_blank"><img src="https://www.manhunter.ru/images/button.gif" alt="Личный блог ManHunter'а" title="Личный блог ManHunter'а" width="88" height="31" /></a>

$Яндекс тИЦ: {YANDEX_TIC}$

Яндекс ИКС: 360

Сейчас я слушаю

---

- автообновление

Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2025
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.0045 сек.) / Память: 4.5 Mb

	2025 - МАРТ
Пн	Вт	Ср	Чт	Пт	Сб	Вс
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

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

Комментарии

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