Правильная ссылка на эту страницу
http://az-design.ru/Projects/WebStat/JS/01b080.shtml

Глава 8. Управление окнами в JavaScript-программах

       Окна броузера используются для загрузки и отображения документов. В языке JavaScript окнам броузера соответствуют объекты window, которые имеют метод ореп(), позволяющий открывать новые окна. Преимущество многооконных приложений состоит в том, что они предоставляют возможность отобразить одновременно несколько документов.
       Из этой главы вы узнаете:
       — Как создавать новые независимые окна броузера
       — Как загружать документы в другие окна броузера
       — Как управлять автономными окнами броузера с помощью JavaScript-программ

Создание окон

       Метод open() объекта window позволяет открывать новые окна, определяя различные их характеристики (размер, координаты, наличие панели инструментов и т.п.). Использование метода ореn() подобно выбору команды New Web Browser меню File броузера Navigator, за исключением того, что язык JavaScript предоставляет больше возможностей для указания характеристик нового окна. Кроме того, из JavaScript-программы можно управлять загруженным в окно документом, динамически изменяя его при помощи таких методов объекта document, как open(), write() и close().

       Совет: Не путайте метод window.open() с методом document.open(). Второй метод используется для открытия потока данных (text-stream) и динамической записи информации в документ. Если вы применяете метод open() без указания имени объекта, броузер Navigator предполагает, что вы хотите открыть новое окно, поскольку объект window является объектом верхнего уровня языка JavaScript.

       Метод open() объекта window вызывается при помощи операторов:

window.open("URL", "windowName", ["windowFeatures,..."]);

       где строка "URL" — адрес ресурса*{Адрес URL указывать не обязательно.}, загружаемого в новое окно. Если URL не указан, окно открывается, но загрузки документа не происходит. С помощью аргумента "windowName" задают имя окна, которое, однако, не является его заголовком. Аргумент windowFeatures представляет собой разделенный запятыми список характеристик нового окна, которые задавать не обязательно. Эти характеристики определяют наличие в окне броузера Navigator панели инструментов, кнопок групп новостей, поля Location, меню, полос прокрутки, рамки, позволяющей изменять размеры окна и др.

       Совет: Окно, созданное последним, получает фокус ввода, т.е. становится активным. Однако, используя новые методы — focus() и blur() — объекта window, "поведение" фокуса можно изменить.

       Каждая характеристика окна представляется в виде атрибута с уникальным именем, например toolbar, и может быть включена или выключена при помощи установок yes /no или 1/0. Использовать пробелы в строке windowFeatures не допускается. В следующей таблице приведены все атрибуты окон.

Атрибут Значения Что определяет
copyhistory [=yes|no] | [=1|0] Сохранение истории загрузки документов в данное окно
directories [=yes|no] | [=1|0] Наличие в данном окне кнопок групп новостей
height = pixelheight Высоту окна (в пикселах)
location [=yes|no] | [=1|0] Наличие поля Location
menubar [=yes|no] | [=1|0] Наличие меню
resizable [=yes|no] | [=1|0] Наличие рамки окна, позволяющей изменять его размеры
scrollbars [=yes|no] | [=1|0] Наличие линеек прокрутки
status [=yes|no] | [=1|0] Наличие строки состояния
toolbar [=yes|no] | [=1|0] Наличие панели инструментов
width = pixelwidth Ширину окна (в пикселах)

       По умолчанию атрибутам всегда присваиваются значения yes(1), a размер нового окна (если он не задан) соответствует размеру предыдущего. Атрибуты можно указывать в произвольном порядке. Атрибут copyhistory копирует историю (history) предыдущего окна (главного окна, если вы создаете первое окно) в текущее окно. Следующая программа позволяет создать новое окно размером 300 пикселов в ширину и 200 пикселов в высоту:

<!--
Program 8-1
-->
<html>
<script language="JavaScript">
var myUrl = "http://www.gold.net/users/agl7/index.htm";
    window.open(myUrl, "windowl", "width=300,height=200");
