Объект window

Объект window находится в корне иерархии объектов браузера и являет собой окно, в которое загружена страница.

Свойства объекта window

Объект window имеет свойства, описывающие размеры окна, расположенные в окне фреймы, имя окна, содержимое строки состояния окна и другие:

Свойство Описание
frames Массив всех фреймов данного окна
length Количество фреймов в родительском окне
name Имя окна, указанное при его открытии методом open, а также в параметре TARGET оператора <A> или в параметре NAME оператора <FORM>
parent Синоним имени окна. Относится к окну, содержащему набор фреймов
self
window
Синоним имени окна. Относится к текущему окну
status Текущее сообщение, отображаемое в строке состояния окна браузера
top Синоним имени окна. Относится к окну верхнего уровня

 
Методы объекта window

Среди методов, определенных в объекте window, наиболее важны методы, предназначенные для открытия новых окон и закрытия существующих, для отображения на экране простейших диалоговых панелей с сообщениями и методы для установки таймера:

Метод Описание
alert Отображение диалоговой панели Alert с сообщением и кнопкой OK
close Закрытие окна
confirm Отображение диалоговой панели Confirm с кнопками OK и Cancel
open Открытие окна
prompt Отображение диалоговой панели Prompt с полем ввода
setTimeout Установка таймера
clearTimeout Сброс таймера

 

Метод alert

Этот метод применятеся для вывода на экран простейшей диалоговой панели с сообщением и кнопкой ОК. Формат вызова метода alert:

alert("Сообщение");
Через единственный параметр методу alert передается сообщение, отображаемое в диалоговой панели. После вызова этого метода выполнение сценария задерживается до тех пор, пока пользователь не нажмет кнопку OK, расположенную в диалоговой панели с сообщением. Заметим, что при вызове метода alert не указан объект, для которого вызывается метод - объект window. Если при вызове метода объект не указан, интерпретатор сценария, встроенный в браузер, предполагает, что метод относится к объекту window. Тем не менее, можно явно указывать объект window:
window.alert("Сообщение");
Результат будет тем же самым.

 

Метод confirm

С помощью метода confirm можно отобразить на экране диалоговую панель с сообщением, однако в этой панели будет две кнопки - OK и Cancel. В зависимости от того, какая кнопка будет нажата, метод возвратит, соответственно, значение true или false. Метод confirm обычно используется следующим образом:

if(confirm("Сообщение"))
{
  // Нажата кнопка OK
  . . .
}
else
{
  // Нажата кнопка Cancel
  . . .
}

Метод prompt

Если в сценарии необходимо получить от пользователя одну текстовую строку, для этого можно применить метод prompt. Этот метод отображает на экране диалоговую панель, в которой есть одно текстовое поле ввода и кнопки OK и Cancel. Когда пользователь нажимает эту кнопку OK, метод prompt возвращает введенную строку. Если нажата кнопка Cancel, то возвращается значение NULL.  Метод prompt вызывается следующим образом:

Var szInput="";
szInput=prompt("Сообщение","Строка ввода по умолчанию");
Через первый параметр методу передается сообщение, которое отображается в диалоговой панели над текстовым полем ввода. Второй параметр необязательный. Если он указан, поле ввода инициализируется текстовой строкой, заданной этим параметром.

 

Метод open

С помощью метода open сценарий может открыть новое окно браузера и загрузить в это окно документ HTML для просмотра. Формат вызова метода open приведен ниже:

open("Адрес URL", "Имя Окна", "Параметры окна");
Метод возвращает имя нового окна, которое можно использовать для ссылки на свойства и методы окна, а также на свойства и методы объектов, расположенных в этом окне.

Первый параметр метода open задает адрес URL документа HTML, предназначенный для загрузки в новое окно. Второй параметр определяет имя окна для использования в параметре TARGET оператора <A> или в операторе <FORM>. Вы можете указать его как пустую строку вида "". Третий, необязательный параметр, задает различные параметры, определяющие внешний вид создаваемого окна браузера. Этот параметр указывается как текстовая строка, где через запятую перечислены значения отдельных параметров, например:

var wndNewWindow;
wndNewWindow=open("hello.html", "", 
"toolbar=no,menubar=no,scrollbars=no,width=300,height=100");

Ниже мы перечислены все возможные параметры окна:

Параметр Описание
toolbar Если параметр имеет значение yes или 1, окно снабжается стандартной инструментальной линейкой. Если же значение этого параметр равно no, то инструментальная линейка будет отсутствовать
location Параметр определяет, будет ли отображаться поле ввода адреса документа
status Отображение строки состояния
menubar Отображение линейки меню
scrollbars Отображение полос просмотра
resizable Если этот параметр указан как yes или 1, пользователь сможет изменять размер вновь созданного окна
width Ширина окна в пикселах
height Высота окна в пикселах

 

