Сценарии JavaScript в активных страницах Web

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


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

Рис. 2.7. Сообщение об открытии документа HTML

Если нажать на кнопку OK в этой диалоговой панели, то в окне браузера появится содержимое документа (рис. 2.8).

Рис. 2.8. Содержимое документа NewWnd.html

В этом окне расположена кнопка “Open Hello window”. Если нажать на эту кнопку, будет создано еще одно окно браузера, в которое загрузится содержимое файла Hello.html. Однако внешний вид этого окна будет несколько необычен (рис. 2.9).

Рис. 2.9. Новое окно для просмотра содержимого документа Hello.html

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

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

Рис. 2.10. Диалоговая панель с приглашением



Исходный текст документа HTML NewWnd.html представлен в листинге2.4.

Листинг 2.4. Файл chapter2/NewWnd/NewWnd.html

<HTML>

  <HEAD>

    <TITLE>Window object</TITLE>

    <SCRIPT LANGUAGE="JavaScript">

    <!--

    function Hello()

    {

      window.alert("Welcome to my home page!")

    }

    function Bye()

    {

      window.alert("Bye! Come back again!")

    }

    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>Open second window</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 и не имеют никаких особенностей. Для вывода диалоговой панели с сообщением эти функции вызывают метод alert.

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

Окно открывается следующим образом:

wndNewWindow = window.open("hello.html", "",

"toolbar=no,menubar=no,scrollbars=no,width=300,height=100");

В качестве первого параметра методу open передается адрес URL документа HTML, который должен быть загружен в окно. Второй параметр определяет имя окна (мы его не задали), а третий - определяет параметры окна.


Содержание раздела