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

Замена атрибута HREF

Выше мы перечислили свойства объекта класса URL. Теперь покажем, как при помощи JavaScript-кода можно этими свойствами управлять.

Пример 6.1 (кликните, чтобы открыть его в новом окне; посмотреть исходный HTML-код можно, нажав правой кнопкой мыши и выбрав соответствующий пункт).

Рассмотрим меню типа "записная книжка". Конечно, это не настоящая записная книжка. Поле формы заполняется только при выборе гипертекстовой ссылки, расположенной над этим полем. Единственная цель данного примера - показать, как изменяется значение атрибута HREF (оно отображается в поле status окна браузера при наведении указателя мыши на ссылку). В этом примере изменение свойства href у ссылок производится точно так же, как изменение свойства src у картинок и свойства value у полей ввода в форме:

document.links[i+3].href = ...
 document.images[i+3].src = ...
 document.f.elements[i].value = ...

На нашей странице имеется 6 ссылок, 6 картинок и 3 поля ввода. Первые три ссылки и картинки (с номерами 0,1,2) всегда неизменны. Последние же три ссылки и картинки (т.е. с номерами 3,4,5) мы меняем вышеприведенными операторами (поэтому в них индекс i+3, где i=0,1,2 ). Как вы видите, мы меняем значение href целиком. Однако URL можно менять и частично.

Изменение части URL

Гипертекстовая ссылка - это объект класса URL, у которого помимо свойства href есть и другие, соответствующие частям URL, и их тоже можно менять. Проиллюстрируем эту возможность. Допустим, у нас имеется ссылка:

<A HREF="http://www.intuit.ru/department/internet/js/">Курс по JavaScript</A>

Проверьте, что значение свойства document.links[0].pathname сейчас равно " department/internet/js/ ". Применим оператор:

document.links[0].pathname="news/"

Теперь эта ссылка указывает на адрес http://www.intuit.ru/news/.

События MouseOver и MouseOut

Эти два события позволяют совершать действия при наведении или уводе курсора мыши на объекты, например, обесцвечивать и проявлять картинки, менять содержимое поля status и т.п. Применительно к гипертекстовым ссылкам, первое событие генерируется браузером, если курсор мыши находится над ссылкой, а второе - когда он покидает ссылку.

Пример 6.2. Рассмотрим пример с записной книжкой, но теперь для появления подменю будем использовать обработчик события onMouseOver. Для этого достаточно заменить строчки вида:

<A HREF="javascript:ShowMenu(0);void(0);">...</A>

открывавшие подменю, когда пользователь кликал по ссылке, на строчки вида:

<td><a href="javascript:void(0);" onMouseOver="ShowMenu(0);">...</A>

открывающие подменю при наведении указателя мыши на пункт меню верхнего уровня. Выражения " javascript:void(0); " мы оставили в атрибуте HREF, чтобы ничего не происходило, если пользователь случайно кликнет по пункту меню верхнего уровня.

Пример 6.3. В предыдущем примере нам не требовалось совершать какие-то действия при уводе указателя мыши с пункта меню. Теперь рассмотрим пример, когда это требуется, и для этого мы будем использовать обработчик события onMouseOut. При наведении указателя мыши на ссылку мы будем подменять картинку, а при уводе указателя мыши с картинки - восстанавливать ее. В исходном HTML-документе это будет выглядеть следующим образом:

<A HREF="javascript:void(0);"
 onMouseOver="document.pic1.src='pic1.gif';"
 onMouseOut="document.pic1.src='pic1_.gif';">
 <IMG NAME=pic1 src=pic1_.gif BORDER=0></A>

Как уже рассказывалось в "Программируем свойства окна браузера" , при возникновении события MouseOver у гиперссылки браузер показывает URL этой ссылки в поле статуса, а при возникновении события MouseOut восстанавливает в поле статуса прежнюю надпись. Перехватить первое событие (например, отменить вывод URL в строке статуса) можно, указав в его обработчике return true. Перехватить второе событие невозможно.

Примечание. В настоящее время обработчики событий onMouseOver и onMouseOut работают уже не только с гипертекстовыми ссылками, но и с изображениями, полями ввода, таблицами, их строками и ячейками, кнопками и другими HTML-элементами.

URL-схема "JavaScript:"

Для программирования гипертекстовых переходов в спецификацию URL разработчики JavaScript ввели, по аналогии с URL-схемами http, ftp и т.п., отдельную URL-схему javascript. Она уже упоминалась во вводной лекции при обсуждении вопроса о том, куда можно поместить JavaScript-программу в HTML-документе. Здесь мы рассмотрим ее подробнее.

Схема URL javascript: используется следующим образом:

<A HREF="JavaScript:код_программы">...</A>
<FORM ACTION="JavaScript:код_программы" ...> ... </FORM>

Рассмотрим пример гипертекстовой ссылки, в URL которой использована схема javascript:

<A HREF="javascript:alert('Спасибо!');">Кликните</A>

Как видим, если кликнуть по ссылке, то вместо перехода по какому-либо адресу просто появляется окно предупреждения.

В общем случае, после " javascript:" может стоять произвольная программа JavaScript. Что в этом случае будет происходить, если кликнуть такую ссылку? Ответ следующий: сначала JavaScript-программа будет исполнена, в результате чего будет вычислено ее значение (которым всегда считается значение последнего оператора в программе). Затем, если это значение неопределено ( undefined ), то далее ничего не произойдет; если же полученное значение определено, то на экран будет выведена HTML-страница с этим результатом (преобразованным в строку и воспринятым как HTML-документ, который в том числе может содержать и HTML-тэги).

