Объект window

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

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

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

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

Метод alert

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

alert("Сообщение");

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");

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

Метод close

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

wndNewWindow.close()

window.close()
self.close()

Метод setTimeout

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

idTimer=setTimeout(cmd, timeout);

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

var cmd="NoAccess()";
idTimer=window.setTimeout(cmd, 10000);

Ниже будет приведен пример сценария, в котором метод 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()">
  . . .

Сценарии, работающие с объектами 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>

function CloseNavWnd()
{
  if(confirm("Вы действительно желаете закрыть окно браузера?"))
    window.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 BGCOLOR=white onLoad="Hello()" onUnload="Bye()">

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

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

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

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

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

window.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>

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

<BODY BGCOLOR=white>
  <H1>Бегущая строка</H1>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
    sscroll();
  // -->
  </SCRIPT>
  . . .
</BODY>

function sscroll()
{
  var cmd = "sscroll()";
    . . .
  // Отображение сообщения в строке состояния браузера
    . . .
  // Сдвиг сообщения влево на одну позицию
    . . .
  timer = window.setTimeout(cmd, 50);
}

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

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;
}

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

Загрузка нового документа 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>

var szNewURL="";
szNewURL=prompt("Введите URL нового документа:", "http://");

window.location.href=szNewURL;

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