Метод close

С помощью метода close можно закрыть созданное вами или основное окно браузера. Формат вызова этого метода такой:

wndNewWindow.close()
Заметим, что текущее окно браузера (то есть окно, в которое загружен документ HTML с работающим сценарием) может быть закрыто одним из двух следующих способов:
window.close()
self.close()

 

Метод setTimeout

С помощью метода setTimeout можно установить таймер, указав при этом выражение JavaScript и задержку во времени:

idTimer=setTimeout(cmd, timeout);
Метод setTimeout создает и запускает таймер, возвращая его идентификатор. Когда пройдет время, заданное вторым параметром timeout (в миллисекундах), запускается выражение JavaScript, заданное параметром cmd.

Рассмотрим такой фрагмент сценария:

var cmd="NoAccess()";
idTimer=window.setTimeout(cmd, 10000);
Здесь создается таймер с временем задержки 10 секунд. После прошествия этого времени будет вызвана функция с именем NoAccess, которая должна быть определена в сценарии заранее. Эта функция будет выполнена только один раз.

Ниже будет приведен пример сценария, в котором метод setTimeout используется для периодического вызова функции сдвига сообщения в строке состояния браузера ("бегущая" строка). Еще одно применение метода setTimeout - создание анимационных эффектов в сценарии JavaScript. Соответствующий пример в главе, посвященной растровым графическим изображениям.

 

Метод clearTimeout

С помощью метода clearTimeout можно остановить таймер, запущенный методом setTimeout. В качестве параметра методу clearTimeout необходимо передать идентификатор таймера, полученный от метода setTimeout:

clearTimeout(idTimer);
 

События для объекта window

С объектом класса window связаны два события - onLoad и onUnload. Первое из них возникает, когда браузер заканчивает загрузку окна или всех окон фреймов, определенных оператором <FRAMESET>, а второе - когда пользователь завершает работу с документом HTML.

В сценарии можно предусмотреть обработку этих событий, назначив для каждого из них свою функцию. Функция, которая вызывается при завершении загрузки документа, может выполнять какие-либо инициализирующие действия, создавать дополнительные окна или выводить сообщения. Обработчик события onUnload может освобождать полученные ресурсы или выводить какие-либо дополнительные сообщения.

В качестве примера рассмотрим следующий фрагмент документа HTML, содержащий сценарий:

. . .
function Hello()
{
  window.alert("Welcome to my home page!")
}
function Bye()
{
  window.alert("Bye! Come back again!")
}
  . . .
<BODY BGCOLOR=white onLoad="Hello()" onUnload="Bye()">
  . . .
Здесь в операторе <BODY> определены обработчики событий onLoad и onUnload. При возникновении первого события будет вызываться функция Hello, а при возникновении второго события - функция Bye. Заметим, что так как документ HTML интерпретируется в направлении сверху вниз, функции Hello и Bye необходимо определить до появления оператора <BODY>. Лучшее место для определения этих функций - заголовок документа HTML.

 

Сценарии, работающие с объектами window

Рассмотрим конкретные примеры сценариев, использующие свойства и методы объекта window.

 

Закрываем окно браузера

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

Листинг 2.3.

<HTML>
  <HEAD>
    <TITLE>Закрываем окно браузера</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function CloseNavWnd()
    {
      if(confirm("Вы действительно желаете закрыть окно браузера?"))
        window.close();
    }
    // -->
    </SCRIPT>
  </HEAD>
  <BODY BGCOLOR=white>
    <H1>Закрываем окно браузера</H1>
    <P>Для того чтобы закрыть окно браузера, 
нажмите кнопку "Close Navigator Window",
расположенную ниже:
    <FORM NAME="selectForm">
      <P><INPUT TYPE="button" VALUE="Close Navigator Window"
      onClick="CloseNavWnd();">
    </FORM>    
  </BODY>
</HTML>
В области заголовка документа определена функция CloseNavWnd:
function CloseNavWnd()
{
  if(confirm("Вы действительно желаете закрыть окно браузера?"))
    window.close();
}
Эта функция выводит на экран диалоговое окно с просьбой подтверждения закрытия окна и в случае утвердительного ответа обращается к методу close, закрывающему текущее окно. При вызове метода close браузер может еще раз запросить разрешение на закрытие. Если на вопрос ответить утвердительно, то окно будет закрыто.

Кнопка, закрывающая окно, добавляется на страницу следующим образом (более подробно подобные элементы будут рассмотрены позже, в разделе "Формы"):

<INPUT TYPE="button" VALUE="Close Navigator Window"
  onClick="CloseNavWnd();">