//-->
</script>
</html>

       Здесь myUrl — адрес ресурса, который вы хотите загрузить в новое окно. В данном случае это файл index.htm, находящийся в каталоге /users/agl7 Web-сервера www.gold.net Новое (дочернее) окно унаследует все характеристики главного (родительского) окна броузера Navigator, кроме размера.*{Такие характеристики окна броузера, как наличие меню, панели инструментов, полос прокрутки и т.п., также не наследуются.}

       Совет: Задать текст заголовка окна можно, динамически записывая в это окно тег <title>...</title> (см. следующий параграф). Если заголовок окна специально не задан, при загрузке в него HTML-документа броузер Navigator выведет в нем текст "Generated by file. . .". Однако этот текст быстро исчезнет после того, как тег <title> вступит в силу.

       Разместите все атрибуты окна в одной строке, а затем передайте ее в качестве параметра методу open(). Это позволит сделать программу более удобочитаемой. Например:

winOpts = "width=500,height=250,scrollbars=0";
window.open ("", "myWindow", winOpts);

       К переменной winOpts в последствии можно обращаться снова для задания характеристик других создаваемых окон.

Различия между фреймами и окнами

       Для объекта window в языке JavaScript существует ряд синонимов, использование которых зависит от структуры HTML-документа. Кроме того, отдельное (автономное) окно на самом деле является новым броузером с собственными значениями свойств window, top и self и, конечно, может содержать другие объекты, например фреймы. Не путайте автономные окна с объектами window — это не одно и то же.
       Автономные окна также являются объектами, однако в отличие от фреймов в языке JavaScript отсутствует массив windows. Ссылка на вновь создаваемое окно может присваиваться переменной в качестве значения, но свойства этого объекта не соответствуют свойствам текущего документа. Объекты frame и window в языке JavaScript идентичны, однако различия между документом, загруженным в автономное окно, и фреймсодержащим документом существенны. Автономные окна в действительности являются клонами главного окна броузера Navigator. В них также могут быть порождены фреймы и загружены различные документы. Фреймсодержащие документы (см. главу 9) — это документы определенной структуры, загрузка которых приводит к разделению окна броузера на отдельные области, куда, в свою очередь, загружают другие ресурсы, в частности HTML-документы.

Метод open()

       Для управления окнами и их содержимым необходимо запоминать ссылки на новые окна, создаваемые при помощи метода open(). Для этого в JavaScript-программах используются переменные, которые впоследствии могут записываться как префиксы других JavaScript-выражений, обращающихся к определенным окнам, например выражения document. write() и т.п. Так, с помощью одного оператора в языке JavaScript можно создать новое окно и запомнить ссылку на него в переменной helpWin:

helpWin = open("","helpWindow","width=300,height=150");

       При этом переменная helpWin становится объектом window, и ее можно использовать, например, для динамической записи в это окно нового текста. Динамическое обновление содержимого документов удобно выполнять при возникновении каких-либо событий — активизации гиперсвязей, нажатии кнопок и т.п. Документ в следующем примере содержит кнопку, после щелчка мышью на которой открывается новое окно. Используя имя нового окна, программа динамически записывает в него текст в HTML-формате с помощью функции document.writeln():

<!--
Program 8-2
-->
<html>
<script language="JavaScript">
<!--
function CreateNewWindow() {
   helpWin = window.open("", "helpWindow",
                         "width=300,height=150");
   helpWin.document.writeln("<hl>Help Window<hr></hl>");
}
//-->
</script>
<body>
<form>
<input type="button"
       value="Open a window" 
       onClick="CreateNewWindow()">
</form>
</body>
</html>

       Совет: Метод open() возвращает ссылку на создаваемое окно, которую можно присвоить переменной. Значение этой переменной позволяет увидеть метод alert(). Например, оператор alert (helpWin);, записанный в предыдущем примере после выражения window.open(), позволит увидеть значение, которое присвоено переменной helpWin.{Это возможно только в броузере Netscape Navigator. В Internet Explorer попытка увидеть содержимое переменной, ссылающейся на окно, приведет к ошибке.}

Динамическое изменение объектов в окне

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

Изменение элементов Форм в других окнах

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

