В разделах, посвященных программированию графики, показано, что картинку можно менять без перезагрузки всей HTML-страницы. К большому сожалению, изменить часть текста страницы без использования позиционированных слоев нельзя.
Замечание: начиная с версий 4.0 Microsoft Explorer это стало возможным, но так как здесь речь идет о классическом JavaScript и его применении к различным объектным моделям только в одной интерпретации, данную возможность мы рассматривать не будем.
Кроме графики, на странице есть еще несколько встроенных массивов объектов, элементы которых можно изменять. Один из них — массив гипертекстовых ссылок.
Гипертекстовая ссылка относится к классу объектов URL. К этому классу объектов относятся:
Область применения URL на HTML-страницах гораздо шире этих трех позиций. Чаще всего мы сталкиваемся с ним при программировании:
- графики (атрибут SRC контейнера IMG);
- форм (атрибут ACTION контейнера FORM);
- ссылок (атрибут HREF контейнера A);
- "чувствительных" картинок (атрибут HREF контейнера AREA).
Первые две позиции подробно обсуждаются в разделах "Программируем картинки" и "Программируем формы". В данном разделе мы сосредоточимся на программировании собственно гипертекстовых переходов и "чувствительных" картинок. Но прежде рассмотрим объект URL.
Объект URL
Объект класса URL обладает свойствами, которые определены схемой URL. В качестве примера рассмотрим ссылку на применение атрибута SRC в контейнере IMG:
http://intuin.ru/help/index.html
Значения свойств
href: |
http://intuit.ru/help/index.html |
protocol: |
http: |
hostname: |
intuit.ru |
host: |
intuit.ru:80 |
port: |
80 |
pathname: |
help/index.html |
search: |
|
hash: |
|
Обращение к свойству объекта класса URL выглядит как:
имя_объект_класса_URL.свойство
Например, так:
document.links[0].href
document.location.host
document.links[2].hash
Свойства объекта URL дают программисту возможность менять только часть URL – объекта (гипертекстовой ссылки, например). Наиболее интересно это выглядит в объекте Location, когда при изменении свойства происходит перезагрузка документа. Однако и при работе с обычными гипертекстовыми ссылками такая технология более предпочтительна, чем изменение всего URL целиком.
Здесь следует заметить, что чаще всего все-таки меняют весь URL. Это связано с тем, что такое действие более понятно с точки зрения HTML-разметки. Ведь у контейнера A нет атрибута PROTOCOL, но зато есть атрибут HREF.
Массивы встроенных гипертекстовых ссылок
К встроенным гипертекстовым ссылкам относятся собственно ссылки (<A HREF=...>...</A>) и ссылки "чувствительных" графических картинок. Они составляют встроенный массив гипертекстовых ссылок документа (document.links[]).
К сожалению, обратиться по имени к гипертекстовой ссылке нельзя. Точнее такое обращение не рекомендуется в силу различий между браузерами. Поэтому обращаться к ним можно только как к массиву встроенных ссылок. В качестве примера распечатаем гипертекстовые ссылки некоторого документа:
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:window.alert('Area_Link_1');void(0);">
<AREA SHAPE=rect COORDS="0,0,0,0"
HREF="javascript:window.alert('Area_Link_2');void(0);">
</MAP>
И снова распечатаем массив ссылок:
links[0]:http://www.intuit.ru/help/index.html
links[1]:http://www.intuit.ru/help/terms.html
links[2]:http://www.intuit.ru/help/shop.html
links[3]:javascript:window.alert('Area_Link_1');void(0);
links[4]:javascript:window.alert('Area_Link_2');void(0);
Четыре новые ссылки — это ссылки из контейнера MAP, который не отображается, но ссылки из него попадают в массив встроенных ссылок. При этом, как в нашем случае, они могут попасть между обычными гипертекстовыми ссылками, если контейнер MAP расположить внутри текста документа. На данной странице он помещен перед контейнером SCRIPT, в котором мы распечатываем массив встроенных ссылок.
Замена атрибута HREF
В разделе "Программируем ссылки" мы перечислили свойства объекта класса Link. Теперь покажем, как при помощи JavaScript-кода можно ими управлять. Рассмотрим меню типа "записная книжка": (открыть)

Конечно, это не настоящая "записная книжка". Поле формы заполняется только при выборе гипертекстовой ссылки, расположенной над этим полем. Единственная цель данного примера — показать, как изменяется значение атрибута HREF (оно отображается в поле status окна браузера). Изменение производится посредством вызова функции:
function line(a)
{
if(a==0)
{
clear();
window.document.o0.src="fio.gif";
window.document.all['lo0'].href="javascript:window.document.f1.fi1.value="Фамилия И.О."; void(0);";
window.document.o1.src="rpho.gif";
window.document.all['lo1'].href="javascript:window.document.f1.fi1.value="253-93-10"; void(0);";
window.document.o2.src="hpho.gif";
window.document.all['lo2'].href="javascript:window.document.f1.fi3.value="253-93-12"; void(0);";
}
.....
}
В данном случае мы работаем с тремя элементами массива встроенных гипертекстовых ссылок: all['lo1'], all['lo1'] и all['lo2']. У каждого из них при вызове функции со значением аргумента a, равным 0, 1 и 2, соответственно, изменяем значение свойства href. Это свойство мы меняем целиком. URL можно менять и частично.
Изменение части URL
Гипертекстовая ссылка — это объект класса URL. У этого объекта можно изменять и другие свойства. Проиллюстрируем эту возможность при частичном изменении ссылки. Распечатаем сначала свойство, которое не зависит от протокола (в нашем случае от javascript) document.all.next.pathname: href:--> http://intuit.ru/help/index.html
pathname:--> help/index.html
Изменим теперь pathname:
document.all.next.pathname="test";
document.write(window.document.all.next.pathname);
href:--> http://intuit.ru:80/test
pathname--> test
Обратите внимание, что Internet Explorer самостоятельно добавил в ссылку номер порта. По этой причине использовать свойства, отличные от href, в ссылках, где используется схема javascript, не рекомендуется.
|