Российский государственный гуманитарный университет
Опубликован: 14.08.2003 | Доступ: свободный | Студентов: 22050 / 3897 | Оценка: 4.00 / 3.90 | Длительность: 10:03:00
Лекция 6:

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

< Лекция 5 || Лекция 6: 12 || Лекция 7 >
Аннотация: Рассматриваются вопросы работы с коллекцией гипертекстовых ссылок и программирования гипертекстовых переходов в зависимости от условий просмотра HTML-страниц и действий пользователя.

Для начала нам нужно разделить несколько понятий: применимость 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 - со знака " # ")

Свойства объекта 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[].

< Лекция 5 || Лекция 6: 12 || Лекция 7 >
Нураалы Батырбеков
Нураалы Батырбеков
Зураб Муциев
Зураб Муциев

Тьюторов нет на курсе JS или это отменили вообще на ИНТУИТ?

Игорь Орещенков
Игорь Орещенков
Беларусь, Белорусский государственный университет, 1999
Дмитрий Жмаев
Дмитрий Жмаев
Россия