<!--
Program 8-3 
-->
<html>
<head>
<script language="JavaScript">
<!--
// Создание нового окна:
var win1 = window.open("", "myWindow",
                       "toolbar=0,width=300,height==100");
    win1.document.open();
    win1.document.writeln("<title>Child Window K/title>" +
    "<form><input type='text' size=20 value='01d value' " +
    "name='aname'></form>");
    win1.document.close();
//-->
</script>
</head>
<body>
<form name="myForm">
<input type="button"
       onClick="winl.document.forms[0].aname.value='New value'"
       value="Change value">
</form>
</body>
</html>

       Обратите внимание, что имя порожденного окна win1 указывается как префикс при обращении к объекту document, в результате чего методы open(), close(), writeln() применяются к этому окну.

Запись текста и графики в другие окна

       После того как новое окно открыто, в него можно записать текст в HTML-формате, указывая перед каждым методом document. write () имя переменной, которой в качестве значения присвоена ссылка на это окно, возвращаемая методом window.open(). Например:

var myWin = window.open(...); 
    myWin.document.write(...);

       Рассмотрим программу, которая выводит на экран несколько изображений обложек книг. После щелчка мыши на одной из обложек откроется новое окно, содержащее подробную информацию об этой книге. Вывести такую информацию на экран можно и другим способом — применяя фрейм-содержащие документы. Однако многим пользователям нравится сначала открыть окно с подробной информацией, минимизировать его и позже изучать его содержимое. Это трудно осуществить, используя фреймы, потому что фрейм всегда отображается на экране. На рис.8.1 показан главный документ с изображениями обложек книг в окне броузера Navigator.

<!--
Program 8-4
-->
<html>
<head>
<script language="JavaScript">
var bookTexts = new Object();
bookTexts[l] = 
   "<img align='leftf src='essjavl.giff>" + 
   "Title  : <b>ESSENTIAL JAVA*</b>< br>" + 
   "Author : Jason Manger<br>" + 
   "ISBN   : 0-07-709292-9<hr>" +
   "A book  on two of the newest technologies to hit the Web, " + 
   "the <b>Java</b> and <b>JavaScript</b> languages. A guide " + 
   "for novices and experts alike, and includes sections on " +
   "developing dynamic HTML, programming GUI interfaces with " +
   "Java, using threads for multitasking, and streams for " +
   "distributed Java applications. Many dozens of Java and " +
   "JavaScript programs are documented and examined within " + 
   "the book, and an extensive series of appendices is also " +
   "provided.<p> <img width=30 src='cd.gif'>&nbsp;Contains " +
   "<b>Java Development Kit 1.0<b>";
bookTexts [2] =
   "<img align='left' src='netnav.gif'>" +
   "Title  : <b>NETSCAPE NAVIGATOR</bXbr>" +
   "Author : Jason Manger<br>" +
   "ISBN   : 0-07-709190-6<hr>" +
   "An in-depth guide to the de facto Web-browser, " +
   "<b>Netscape Navigator</b>. This book also covers HTML to " +
   "level 3.0, and includes details of Navigator's news and " +
   "mail facilities, as well as much more besides.";
bookTexts [3] =
   "<img align='left' src='hhcs.gif'>" +
   "Title  : <b>HITCH HIKING CYBERSPACE</b><br>" +
   "Author : Jason Manger<br>" +
   "ISBN   : 0-07-709786-6<hr>" +
   "A CD-ROM that comes in <b>two</b> parts. Part I arrives " +
   "with a copy of <b>Netscape Navigator</b> and includes a " +
   "hypertexted version of Jason's books, <i>The WWW Mosaic " +
   "and More</i>, <i>Netscape Navigator</i> and <i>The " +
   "Essential Internet Information Guide</i>. part II " +
   "contains everything except the Navigator software.<p> " +
   "<img width=30 src='cd.gif'>&nbsp;No less " +
   "than 10 top tools are included, such as <b>Netmanage " +
   "Chameleon</b> TCP/IP software for Internet access.";
