Программируем гипертекстовые переходы

Для начала нам нужно разделить несколько понятий: применимость URL в атрибутах HTML-контейнеров; коллекция гипертекстовых ссылок; объекты класса URL.

Адреса URL могут использоваться в атрибутах многих HTML-контейнеров, например:

• ссылки (URL в атрибуте HREF контейнера <A> );
• активные области (URL в атрибуте HREF контейнера <AREA> );
• картинки (URL в атрибуте SRC контейнера <IMG> );
• формы (URL в атрибуте ACTION контейнера <FORM> );
• внешние скрипты (URL в атрибуте SRC контейнера <SCRIPT> );
• связанные документы (URL в атрибуте HREF контейнера <LINK> ).

Гипертекстовая ссылка в HTML-документе - это область HTML-страницы, по которой можно "кликнуть" (или выбрать ее иным способом), чтобы перейти к просмотру другого HTML-документа. Из всех перечисленных выше вариантов применения URL гипертекстовыми ссылками являются лишь первые два. В объектной модели документа (DOM) они собраны в единую коллекцию гипертекстовых ссылок document.links[]. Нумерация в ней начинается с нуля (как обычно), в порядке появления ссылок в документе.

Обратите внимание, что в принципе могут существовать ссылки, по которым невозможно "кликнуть", т.к. они занимают нулевую площадь web-страницы; например, контейнер <A> с пустым содержимым, т.е. <A HREF="http://ya.ru/"></A>, или контейнер <AREA>, ограничивающий фигуру нулевой площади. Тем не менее все они считаются гипертекстовыми ссылками и содержатся в коллекции document.links[]. С другой стороны, в коллекцию document.links[] не попадают якоря, то есть контейнеры <A>, не имеющие атрибута HREF (якоря нужны, чтобы задать место, на которое можно сослаться из другой гиперссылки). Все контейнеры <A> (как якоря, так и гиперссылки) собраны в коллекции document.anchors[] ; в этой лекции, однако, она нас не будет интересовать.

В объектной модели документа DOM объекты класса URL имеют такие свойства, как href, protocol, hostname и т.д. (полный перечень см. ниже). В класс URL входят объекты коллекции document.links[], а также объект window.location, рассматривавшийся в "Программируем свойства окна браузера" . Конечно, помимо общих свойств, перечисленных ниже, эти объекты могут иметь свои специфичные только для них свойства, методы и события. Например, у объекта window.location есть метод reload(), тогда как у ссылок его нет, но у них есть обработчик события onClick. Мы начнем с рассмотрения объекта класса URL.

Объекты URL

Объект класса URL обладает свойствами, которые определены схемой URL. В качестве примера рассмотрим ссылку:

http://www.site.ru:80/dir/page.cgi?product=phone&id=3#mark

Тогда ее свойства примут следующие значения (обратите внимание, что значение поля search начинается со знака " ?", а значение hash - со знака " # ")

Как Вы помните из прошлых лекций, к свойствам можно обращаться, используя точечную нотацию ( document.links[0].host ) или скобочную нотацию ( document.links[0]["host"] ). Свойства объекта класса URL дают программисту возможность менять только часть URL-адреса. Наиболее интересно это выглядит в объекте window.location, когда при изменении его свойства href происходит загрузка нового документа.

Свойство href является свойством по умолчанию. Это значит, что вместо window.location.href="..." можно писать window.location="...", а опуская window (который является объектом по умолчанию), можно писать location.href="..." и даже location="..." - эффект будет тот же: загрузится страница с новым адресом. С этим, однако, стоит быть осторожнее, чтобы данный оператор присваивания не находился в контексте, где объектом по умолчанию может быть какой-либо другой объект, например, внутри оператора with.

Обратите внимание, что свойства объекта URL взаимозависимы, точнее, свойство href зависит от остальных свойств, а остальные свойства зависят от href. Так, если присвоить новый URL свойству href объекта, то автоматически изменятся и все остальные свойства, разобрав данный URL на составные части. И наоборот, если, например, изменить значение свойства protocol с http: на ftp:, то изменится и значение свойства href.

Коллекция ссылок links[]

К встроенным гипертекстовым ссылкам относятся собственно ссылки ( <A HREF=...>...</A> ) и ссылки "чувствительных" графических картинок. Все вместе они составляют коллекцию (встроенный массив) гипертекстовых ссылок документа document.links[].

К сожалению, обратиться по имени к гипертекстовой ссылке (т.е. как document.имя_ссылки ) нельзя, даже несмотря на то, что у ссылки может быть задан атрибут NAME. Говоря точнее, такое обращение не рекомендуется в силу различий между браузерами. Поэтому обращаться к ним можно только через коллекцию ссылок по индексу: document.links[3] - это 4-я ссылка в документе. Стандарт также предусматривает обращение к ссылкам через коллекцию по имени: document.links["имя_ссылки"], однако это работает не во всех браузерах (в Mozilla Firefox работает, в IE7 нет). Поэтому в дальнейшем, в целях совместимости, мы будем обращаться к ссылкам через коллекцию по их индексу.

В качестве примера распечатаем гипертекстовые ссылки некоторого документа:

for(i=0;i<document.links.length;i++)
document.write(document.links[i].href+"<BR>");

В результате можем получить список, например, такой:

http://www.intuit.ru/help/index.html
http://www.intuit.ru/help/terms.html
http://www.intuit.ru/help/shop.html

Вставим в документ контейнер MAP с двумя ссылками, привязанными к областям (даже) нулевого размера:

<MAP NAME=test>
 <AREA SHAPE=rect COORDS="0,0,0,0" HREF="javascript:alert('Область 1')">
 <AREA SHAPE=rect COORDS="0,0,0,0" HREF="javascript:alert('Область 2')">
</MAP>

И снова распечатаем массив ссылок - получим уже:

http://www.intuit.ru/help/index.html
http://www.intuit.ru/help/terms.html
http://www.intuit.ru/help/shop.html
javascript:alert('Область 1');
javascript:alert('Область 2');

Две новые ссылки - это ссылки из контейнера MAP, который не отображается, но ссылки из него попадают в коллекцию ссылок links[]. При этом они могут попасть между обычными гипертекстовыми ссылками, если контейнер MAP расположить внутри текста документа. Итак, ссылки, создаваемые контейнерами <A HREF="..."> и <AREA HREF="...">, равноправно присутствуют в коллекции document.links[].