Для того чтобы функция CloseNavWnd вызывалась после того как пользователь нажимает кнопку, в строке определения этой кнопки указан обработчик события onClick.

Посмотреть пример работы данного скрипта

 

Открываем новое окно

При открытии документа HTML, рассмотренного в данном примере, на экране появляется диалоговая панель с приветственным сообщением. Если нажать на кнопку OK в этой диалоговой панели, то в окне браузера появится содержимое документа.

В этом окне расположена кнопка "Open Hello window". Если нажать на эту кнопку, будет создано еще одно окно браузера, в которое загрузится содержимое файла hello.html. Однако внешний вид этого окна будет несколько необыче: в окне нет ни полос просмотра, ни меню, ни инструментальной линейки. Дело в том, что при создании этого окна в нашем сценарии было указано, что перечисленные выше элементы пользовательского интерфейса отображать не нужно. Кроме того, были определены точные размеры окна.

Если закрыть окно первого документа, на экране появится диалоговая панель с прощальным приглашением.

Исходные тексты документов представлены ниже:

Листинг 2.4. Основной документ

<HTML>
  <HEAD>
    <TITLE>Window object</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function Hello()
    {
      window.alert("Добро пожаловать на мою страницу!")
    }
    function Bye()
    {
      window.alert("До свидания! Заходите еще!")
    }
    function OpenHelloWnd()
    {
      var wndNewWindow;
      wndNewWindow = window.open("hello.html", "", 
        "toolbar=no,menubar=no,scrollbars=no,width=300,height=100");
    }
    // -->
    </SCRIPT>
  </HEAD>
  <BODY BGCOLOR=white onLoad="Hello()" onUnload="Bye()">
    <H1>Открываем новое окно</H1>
    
    <FORM NAME="selectForm">
      <P><INPUT TYPE="button" VALUE="Open Hello window"
      onClick="OpenHelloWnd();">
    </FORM>    
  </BODY>
</HTML>
В операторе <BODY> задана обработка событий onLoad и onUnload:
<BODY BGCOLOR=white onLoad="Hello()" onUnload="Bye()">
Когда пользователь загружает данный документ, после окончания загрузки браузер вызывает функцию Hello, назначенную для обработки события onLoad. Перед удалением окна с документом вызывается обработчик события onUnload, реализованный в функции Bye. Функции Hello и Bye определены в заголовке документа HTML и не имеют никаких особенностей.

Когда пользователь нажимает кнопку "Open Hello window", определенную в форме, вызывается функция OpenHelloWnd. Эта функция открывает новое окно браузера, загружая в него новый документ HTML. Окно открывается следующим образом:

wndNewWindow = window.open("hello.html", "", 
  "toolbar=no,menubar=no,scrollbars=no,width=300,height=100");
В качестве первого параметра методу open передается адрес URL документа HTML, который должен быть загружен в окно. Второй параметр определяет имя окна (в данном случае не  задано), а третий - определяет параметры окна.

Посмотреть пример работы данного скрипта

 

Бегущий текст в строке состояния браузера

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

window.status = "Новая строка";
Для создания эффекта бегущей строки операцию обновления свойства status необходимо выполнять периодически, отображая текст с изменяющимся сдвигом. Однако не стоит делать это в цикле, так как в результате нормальная работа браузера будет нарушена.

В нашем сценарии применен способ выполнения периодических процедур, основанный на использовании метода setTimeout, определенного для объекта window. Этот метод позволяет организовать отложенное во времени выполнение команды, заданной первым параметром. Время, через которое команда будет запущена, указывается методу setTimeout вторым параметром.

Листинг 2.5.

<HTML>
  <HEAD>
    <TITLE>Бегущая строка</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
      var szMsg = "Добро пожаловать на наш Web сайт!";
      var nSpace = 100;
      var nIteration = 0;

      function sscroll()
      {
        var cmd = "sscroll()";
        var szOut = "";  
        var szText = "";
    
        for (i=0 ; i < nSpace ; i++) 
        {    
          szText += " ";
        }
        szText += szMsg;
  
        szOut = 
          szText.substring(nIteration, nSpace + nIteration);
        window.status = szOut;
  
        nIteration++;
        if(nIteration > nSpace + szMsg.length)
        {
          nIteration = 0;
        }
  
        timer = window.setTimeout(cmd, 50);
      }
    // -->
    </SCRIPT>
  </HEAD>
  
  <BODY BGCOLOR=white>
    <H1>Бегущая строка</H1>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
      sscroll();
    // -->
    </SCRIPT>
    <P>Пример реализации бегущей строки в окне браузера.
  </BODY>