В примере выше метод alert() не возвращает никакого значения, поэтому после появления окна предупреждения более ничего не происходит. Рассмотрим другие примеры. Кликнув по ссылке

<A HREF="javascript: 2+8; 5+7;">ссылка</A>

мы получим страницу, на которой написан результат последнего выражения 12 (первое выражение 2+8, конечно, тоже будет вычислено, но его результат никуда не пойдет). Если же кликнуть по такой ссылке:

<A HREF="javascript: '<HTML><BODY><H1>Ready!<H1></BODY></HTML>';">Кликните</A>

то в окне браузера откроется страница, исходный HTML-код которой есть <HTML><BODY><H1>Ready!<H1></BODY></HTML>. Если нужно, чтобы при клике по ссылке просто выполнились какие-то действия и более ничего не происходило (в частности, не происходил переход к какой-либо другой странице), то в конце программы можно поместить оператор void(0) либо void(выражение). Эта функция вычисляет переданное в нее выражение и не возвращает никакого значения. Пример:

<A HREF="javascript: document.bgColor='green'; void(0);">Кликните</A>

Если кликнуть по такой ссылке, то изменится цвет фона, и больше ничего не произойдет. Без void(0) нам бы открылась web-страница со словом green.

Все сказанное справедливо и для использования URL-схемы " javascript:" в атрибуте ACTION контейнера <FORM>, за одним нюансом: в этом случае необходимо, чтобы в качестве метода доступа был указан METHOD="POST". Дело в том, что при использовании метода GET при отправке данных формы (т.е. при возникновении события Submit ) к адресу URL, указанному в атрибуте ACTION, добавляется строка " ?имя=значение&имя=значение&...", составленная из имен и значений элементов формы. Конечно же, такое выражение не является корректной JavaScript-программой, и браузеры могут выдавать сообщения об ошибке (а могут и не выдавать, а просто не выполнять программу). Пример:

<FORM NAME=f METHOD=post
ACTION="javascript:alert('Длина строки = '+document.f.e.value.length);">
<INPUT NAME=e>
<INPUT TYPE=submit VALUE="Длина">
</FORM>

Если ввести любую строку в поле ввода и нажать кнопку, то будет выведена длина строки. Этот пример был создан лишь для демонстрации URL-схемы " javascript:"; он весьма искусственный, т.к. в данном случае более уместно было бы использовать обработчик события onClick или onSubmit. Об этом и других применениях JavaScript в обработке форм рассказывается в лекции, посвященной программированию форм.

Обработка события Click

У гипертекстовой ссылки помимо URL, указанного в атрибуте HREF, можно указать действия, которые браузер должен выполнить, когда пользователь кликнет по данной ссылке, перед тем, как перейти по указанному URL. Соответствующая программа JavaScript называется обработчиком события Click и помещается в атрибут onClick контейнера <A>. Если обработчик события возвращает значение false (это можно реализовать путем помещения в конец обработчика команды return false ), то переход по адресу URL, указанному в атрибуте HREF, не будет совершен. Когда обработчик возвращает true или не возвращает ничего, после выполнения обработчика события будет совершен переход по адресу URL. Например:

<A onClick="return confirm('Хотите посетить сайт INTUIT?')"
  HREF="http://www.intuit.ru/">Перейти на сайт INTUIT</A>

В этом примере confirm() возвращает либо true, либо false, в зависимости от того, на какую кнопку нажмет пользователь в предложенном запросе. Соответственно, переход на указанный адрес либо произойдет, либо нет. Если бы мы в этом примере опустили слово return, то обработчик события ничего бы не возвращал (независимо от действий пользователя на запрос confirm ) и переход на указанный URL совершался бы в любом случае.

Если в атрибуте ссылки (например, HREF, onClick и т.п.) пишется JavaScript-код, в котором надо сослаться на свойство или метод этой ссылки, то, как и в случае форм, можно пользоваться сокращенной записью - не указывать объект данной ссылки, либо (для большей ясности кода) вместо него писать this. Например, пусть у нас имеется 5-я ссылка в документе, и мы хотим в ее обработчике onMouseOver сослаться на свойство href данной ссылки, или вызвать метод click() данной ссылки. Тогда в этом контексте вместо document.links[4].href можно писать this.href или просто href, а вместо document.links[4].click() писать this.click() или просто click(). Это не только укорачивает код, но и избавляет нас от необходимости привязываться к конкретному номеру данной ссылки, который в любой момент может измениться.

И последнее замечание. Часто для того, чтобы скрипт запускался, когда посетитель кликает ссылку, программисты пишут что-то такое:

<A HREF="#" onClick="программа JavaScript">...</A>
<A HREF="javascript:void(0)" onClick="программа JavaScript">...</A>
<A HREF="javascript: программа JavaScript">...</A>

При этом код выполняется и, на первый взгляд, все нормально. Но на второй взгляд становится видно, что после клика на ссылку могут прекратить грузиться недогруженные элементы страницы (большие картинки и т.п.), останавливаются анимированные GIF'ы и, быть может, происходит что-то еще из этой серии. Все дело тут в том, что браузер считает клик пользователя по ссылке переходом на другую страницу, поэтому полагает, что заботиться о текущей странице больше не надо, ведь она с секунды на секунду заменится новой. Решение здесь такое: если вы рассчитываете при клике пользователя по ссылке оставить его на текущей странице, то не забудьте прописать выход return false из обработчика события onClick, например:

<a href="#" onClick="программа JavaScript; return false;">

В этом случае, после вызова программы JavaScript, выполнение клика по ссылке прекратится, поэтому браузер не будет считать, что произошел переход на другую страницу.