Использование 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, а в комментариях на странице хранить ключ расшифровки, тем самым привязывая его к определенной странице. Дальше мысль развивать не хочу, ибо лениво.

Просмотров: 5170 | Комментариев: 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 лет без присутствия взрослых.

Метки статей

Свернуть

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

Поблагодарили 34,352 раза

День дочери

День ДНК

Всемирный день пингвинов

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

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}$

Яндекс ИКС: 380

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

---

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

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

	2024 - АПРЕЛЬ
Пн	Вт	Ср	Чт	Пт	Сб	Вс
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

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

Комментарии

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