6. Лекция: Программируем гипертекстовые переходы

Для начала нам нужно разделить несколько понятий: применимость 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, рассматривавшийся в лекции 4. Конечно, помимо общих свойств, перечисленных ниже, эти объекты могут иметь свои специфичные только для них свойства, методы и события. Например, у объекта window.location есть метод reload(), тогда как у ссылок его нет, но у них есть обработчик события onClick. Мы начнем с рассмотрения объектов класса URL.

Объекты URL

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

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

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

Свойства объекта URL
Свойство	Значение
href	http://www.site.ru:80/dir/page.cgi?product=phone&id=3#mark
protocol	http:
hostname	www.site.ru
port	80
host	www.site.ru:80
pathname	dir/page.cgi
search	?product=phone&id=3
hash	#mark

Как Вы помните из прошлых лекций, к свойствам можно обращаться, используя точечную нотацию ( 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[].