bookTexts [4] =
   "<img align='left' src='swwwm&m.gif'>' +
   "Title  : <b>THE WORLD WIDE WEB, MOSAIC AND MORE</b><br>" +
   "Author : Jason Manger<br>" +
   "ISBN   : 0-07-705170-6<hr>" +
   "A guide to the popular <b>Mosaic</b> browser and detailed " +
   "information on <b>CGK/b> (the Common Gateway Interface) , " +
   "all in one book. CGI allows HTML to interface to back-end " +
   "databases, providing greater interactivity within " +
   "hypertext documents.";
function showBook(number) {
   if (number == null) {
      alert ("This product cannot be located1");
      return;
   }
   winOpts = "toolbar=0,location=0,width=650,height=400"; 
   wm1   = window, open ("", "myWin", winOpts); 
   wm1. document.open (); 
   wm1.document.write(
      "<html>" +
      "<head><title>Product lnformation</title>" +
      "<base href='" + location + "'></head>" +
      "<body background='backl.gif' text=White>" +
      bookTexts[number]  +
      "<hr>" +
      "<img align='right' src='logo.gif'>" +
      "<form><input type=button value='Finished' " +
      "onClick='self.close()'></form>" +
      "</body></html>");
   wm1.document.close();
}
</script>
</head><title>INTERNET BOOKS AND CDs FOR 1996</title>
<body text="White" background="back1.gif" link="Yellow">
<img align="left" src="mgh5.gif" hspace=12 border=0>
<font size=+3>
<img src="logo.gif">&nbsp;INTERNET BOOKS FOR 1996...
</font>
<basefont size=4>
<center>
<table cellspacing=20 border=0>
<tr valign="bottom" align="middle">
<td>
  <a href="#" onClick="showBook(1)">
  <img border=l src="ess3avl.gif">
  </a>
</td>
<td>
   <a href="#" onClick="showBook(2)">
   <img border=l src="netnav.gif">
   </а>
</td>
<td>
   <a href="#" onClick="showBook(3)">
   <img border=l src="hhcs.gif">
   </a>
</td>
<td>
   <a href="#" onClick="showBook(4)">
   <img border=l src="swwwm&m.gif">
   </a>
</td>
</tr>
</table>
</center>
<dl>
<dd><img src="hand.gif">&nbsp;Welcome to the Internet books' section at McGraw-Hill.<p>
<dd><img src="hand.gif">&nbsp;Please click on a book cover for more information on that book. A new window will be opened to show the details, which you can then close or minimise at will.
</dl>
</form>
</body>
</html>


Puc.8.1. Документ с изображениями обложек книг, загруженный в броузер Navigator

       Подробная информация о книгах записана в массиве строк, состоящем из четырех элементов. Для создания этого массива используется конструктор Object() языка JavaScript. Значением каждого из элементов массива являются строки в HTML-формате, описывающие определенную книгу. Заметьте, что индексы элементов массива в данном случае начинаются с единицы. Далее, в самом документе выводятся изображения обложек книг (рис.8.1), и можно при помощи щелчка мыши на одной из обложек посмотреть подробности о книге. Например, выражение:

<td>
  <а href="#" onClick="showBook(4)">
  <img border=1 src="swwwtn&m.gif">
