Глава 10. Объект window. Создание окон

Объект window является объектом верхнего уровня в который загружается документ, являющийся дочерним объектом, именно поэтому из дочернего объекта мы не можем воздействовать на свойства и методы родительского окна. Это в случае, если объект document не создает новое окно. Если посредством программы JavaScript создается новое окно из объекта document, - новое окно становится уже дочерним объектом от document, следовательно мы уже можем им управлять. И документ, загруженный в новое окно также является потомком от объекта document окна верхнего уровня, следовательно из документа, загруженного в новое окно мы тоже можем управлять этим окном. Тоесть, окно, созданное из объекта document является потомком этого объекта и на него мы можем воздействовать. В виду того, что в любом случае существует основное родительское окно которое можно просто закрыть, тем самым лишить потомков родителя и тогда основным становится первое созданное окно, а если все созданы из одного документа, то о наследственности вообще речи быть не может - они станут разрозненны, следовательно массив windows - не существует и не может таковой существовать. Окнам можно задавать только имена и получать доступ только через имя. При исчезновении родителя исчезает и имя - окно становится "сиротой" - это предотвращает обращения к несуществующим объектам window. К чему я это тут распинаюсь? Часто задают вопросы: какими средствами JavaScript можно закрыть какое-либо окно, созданное другой программой? Ответ - нет таких средств. Нужно просто кликнуть на "крестик" в правом углу окна или воспользоваться меню.

Метод open() объекта window позволяет открывать новые окна, определяя различные их характеристики (размер, координаты, наличие панели инструментов, полосы скроллинга и др.). Кроме того, из JavaScript-программы можно управлять загруженным в окно документом, динамически изменяя его при помощи методов объекта document, как open(), write() и close().
Метод open() объекта window вызывается при помощи операторов:

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

где строка "URL" - адрес ресурса, загружаемого в новое окно. Если URL не указан, окно открывается, но загрузки документа не происходит. (Если не указывается URL, - оставляются кавычки и запятая). С помощью аргумента "windowName" задают имя окна, это имя не является его заголовком. Аргумент windowFeatures представляет собой список характеристик нового окна, которые задавать не обязательно. Эти характеристики представляют собой строку, в которой через запятую без пробелов перечисляются атрибуты: наличие меню, полос прокрутки, рамки, позволяющей изменять размер окна, данные о размерах окна и др. Вновь созданное окно получает фокус ввода, который можно при необходимости изменить методами: focus() и blur().
Каждая характеристика окна представляется в виде атрибута с уникальным именем и может быть включена или выключена при помощи установок yes/no или 1/0. Отразим в таблице список всех атрибутов окон:

По умолчанию атрибутам всегда присваивается значение yes, а размер нового окна (если он не задан) соответствует размеру предыдущего. Атрибуты можно указывать в произвольном порядке. В следующем примере создается новое окно размером 200х100 пикселов. Внимание, в программе нет проверки существования окна, не нажимайте кнопку "Закрыть окно" если окно еще не создано - это приведет к ошибке. Проверить существование окна можно, но об этом скажем позже. В загружаемом документе также существует кнопка закрытия окна, которая использует для объекта window псевдоним self:

<script language="JavaScript">
<!--
function opWind() {
var myUrl = "http://wdstudio.al.ru/exewin.htm";
myWin=window.open(myUrl, "wind1", "width=200,height=100,resizable=no,scrollbars=no,menubar=no");
}
-->
</script>
<input type="button" value="Открыть окно" onClick="opWind()">
<input type="button" value="Закрыть окно" onClick="myWin.close()">

Мы видим, что управлять порожденным окном можно как из родительского окна, так и из документа внутри созданного окна.
А вот что в документе загружаемом в новое окно:

<HTML>
<HEAD>
<TITLE>Пример для нового окна</TITLE>
</HEAD>
<BODY><CENTER>
<FONT COLOR="#FF0000" SIZE="+2">Это вновь созданное окно.</FONT>
<input type="button" value="Закрыть окно" onClick="self.close()">
</CENTER>
</BODY>
</HTML>

Здесь myUrl - адрес ресурса, который загружается в новое окно, в данном случае это http://wdstudio.al.ru/exewin.htm, что позволяет при необходимости изменять эту строковую переменную и загружать различные ресурсы. Если бы строка "width=200,height=100,resizable=no,scrollbars=no,menubar=no" была бы пропущена, то новое окно унаследовало бы все характеристики родительского окна. Строку свойств окна можно задать также и в строковую переменную, а затем подставлять уже переменную, это даст возможность динамически управлять свойствами порожденного окна:

var proStr="width=200,height=100,resizable=no,scrollbars=no,menubar=no";
myWin=window.open(myUrl, "wind1", proStr);

Переменная myWin - становится объектом, через который можно воздействовать на окно из объекта document родительского окна. Именно через запись вида myWin.close() можно закрыть окно, как в приведенном примере, также можно управлять фокусом ввода и менять свойства.

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

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

Метод open()

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