</HTML>
В области заголовка документа определены глобальные переменные szMsg, nSpace и nIteration, а также функция sscroll. Переменная szMsg инициализируется текстовым сообщением, которое будет непрерывно перемещаться в строке состояния браузера. Значение, записанное в переменную nSpace, определяет количество пробелов, которое будет добавлено к строке сообщения слева перед началом операции сдвига. И, наконец, переменная nIteration служит счетчиком сдвигов для функции sscroll.

Функция sscroll вызывается первый раз в теле документа:

<BODY BGCOLOR=white>
  <H1>Бегущая строка</H1>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
    sscroll();
  // -->
  </SCRIPT>
  . . .
</BODY>
В дальнейшем функция sscroll организует при помощи метода setTimeout свой собственный вызов, отложенный во времени на 50 миллисекунд, и завершает работу. Однако через указанное время функция будет вызвана вновь, и это будет продолжаться до тех пор, пока документ HTML, содержащий сценарий, остается загруженным в окно браузера. Упрощенно структура функции sscroll показана ниже:
function sscroll()
{
  var cmd = "sscroll()";
    . . .
  // Отображение сообщения в строке состояния браузера
    . . .
  // Сдвиг сообщения влево на одну позицию
    . . .
  timer = window.setTimeout(cmd, 50);
}
После отображения сообщения в строке состояния и сдвига этого сообщения влево на одну позицию функция sscroll вызывает метод setTimeout, передавая ему через первый параметр переменную с командой, подлежащей выполнению, а через второй - время задержки, по прошествии которого данную команду нужно будет выполнить. В качестве выполняемой команды методу setTimeout указывается вызов функции sscroll. Таким образом эта функция вызывается периодически.

В функции sscroll определены три локальные переменные. Переменная cmd хранит команду вызова функции sscroll. В переменной szOut подготовлен текст, отображаемый в строке состояния браузера при каждом вызове функции sscroll. Текстовая переменная szText используется как рабочая. В ней формируется сообщение для вывода. Вначале в переменную szText записывается nSpace пробелов, а затем добавляется строка szMsg:

for (i=0 ; i < nSpace ; i++) 
{    
  szText += " ";
}
szText += szMsg;
Для того чтобы при каждом вызове функции sscroll сообщение отображалось со сдвигом на одну позицию, из переменной szText извлекается подстрока. Извлечение подстроки выполняется с помощью метода substring, определенного во встроенном классе текстовых строк String. Полученная подстрока записывается в свойство status объекта window и таким образом отображается в строке состояния:
szOut = szText.substring(nIteration, nSpace + nIteration);
window.status = szOut;
Первый параметр метода substring определяет начальную позицию подстроки внутри строки, а второй - конечную. После отображения сообщения функция sscroll увеличивает значение глобального счетчика nIteration на единицу:
nIteration++;
Когда в результате сдвига сообщение полностью уходит из строки состояния, счетчик nIteration снова устанавливается в нулевое значение:
if(nIteration > nSpace + szMsg.length)
{
  nIteration = 0;
}
Обратите внимание, что общая длина сдвигаемой строки здесь вычисляется как сумма значения nSpace (количество начальных пробелов) и длины сообщения szMsg. Последняя определяется с помощью метода length, определенного во встроенном классе String.

Посмотреть пример работы данного скрипта

 

Загрузка нового документа HTML в окно браузера

Сценарий, рассмотренный в данном примере, позволяет отразить новый документ в текущем окне браузера. При нажатии на кнопку "Переход" сценарий запрашивает адрес URL и производит переход на новую страницу

Листинг 2.7.

<HTML>
  <HEAD>
    <TITLE>Загрузка нового документа</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function urlJump()
    {
      var szNewURL="";
      szNewURL=prompt("Введите URL нового документа:", "http://");
      window.location.href=szNewURL;
    }
    // -->
    </SCRIPT>
  </HEAD>
  <BODY BGCOLOR=white>
    <H1>Загрузка нового документа</H1>
    <FORM NAME="selectForm">
      <P><INPUT TYPE="button" VALUE="Переход"
      onClick="urlJump();">
    </FORM>    
  </BODY>
</HTML>
Когда в пользователь нажимает кнопку "Переход" в форме selectForm, запускается функция urlJump. Эта функция вызывает метод prompt, определенный в классе window:
var szNewURL="";
szNewURL=prompt("Введите URL нового документа:", "http://");
Метод prompt отображает диалоговую панель, предназначенную для ввода текстовой строки. В данном случае это должна быть строка адреса URL документа HTML, который будет загружен в окно браузера. Введенный адрес записывается в переменную szNewURL. Для того чтобы загрузить в окно новый документ, достаточно изменить содержимое свойства объекта location с именем href:
window.location.href=szNewURL;
Это свойство хранит адрес URL документа. Изменение содержимого свойства href объекта location главного окна браузера приводит к загрузке в это окно нового документа.

Посмотреть пример работы данного скрипта