</a>
</td>

       определяет гиперсвязь с пустым адресом URL (поэтому используется символ #), которая при щелчке на ней активизирует функцию с именем showBook(). Аргумент, переданный функции showBook(), в данном случае 4, представляет номер книги, информацию о которой вы хотите просмотреть, и соответствует элементу массива bookTexts, в нашем примере — элементу bookTexts[4]. Затем функция showBook() создает новое окно и записывает в него содержимое четвертого элемента массива bookTexts вместе с изображением обложки книги, а также некоторые другие HTML-теги. Обратите внимание, что перед каждым методом document.write () указано имя нового окна. Среди HTML-элементов, записываемых в новое окно, имеется тег, определяющий кнопку с обработчиком события onclick, которая закрывает окно, используя выражение self.close(), где значение self относится к текущему окну. На рис.8.2 показано вновь созданное окно, содержащее подробную информацию об одной из книг.


Рис. 8.2. Динамически созданный документ, содержащий информацию об одной из книг, в окне броузера Navigator

Проблемы при обращении к Файлам

       При обращении к файлам из тегов, которые динамически записаны в окно, например из тега <img src>, используемого для загрузки рисунка, необходимо выполнить одно из приведенных ниже действий:
       — Задать полный адрес URL файла, к которому вы обращаетесь (например, начинающийся с http:// или file://). Помните о необходимости использования адресов вида

file:///%7cdrive|/path

       для обращения к локальным файлам. Здесь %7с — код символа вертикальной черты (|). Он используется для того, чтобы избежать ошибок, поскольку броузер Navigator (особенно Navigator бета-версий) не всегда верно обрабатывает этот символ.
       — Записать во вновь создаваемое окно тег <base href=URL>, где url определяет местоположение текущего окна, возвращаемое свойствомlocation. Такой тег можно записать с помощью конкатенации строк,например "<base href=" + location + ">". Этот способ использовался в программе в предыдущем примере. Тег <base href> делаеттекущий документ основным документом для всех адресов URL, ккоторым обращаются из него.
       Это обеспечит правильный поиск файлов, к которым вы хотите обратиться, в динамически создаваемых документах. Необходимость использования одного из перечисленных методов обусловлена тем, что каждое окно броузера имеет собственное свойство location, значение которого необходимо правильно установить.

Загрузка новых документов в другие окна

       Первый аргумент, передаваемый методу open(), задает имя документа, который следует загрузить в создаваемое окно. Однако загрузить документ в окно можно не только этим способом. Если присвоить адрес URL документа свойству location конкретного окна, указанный документ будет загружен в это окно. Например, фрагмент

var w1 = open("",
              "win1",
              "toolbar=0,width=700,height=400");
    w1.location = "http://www.osbone.com";

       загрузит домашнюю страницу Web-узла Osborne в окно с именем w1, хотя в этом случае было бы проще записать:

var w1 = open("http://www.osbone.com", "win1",
              "toolbar=0,width=700,height=400");

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

Передача окну Фокуса ввода и его удаление

       В языке JavaScript фокус ввода имеет окно, активное в данный момент. Щелчок мыши в любой части неактивного окна переводит в него фокус ввода. Однако назначить фокус ввода окну можно и программным путем — при помощи метода focus() языка JavaScript. Для удаления фокуса ввода из окна используется метод blur(). Содержимое окна можно изменять, не назначая окну фокуса ввода. С другой стороны, выбор любого HTML-объекта в окне должен приводить к назначению этому окну фокуса ввода.

       Совет: Если фокус ввода назначается минимизированному окну, броузер Navigator разворачивает его. В Windows 95 бета-версии это может привести к ошибкам: Navigator в таких случаях неправильно восстанавливает размеры окна.

       Если ссылки на вновь создаваемые окна присваиваются переменным, как показано выше, методы focus() и blur()*{Методы focus() и blur() не поддерживаются в Microsoft Internet Explorer.} могут быть применены к заданному окну. Например, в программе создаются два новых окна w1 и w2 с помощью операторов

var w1 = window.open("", "myWin",
                     "height=99,width=99r scrollbars=no"); 
var w2 = window.open("","myWin",
                     "height=99,width=99,scrollbars=no");

       Фокус ввода будет передан окну, которое создано последним, в данном случае окну w2. Однако после выполнения оператора:

w1.focus();

       фокус получит первое окно (wl). Фокус ввода может иметь только одно окно, поэтому при назначении фокуса новому окну предыдущее автоматически теряет его, т.е. становятся неактивными. Рассмотрим программу, которая создает два новых окна: при нажатии кнопок в родительском документе фокус ввода передается одному из порожденных окон.

<!--
Program 8-5 
-->
<html>
<head>
<script language="JavaScript">
<!--
function createTwoWindows() {
   var winl = window.open("", "winl", "height=60," +
                          "width=175,scrollbars=no");
   var win2 = window.open("", "win2", "height=60," +
                          "width=175,scrollbars=no");
}
</script>
</head>
<body onLoad="createTwoWindows() ">
<form>
Please click on the appropriate button:<br>
<input type=button
       value='Focus Window 1'
       onClick="winl.focus()">
<input type=button
       value= 'Focus Window 2'
       onClick="win2.focus()">
</form>
</body>
</html>

       Другой широко распространенный способ состоит в открытии окна и вводе в него фокуса при помощи одного элемента управления. Например, в приведенном ниже документе содержится кнопка, после нажатия на которую открывается новое окно, и ему сразу же назначается фокус ввода. Возможность закрытия созданного окна обеспечена внутри него при помощи функции self.close(), которая вызывается после нажатия кнопки Close window, содержащейся в документе, загруженном в это окно.

Управление несколькими окнами с помошыо свойства opener

       Задача управления фокусом ввода усложняется тем, что для обращения к переменным и функциям, определенным в родительском окне броузера Navigator, нельзя использовать синоним родительского окна top, как при работе с фреймами. В случае, если окна открывались при помощи метода open(), значение top является ссылкой на текущее окно, потому что в этом случае окна броузера автономны. Для преодоления данной проблемы в броузер Navigator 3.0 введено новое свойство opener, которое принадлежит объекту window. Свойство opener содержит имя окна, которое вызвало метод open(), и необходимо для обращения к функциям и переменным, определенным в первом окне броузера Navigator. Рассмотрим программу, которая предоставляет возможность открыть окно и установить в нем фокус ввода. Данная программа использует свойство opener для обращения к первому окну броузера Navigator.

<!--
Program 8-6 
-->
<html>
<head>
<script language="JavaScript">
var winToggle = false; 
var wt;
function changeBut(n) { 
   if (n==0) {
      winToggle = false;
      document.forms[0].elements[0].value = "Open window";
   } 
   else {
      winToggle = true;
      wt = window.open("win1.htm", "wf",
                       "toolbar=0,width=300,height=100");
      document.forms[0].elements[0].value = "Focus window";
   }
}
function togWin() {
   if (!winToggle) changeBut(1); 
    else wt.focus();
}
//-->
</script>
</head>
<body>
<form>
<input type="button"
       value="Open window"
       onClick="togWin()">
</form>
</html>

       Файл winl.htm, загружаемый во вновь созданное окно wt, имеет следующий вид:

<html>
<body>
<form>
<input type="button"
       value="Close window"
       onClick="window.opener.changeBut(0);
       self.close()">
</form>
</body>
</html>

       Основной документ содержит кнопку формы, при нажатии на которую создается новое окно. Значение, возвращаемое методом open (), присваивается переменной wt, используемой в программе позже. Переменная win-Toggle применяется для определения состояния порожденного окна. При щелчке мыши на кнопке Open window происходит активизация функции togwin(), которая проверяет значение переменной winToggle, определяя, открыто новое окно или нет. Если окно открыто, ему передается фокус ввода, в противном случае создается новое окно броузера. Переменной winToggle по умолчанию присваивается значение false, поэтому после загрузки документа нажатие кнопки всегда приводит к открытию нового окна. При этом текст на кнопке заменяется текстом Focus window, после чего эта кнопка используется для передачи фокуса ввода, а не для открытия окна. Переменной winToggle теперь присваивается значение true, означающее, что окно открыто.
       Кнопка в документе win1.htm, загружаемом в новое окно, используется для закрытия окна. При этом в документе, загруженном в родительское окно, вызывается функция changeBut() с аргументом 0, переменной winToggle снова присваивается значение false, а текст на кнопке заменяется текстом Open window. Затем текущее окно (self) закрывается.
       Заметьте, что выражение window, opener или self.opener (что то же самое) указывается как префикс при вызове функции changeBut(). Если использовать выражение top.changeBut(), произойдет ошибка, потому что top обращается к текущему автономному окну. Свойство opener позволяет обратиться к окну, которое породило текущее и в котором первоначально определена функция changeBut(). Данное свойство можно рассматривать как эквивалент свойства parent для фреймов во фреймсодержащем документе.

Закрытие окон

       Для закрытия окна используется метод close(). При его вызове в качестве префикса следует указать имя окна, которое необходимо закрыть, например:

winName.close();

       Здесь winName представляет собой переменную, которой сначала было присвоено значение, возвращенное методом window.open(). Кроме того, для вызова метода close() можно применять синонимы объекта window. Например, если нужно закрыть текущее окно, используйте выражение self.close(), поскольку self является синонимом текущего окна. Однако метод close () вызывается и без префикса, потому что предполагается, что текущее окно существует. Рассмотрим программу, которая создает окно, а в содержащем ее документе определена кнопка для его закрытия:

<!--
Program 8-7
-->
<html>
<head>
<script language="JavaScript">
<!--
// Создать окно:
win1 = window.open("", "myWindow",
                   "toolbar=0,width=300,height=100");
//-->
</script>
</head>
<body>
<form>
<input type="button"
       onClick="win1.close()" 
       value="Close window">
</form>
</body>
</html>

       Если эту программу изменить и не присваивать ссылку на создаваемое окно переменной, как показано ниже:

<!--
Program 8-8 
-->
<html>
<head>
<script language="JavaScript">
// Create a window:
window.open("dummy.htm", "myWindow",
            "toolbar=0,width=300,height==100");
</script>
</head>
</html>

       то единственным способом обращения к созданному окну будет загрузка в него такого документа, который содержит в себе возможности закрытия этого окна, например кнопку, при нажатии на которую вызывается метод self.close(). Учитывая, что в данном примере в новое окно должен загружаться файл dummy.htm, можно представить этот файл следующим образом:

<html>
<body>
<form>
<input type="button"
       onClick="self.close() "
       value="Close window">
</form>
</body>
</html>

       Как видите, данный документ содержит кнопку Close window, для которой определен атрибут обработчика события onclick. Таким образом, при нажатии на эту кнопку вызывается метод self.close(), и окно закрывается.
       Вообще можно определить функцию-переключатель, вызов которой обеспечит открытие и закрытие окна при нажатии единственной кнопки. В качестве примера рассмотрим программу, где определяется глобальная булева переменная winToggle, используемая для создания окна, а также для контроля за его состоянием. При первой загрузке программы переменной winToggle присваивается значение false. После щелчка на кнопке, содержащейся в документе, открывается окно, ссылка на которое присваивается переменной wt. При этом переменная winToggle получает значение true. После повторного щелчка на кнопке значением переменной winToggle станет true, и созданное окно закроется. Заметьте, что перед закрытием окна переменной winToggle снова присваивается значение false.

<!--
Program 8-9 
-->
<html>
<head>
<script language="JavaScript">
<!--
var wt;
    winToggle = false; 
function togWin() {
   if (!winToggle) {
      winToggle = true; 
      wt = window.open("","wt",
                       "toolbar=0,width=300,height=100");
      document.forms[0].togBut.value = "Close window";
   } 
   else {
      winToggle = false;
      document.forms[0].togBut.value = "Open window";
      wt.close();
   }
}
</script>
</head>
<body>
<form>
<input type="button"
       name="togBut"
       value="Open window"
       onClick="togWin()">
</form>
</html>

       Обратите также внимание на то, что текст на кнопке стал иным. Это необходимо при изменении функционального назначения кнопки с помощью функции-переключателя togWin(). Возможность изменения текста на кнопке посредством атрибута value введена в броузер Navigator 3.0.

       Внимание! Если применить метод close() в документе верхнего уровня броузера Navigator, броузер завершит работу точно так же, как при выборе команды Close меню File. Команды Exit и Close меню File броузера Navigator действуют одинаково, когда открыто только одно окно верхнего уровня. По-видимому, это является распространенной особенностью многих броузеров.

Проверка существования окна

       При обращении к окну необходимо удостовериться, что это окно действительно существует. Такая проверка необходима, чтобы избежать ошибок, поскольку пользователь может закрыть окно в любое время. Обращение к несуществующему окну приведет к ошибке. Проверять существование окна необходимо перед записью в него данных или при изменении значения одного из его свойств.
       Проверяя, существует ли конкретное свойство окна, можно также узнать, открыто окно в данный момент или нет. В следующем приложении в новом окне динамически создается булева переменная winOpen. Это делается при помощи динамической записи в новое окно контейнера <script>...</script>. Созданная переменная является свойством нового окна, и к ней можно обратиться посредством выражения winl. win Open. Данное свойство существует до тех пор, пока окно winl открыто. При попытке обратиться к этому свойству после закрытия окна возвращается значение null (не определено).

<!--
Program 8-10 
-->
<html>
<head>
<script language="JavaScript">
var win1;
var scriptTags = "<html>" +
                 "<title>Sample Window</title>" +
                 "<script>var winOpen=true;</script>" + 
                 "</html>";
function createWindow() {
   win1 = window.open("",
                      "win1",
                      "height=60,width=175,scrollbars=no");
   win1.document.open(); 
   win1.document.writeln(scriptTags); 
   win1.document.close();
}
function validateWindow() {
   if (win1.winOpen == null)
       alert("Window does NOT exist.");
   else {
       win1.focus(); // give window focus
       alert("Window exists!");
   }
}
//-->
</script>
</head>
<body onLoad="createWindow()">
<form>
<input type=button
       value="Check Window" 
       onClick="validateWindow()">
</form>
</html>

       Обратите внимание, что переменная winl определяется в начале документа вне какой-либо функции, так что она доступна в любом месте документа. При загрузке этого документа вызывается функция createWindow(), указанная в атрибуте onLoad тега <body>. Эта функция создает новое окно при помощи метода window.open(). Кнопка Check Window, содержащаяся в документе, позволяет проверить существование порожденного окна. Функция validateWindow(), которая вызывается после нажатия этой кнопки, проверяет свойство winOpen окна win1. Если значение данного свойства равно null, то такого свойства не существует, т.е. окно закрыто. Когда окно существует, ему передается фокус ввода.

Заключение

       Автономные окна являются копиями (клонами) главного окна броузера Navigator и обладают теми же характеристиками. Новые окна броузера обычно создаются для просмотра нескольких документов, а также для предоставления пользователю удобного интерфейса, включающего дополнительные возможности управления окнами. Автономные окна броузера можно перемещать по экрану, а также изменять их размеры.
       — В языке JavaScript метод window.open() открывает новое окно броузера. Применение метода open() без префикса аналогично применению выражения window.open(), поскольку объект window в языке JavaScript является объектом верхнего уровня. Вновь созданные окна согласно терминологии языка JavaScript называются порожденными, а главное окно броузера является родительским для всех порожденных окон.
       — Метод window.open() возвращает ссылку на созданное окно, которую следует присвоить переменной. Это дает возможность обращаться к окну из JavaScript-программы. Например, можно открыть окно и затем припомощи метода document.write() поместить в него HTML-текст, указав в качестве префикса этого метода имя созданного окна.
       — Окна закрываются при вызове метода window.close(). Если значение, возвращенное методом window.open(), не присвоено никакой переменной, окно должно быть закрыто с помощью метода close(), вызываемого в документе, который загружен в это окно. Если ссылка на окно незаписана в переменной, обратиться к созданному окну из его родительского окна невозможно.
       — К сожалению, в броузере Navigator не поддерживается массив windows[]. Поэтому существование автономных окон определяется только с помощью небольших программ, которые динамически записываются в документы, загружаемые в создаваемые окна. Такая программа можетсостоять из единственного определения переменной. Сравнивая этупеременную со значением null (неопределенное значение), можно выяснить, существует окно или нет, поскольку каждая JavaScript-переменная связана с окном, в котором она определена.
       — В броузер Navigator 3.0 введено свойство opener, которое обеспечивает возможность обращения порожденного окна к его родительскому окну.
       Помните, что при обращении к переменным и функциям, определенным в порожденном окне, необходимо указать имя этого окна. Например, выражение myWindow.document.forms[0].myField.value возвращает значение поля с именем myField, которое содержится в первой форме документа, загруженного в окно с именем myWindow. Переменной myWindow, например, с помощью оператора

var myWindow = window.open();

       должно быть присвоено значение, возвращенное методом window.open(). К другим элементам, определенным в порожденном окне (фреймам, формам, переменным, функциям языка JavaScript и т.п.), следует обращаться таким же способом.




<<< Пред. Оглавление
Начало раздела
След. >>>

Дата последнего изменения:
Thursday, 21-Aug-2014 09:10:56 MSK


Постоянный адрес статьи:
http://az-design.ru/Projects/WebStat/JS/01b080.shtml