Шаг 39.
Основы JavaScript.
Объект history

    На этом шаге мы рассмотрим свойства и методы объекта history.

    Объект history содержит информацию об адресах, которые браузер посетил во время текущего сеанса. Мы можем передвигаться по этому списку с помощью сценария, загружая страницы, ссылки на которые он содержит. Объект history имеет только одно свойство и три метода.

Таблица 1.Основные свойства и методы объекта history
Название Описание
Свойство
length Число документов в массиве.
Методы
back(); Переход на предыдущий документ.
forward(); Переход на последующий документ.
go (<номер>); Переход на указанное количество документов. Если номер значение положителен, то переход вперед, если отрицателен - то назад.

    Приведем пример использования перечисленных методов.

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

    Тексты HTML-документов, реализующих данную задачу, приведены ниже.

    Текст главного HTML-документа, содержащего описание структуры фреймов: 

<HTML>
<HEAD>
<TITLE>Пример использования объекта history </TITLE>
<FRAMESET ROWS=30%,*>
<FRAME Name=Fr1 SRC=pr1.html>
<FRAME Name=Fr2>
</FRAMESET>
</HTML>

    Текст HTML-документа pr1.html, находящегося в верхнем фрейме: 

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
kol = 0;   //Количество загруженных документов.
nomer = 0; //Номер текущего документа.
//Функция активации/деактивации кнопок.
function Proverka (m)
{
 if (m <= kol && m>1)  
   //Делаем доступной кнопку НАЗАД.
   top.Fr1.document.Form1.Button3.disabled=false;
 else
   //Делаем недоступной кнопку НАЗАД.
   top.Fr1.document.Form1.Button3.disabled=true;
 if (m < kol && kol > 1)  
  //Делаем доступной кнопку ВПЕРЕД.
  top.Fr1.document.Form1.Button2.disabled=false;
 else
  //Делаем недоступной кнопку ВПЕРЕД.
  top.Fr1.document.Form1.Button2.disabled=true;
}
//Процедура, выполняющаяся после загрузки документа.
function window.onload()
{
  //Делаем сначала кнопки недоступными.
  top.Fr1.document.Form1.Button2.disabled=true;
  top.Fr1.document.Form1.Button3.disabled=true;
}
//Загрузка документа.
function zagr_doc()
{
  X=prompt("Задайте URL-адрес", "E:/Site/index.html");
  if (X!="") 
  {
   top.Fr2.location.href = X;
   //Количество загруженных документов 
   //увеличим на 1.
   kol++;
   alert ("Загружен документ №"+kol);
   nomer = kol; //Номер текущего документа.
   //Проверка на активацию/деактивацию кнопок.
   Proverka(nomer);
  } 
}  
function vpered() //Нажата кнопка ВПЕРЕД.
{
  top.Fr2.history.forward();
  nomer++;
  alert ("Загружен документ №"+nomer);
  //Проверка на активацию/деактивацию кнопок.
  Proverka(nomer);
}
function nazad() //Нажата кнопка НАЗАД.
{
  top.Fr2.history.back();
  nomer--;
  alert ("Загружен документ №"+nomer);
  //Проверка на активацию/деактивацию кнопок.
  Proverka (nomer);
}
//-->  
</SCRIPT></HEAD>
<BODY>
<H2 ALIGN=CENTER>Свойства объекта navigator</H2>
<FORM NAME="Form1">
<INPUT TYPE="BUTTON" NAME="Button1" VALUE="Загрузка документа" 
    ONCLICK="zagr_doc();">
<INPUT TYPE="BUTTON" NAME="Button2" VALUE="Вперед" ONCLICK="vpered();">
<INPUT TYPE="BUTTON" NAME="Button3" VALUE="Назад" ONCLICK="nazad();">
</FORM>
</BODY>
</HTML>
Текст этих документов можно взять здесь.

    Результат просмотра в браузере будет следующим:


Рис.1. Результат работы приложения

    Опишем назначение каждой из функций, однако сначала отметим, что мы создали две переменные, которые будут доступны во всех функциях. Это переменная kol, хранящая общее количество открытых документов, и nomer, содержащая номер текущего документа.

    Функция window.onload() вызывается после загрузки документа. Здесь кнопки Вперед и Назад делаются недоступными, так как еще нет ни одного загруженного документа. Заметим также, что эти кнопки останутся недоступными и в том случае, когда будет загружен только один документ.

    Обратите внимание, что проверка включения/выключения доступности кнопок Вперед и Назад происходит внутри функции Proverka(), в которую передается номер активного в данный момент документа.

    Кнопка Вперед будет активной в том случае, когда загружено более одного документа и в данный момент отображается не последний документ.

    Аналогично кнопка Назад будет активной тогда, когда в массиве загруженных документов более одного документа и в браузере находится не первый документ.

    Для контроля за правильностью работы функций выводится диалоговое окно с номером активного документа.

Создайте HTML-документы, содержащие приведенный пример, и проанализируйте результаты их просмотра в браузере.

    Со следующего шага мы начнем знакомиться с объектом document.




Предыдущий шаг Содержание Следующий шаг