myWin = open("", "myWindow", "width=200, height=300");

При этом переменная myWin становится объектом window, и ее можно использовать, например, для динамической записи в это окно нового текста. Динамическое обновление содержимого документов удобно выполнять при возникновении каких-либо событий - активизации гиперсвязей, нажатии кнопок и т.п.

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

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

<script language="JavaScript">
<!--
var win1
function newWin() {
win1 = window.open("", "myWindow", "toolbar=0,width=300,height=100");
win1.document.open();
win1.document.writeln("<title>Пример окна</title><body bgcolor='#C0C0C0'>"+
  "<form><input type='text' size=20 value='Текущее значение' name='aname'></form>");
win1.document.writeln("Нажмите кнопку в основном окне "+
  "чтобы сменить значение пол\я");
win1.focus();
}

function renWin() {
win1.document.forms[0].aname.value='Новое значение';
win1.focus();
}
//-->
</script>

<form name="myForm">
<input type = "button" onClick="newWin()" value="Открыть окно">
<input type = "button" onClick= renWin() value="Сменить значение поля">
</form>
Обратите внимание, что имя порожденного окна win1 указывается как префикс при обращении к объекту document, причем она создана глобальной, в результате чего методы open(), writeln(), focus() применяются к этому окну из любой функции в текущем документе. Аналогично смены значения поля в форме можно динамически изменять и другие объекты окна, например картинки, только уже использовать нужно массив images, также можно изменять и текстовое содержимое не перезагружая документ полностью, например используя контейнеры <DIV> . . . </DIV>.
Заметьте, это видно из первого примера, что фокус ввода передается вновь созданному окну, и при щелчке мыши на любом другом окне переводит фокус в это окно. Однако назначить фокус можно и программным путем (не поддерживается в IE версии ниже 4-й) при помощи метода focus() - что продемонстрировано в предыдущем примере: в примере фокус возвращается на вновь созданное окно при нажати кнопок в родительском окне. Для удаления фокуса ввода используется соответственно метод blur(). Если фокус ввода будет назначен минимизированному окну - браузер его разворачивает.

Управление окнами. Свойство opener

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

<script language="JavaScript">
<!--
var winToggle = false;
var wt;

function changeBut(n) {
if (n==0) {
winToggle = false;
document.forms[0].elements[0].value = "Открыть окно";
}
else {
winToggle = true;
wt = window.open("./js/book/win1.htm", "wf", "toolbar=0,width=300,height=100");
document.forms[0].elements[0].value = "Назначить фокус ввода";
}
}
function togWin() {
if ( !winToggle )
changeBut(1);
else
wt.focus();
}
//-->
</script>

<form>
<input type="button" value="Открыть окно" onClick="togWin()">
</form>

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

<html>
<body bgcolor="#FFFF80">
<form>
<input type="button" value="Закрыть окно" onClick="window.opener.changeBut(0); self.close()">
</form>
</body>
</html>

Основной документ содержит кнопку формы, при нажатии на которую создается новое окно. Значение, возвращаемое методом open(), присваивается переменной wt, используемой в программе позже. Переменная winToggle применяется для определения состояния порожденного окна. (только если вы закрыли окно кнопкой. Если окно было закрыто кнопкой "Х" в верхнем правом углу - значение переменной winToggle останется неизменным, нажатие кнопки в основном окне приведет к ошибке. Как избавиться от такого недоразумения в IE не представляю, в NN можно например определить переменную в новом окне и проверять на значение NULL, но IE выдает ошибку при обращении к неопределенному объекту) При щелчке мыши на кнопке Открыть окно происходит активизация функции togWin(), которая проверяет значение переменной winToggle, определяя, открыто новое окно или нет. Если окно открыто, ему передается фокус ввода, в противном случае создается новое окно. Переменной winToggle по умолчанию присваивается значение false, поэтому после загрузки документа нажатие кнопки всегда приводит к открытию нового окна. При этом текст на кнопке заменяется текстом Назначить фокус ввода, после чего эта кнопка используется для передачи фокуса ввода, а не для открытия окна. Переменной winToggle теперь присваивается значение true, означающее, что окно открыто.

Кнопка в документе win1.htm, загружаемом в новое окно, используется для закрытия окна. При этом в документе, загруженном в родительское окно, вызывается функция changeBut() с аргументом 0, переменной winToggle снова присваивается значение false, а текст на кнопке заменяется текстом Открыть окно. Затем текущее окно закрывается.

Заметьте, что выражение window.opener или self.opener (что то же самое) указывается как префикс при вызове функции changeBut(). Если использовать выражение top.changeBut(), произойдет ошибка, потому что top обращается к текущему автономному окну. Свойство opener позволяет обратиться к окну, которое породило текущее и в котором первоначально определена функция changeBut(). Данное свойство можно рассматривать как эквивалент свойства parent для фреймов во фреймосодержащих документах. Нужно только добавить, что свойство opener добавлено только в версиях браузеров IE от 4 и NN от 3.

Реклама
Строителство обяви кърти.