Принтабельные ссылки

Сегодня напишем на модном javascript’e приблуду, добавляющую в версии для печати ко всем ссылкам в тексте их href’ы.

Наверно все уже успели заметить эту фичу на mysitez (всё-таки пару месяцев уже работает). Кто не успел, пройдитесь по версиям для печати статей, где есть внешние ссылки, например вот тут: Работа с изображениями в PHP (часть вторая) или посмотрите версию для печати этой самой страницы.

Смысл фичи в том, что она дописывает ко всем найденным на странице ссылкам их адрес и также (если имеется) — содержимое title. Как мне кажеться, в версии для печати это имеет большой смысл, поскольку в обычном случае все текстовые ссылки оказываются недоступными тому, у кого есть только распечатанная версия страницы (да, конечно, можно отмазаться, что типа ссылки нужны только тому, у кого есть интернет, а если он есть, то всегда можно зайти на онлайновую версию и там спокойно тыкать в ссылки, но надо же мне было как-то оправдать применение фичи :)).

Так как же работает наш скрипт? Тут нужно сделать небольшое лирическое отступление.

Пара слов про DOM

HTML-документ для javascript’а является большим деревом. А программисты очень любят деревья. Дерево для программиста — это хорошо. Но деревья бывают разные, а это уже для программиста плохо.

Ну, а теперь взглянем на скрипт:

function changeLinks()
{
   var as,i,islink,tit;
   as=document.getElementsByTagName('a');
   for(i=0;i<as.length;i++)
   {
      islink=as[i].href;
      tit=(as[i].title!="") ? as[i].title+', ' : "";
      as[i].innerHTML=as[i].innerHTML+' ['+ tit+islink+']';
   }
}

if(document.getElementById && document.createTextNode)
{
   window.onload=changeLinks;
}

Вся суть здесь в функции changeLinks(). Для начала переменной as присваивается коллекция елементов — ссылок. Делается это при помощи метода getElementsByTagName(), который есть у любого узла дерева (в даном случае это корневой узел document).

Кстати: очень удобный инструмент для просмотра всех свойств и методов для узлов дерева документа — DOM Inspector — предоставляет браузер Firefox.

После этого идет перебор в цикле каждой ссылки и в свойство .innerHTML (текстово-HTML’ное содержание елемента) дописываются значения свойств title и href.

Вообщем-то и всё, после этого остаётся только присвоить обработчику событий window.onload нашу функцию (попутно проверив, сможет ли текущий браузер её вообще выполнить).

Послесловие

Я думаю, несмотря на простоту данного примера, вы уловили огромный потенциал по добавлению интерактивности и удобности при работе с DOM. Мы ещё вернемся к этому разговору. Спасибо за внимание.

Развитие темы

А на «A List Apart»-е опубликована статья, где ещё правильнее всё. Вместо добавления урла сразу после ссылки в текст, все они выносятся в отдельный список внизу при помощи сносок. Очень интерестно и главное просто.

Читаем: Improving Link Display for Print

04.09.2005