• Манипулирование окнами
• Прокручивание окна
• Создание новых окон
• Немодальные окна
• Модальные и индивидуальные диалоговые HTML-окна
• Элементы окна
• Закрытие окна
• Создание диспетчера окон
• Манипулирование наборами фреймов
• Создание наборов фреймов
• Сценарии для наборов фреймов
• Моделирование браузера
• Особые случаи событий

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

В главе рассмотрены следующие темы:

• Манипулирование окном. В главе 4 были введены события, которые возникают, когда пользователь взаимодействует с окном. В данном разделе обсуждаются методы, предоставляемые объектом window для перемещения, изменения размера и прокручивания окна документа.

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

• Манипулирование наборами фреймов. В этом разделе представлен код HTML для создания набора фреймов и вводится семейство frameset, которое обеспечивает доступ к индивидуальным фреймам. Каждый фрейм является экземпляром объекта window, так что объектная модель окон также применима ко всем фреймам. Все методы, которые используются для манипулирования окнами, также могут быть использованы для манипулирования фреймами.

• Рассмотрение специальных событий. В данном разделе введены методу обработки межфреймовых и межоконных событий. В разделе показано, как в одном окне написать обработчик событий, который будет обрабатывать события в другом окне.

Манипулирование окнами

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

Таблица 5.1. Методы объекта window

В столбце Манипулирует указан объект (физическое окно или текущий документ), к которому применяется метод. Обычно методы окна, которые вызываются внутри фрейма, применимы к текущему окну, но методы перемещения или изменения размера являются исключениями из этого правила. Методы всегда применимы к содержащему их окну. Поэтому вызов одного из этих четырех методов представляет собой то же самое, что и вызов метода в самом верхнем окне, как показано ниже:

top.methodName

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

Методы прокручивания соответствуют свойствам scrollTop и scrollLeft, представленным в свойстве body документа, которые были описаны в главе 9. Вызов метода scrollTo аналогичен присвоению новых значений в пикселах данным свойствам

Прокручивание окна

Метод scroll (и эквивалентный метод scrollTo) может быть использован для прокручивания документа до выбранного местоположения, используя координаты ху. Координаты ху определены в пикселах, относительно верхнего левого угла документа. Это означает, что scroll (0, 0) всегда прокручивает верхний левый угол документа на экране.

Метод scroll завершает прокручивание по достижении конца документа. Например, если значение передаваемого аргумента vertical слишком велико, то метод scroll не будет возвращать ошибку, а просто прокрутит нижнюю часть окна до нижней границы экрана. Невозможно создать код, который будет прокручивать последнюю строку документа за пределами экрана.

При прокручивании документа в окне возникает событие onscroll. Данное событие генерируется независимо от того, является ли прокручивание результатом выполнения метода scroll или прокручивания документа пользователем вручную.

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

Число браузеров, которые поддерживают метод scroll, превышает число браузеров, поддерживающих метод scrollTo. Метод scrollTo был введен для обеспечения совместимости с методами перемещения и изменения размера.

Создание самопрокручивающегося окна

Приведенный ниже код демонстрирует использование таймера для создания документа, который прокручивается автоматически. Данный код демонстрирует использование метода scroll и учитывает размер документа. В этом примере текст прокручивается аналогично прокручиванию с помощью встроенного элемента Marquee.

<HTML>
<HEAD>
<TITLE> Автоматически прокручивающееся окно ;/TITLE>
<SCRIPT LANGUAGE="JavaScript">
var tScroll;
var curPos = 0;
function runTimer() {
curPos = document.body.scrollTop + 3;
window.scroll(0, curPos);
// Запуск с начала, если достигнут конец документа.
if (curPos > document.body.scrollHeight -
document.body.clientHeight)
window.scroll(0, 0);
tScroll = window.setTimeout("runTimer();", 100);
}
window.onload = runTimer;
window.onunload = new Function("clearTimeout(tScroll)");
</SCRIPT>
</HEAD>
<!-- Атрибут стиля margin-bottom добавляет пустое пространство после последней строки текста. -->
<BODY STYLE="margin-bottom:350pt">
Contents to scroll
</BODY>
</HTML>

Создание новых окон

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

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

Методы создания модальных и немодальных окон перечислены в табл. 5.2.

Таблица 5.2. Методы модальных и немодальных окон

В следующих разделах подробно обсуждается использование данных методов.

Немодальные окна

Объект window использует метод open, который позволяет вам создавать новые немодальные окна. Новое окно представляет собой экземпляр браузера. Данный экземпляр имеет свою собственную историю, и навигация в нем осуществляется независимо от создавшего его окна.

Метод open имеет следующий синтаксис:

[windowObject =] window.open([url [, name [, features [, replace]]]])

Все параметры в методе open являются необязательными. Параметр url определяет исходную загружаемую страницу. Если данный параметр опущен, то в экземпляре браузера будет открыта пустая страница, что полезно, когда документ создается на основе сценария.

Параметр name назначает имя окну, которое должно быть использовано, когда окно является целью (target) для последующих документов. Указание цели определяет место отображения документа, когда пользователь переходит по ссылке. Атрибут TARGET для ссылки может определять имя окна. Если окно для определенной цели не существует, то документ будет отображен в новом окне. Если цель не определена, то новый документ будет отображен в текущем окне. Параметр name, а следовательно и атрибут TARGET, могут содержать только буквы, цифры и символ подчеркивания (_).

Параметр features состоит из строки, которая определяет отображаемые элементы в новом окне, таким образом включая или отключая строки меню, панели инструментов и полосы прокрутки и определяя исходный размер окна. Эти элементы подробно обсуждаются в разделе "Элементы окна" ниже в данной главе.

Параметр replace определяет обработку нового адреса URL в списке истории окна. Если параметр replace опущен или имеет значение false, то адрес URL будет добавлен в конец списка. Если параметру присвоено значение true, то URL заменяет текущий адрес URL в списке, если таковой имеется. Если текущий адрес URL отсутствует; то данный адрес URL не будет добавлен вообще. Параметр replace используется преимущественно для уже открытых окон.

Манипулирование новым окном

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

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

// открыть окно без сохранения ссылки на него.
window.open("myPlace.htm", "myPlace");
/* загрузить новый документ в окно "myPlace" и сохранить ссылку на него. */
myPlace = window.open("myPlace2.htm", "myPlace");

Данный код создает только один экземпляр нового окна. Этот метод сходен с указанием в качестве цели окна нового документа.

Модальные и индивидуальные диалоговые HTML-окна

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

Методы для встроенных диалоговых окон - alert, confirm и prompt - принимают строки message как аргументы. В JavaScript данные строки могут сдержать разрывы строк, обозначенные escape-символом \n. (В VBScript для обозначения разрыва строки используется chr(13)). Ниже приведен пример сообщения alert со множеством строк:

alert("You entered invalid values on fields:\nName\nUser");

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

• Отсутствует возможность навигации. (Нажатие ссылки приведет к открытию документа по данному адресу URL в новом окне браузера).

• Содержание внутри диалогового окна нельзя выделить.

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

При создании индивидуальных модальных диалоговых окон вы всегда должны указывать кнопку закрытия. Если кнопка закрытия будет опущена то диалоговое окно может быть закрыто только путем нажатия кнопки Close (Закрыть) в верхнем правом углу окна. Для создания кнопки закрытия используйте тип кнопки Submit, так что кнопка будет вести себя как кнопка по умолчанию. Приведенный ниже код создает кнопку ОК, которая закрывает диалоговое окно:

<INPUT TYPE=SUBMIT VALUE="OK" STYLE="Width:5em" ONCLICK="window.close();">

Отображение индивидуальных диалоговых окон

Первый и последний аргументы метода showModalDialog в сущности представляют собой те же аргументы, что и в методе open. Первый аргумент определяет отображаемый адрес URL, а последний определяет набор элементов отображаемого окна. Второй аргумент отличается и принимает не имя, а любую переменную, включая массив, и передает ее в диалоговое окно. Данный аргумент позволяет приложению передавать информацию в диалоговое окно.

Можно определить возвращаемое значение для метода showModalDialog, назначив определенное свойство диалогового окна. Данное свойство может принимать любой тип переменной, которая возвращается в вызвавшее приложение.

Обмен информацией с диалоговым окном

Информация, обмен которой осуществляется с диалоговым окном, отражена в объектной модели диалогового окна. Копия переменной, которая определена как второй аргумент метода showModalDialog, представлена в диалоговом окне как свойство dialogArguments. Свойство returnValue представлено для передачи информации обратно в вызвавшее приложение. Когда диалоговое окно закрывается, значение данного свойства используется как возвращаемое значение для диалогового окна. Приведенный ниже код демонстрирует доступ к аргументам, обмен которыми осуществляется с диалоговым окном:

<HTML>
<HEAD>
<TITLE> Передача переменных </TITLE>
</HEAD>
<!-- При выгрузке диалогового окна возвращается значение в тексте окне. -->
<BODY ONUNLOAD="window.returnValue = document.all.ret.value;">
<P>You passed in the following value:</P>
<P ALIGN=CENTER>
<SCRIPT LANGUAGE="JavaScript">
document.write(window.dialogArguments);
</SCRIPT>
<P>Enter a value to return to the application:</P>
<P ALIGN=CENTER>
<INPUT TYPE=TEXT ID="ret" VALUE="Return">
<INPUT STYLE="width:5em" TYPE=SUBMIT VALUE="OK"
ONCLICK="window.close()">
</BODY>
</HTML>

Данное диалоговое окно может быть вызвано с помощью следующей команды:

showModalDialog("pass.htm", "Pass this string to the dialog box.");

Создание диалогового окна About

С помощью метода alert вы можете создать простое диалоговое окно About. Используя метод showModalDialog, можно создать диалоговое окно About с элементами форматирования HTML. Приведенный ниже код отображает индивидуальное диалоговое окно About. Первый документ содержит кнопку About, нажатие на которую выводит на экран диалоговое окно About.

<HTML>
<HEAD>
<TITLE> Демонстрация окна About </TITLE>
<SCRIPT LANGUAGE="JavaScript">
function about() {
// Отображение диалогового окна About.
event.srcElement.blur();
window.showModalDialog("about.htm", "",
"dialogWidth:25em; dialogHeight:13em")
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE=BUTTON VALUE="About" ONCLICK="about();">
</BODY>
</HTML>

Код диалогового окна About находится в файле about.htm:

<HTML>
<HEAD>
<TITLE>About Inside Dynamic HTML</TITLE>
</HEAD>
<BODY STYLE="text-align:center; font-size:75%;
background:lightgrey">
<H2>Companion CD-ROM Version 1.0</H2>
<H3>By Scott Isaacs</H3>
<H4 STYLE="font-style:italic">
Демонстрация возможностей динамического HTML!
</H4>
<!-- Вводимая кнопка представляет собой кнопку по умолчанию. --> <INPUT TYPE=SUBMIT STYLE="Width:5em" VALUE="OK"
ONCLICK="window.close()">
</BODY>
</HTML>

Создание диалоговых окон ввода информации

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

<HTML>
<HEAD>
<TITLE> Пользовательская информация </TITLE>
<STYLE TYPE="text/css">
BODY {margin-left:10pt; background:menu}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function saveValues() {
// Построение массива возвращаемых значений.
var retVal = new Array;
for (var intLoop = 0; intLoop < document.UserInfo.length; intLoop++) with (document.UserInfo[intLoop]) if (name != "") retVal[name] = value; window.returnValue = retVal;
event.returnValue = false;
window.close();
}
</SCRIPT>
</HEAD>
<BODY>
<!-- Данная форма используется для группирования содержащихся элементов управления в легкодоступный массив. -->
<FORM NAME="UserInfo">
<FIELDSET>
<LEGEND>User Information</LEGEND>
<P>User Name: <INPUT TYPE=TEXT NAME="User">
<P>Address: <TEXTAREA ROWS="3" NAME="Address"></TEXTAREA>
</FIELDSET>
</FORM>
<P STYLE="text-align:center">
<INPUT TYPE=SUBMIT STYLE="width:5em" ONCLICK="saveValues();"
VALUE="OK">
<INPUT TYPE=RESET ONCLICK="window.close();" VALUE="Cancel">
</BODY>
</HTML>

Если приведенный выше код находится в файле Userlnfo.htm, то следующий сценарий будет отображать код в модальном диалоговом окне, затем выполнять цикл и передавать возвращаемые значения:

<SCRIPT LANGUAGE="JavaScript">
var vals = new Array();
vals = window.showModalDialog("UserInfo.htm");
if (vals != null) {
strOut = "Returned values:";
for (name in vals)
strOut += "\n" + name + " = " + vals[name];
alert(strOut);
}
</SCRIPT>

На прилагаемом компакт-диске можно найти полный набор модальных налоговых окон различных типов.

Размер и положение диалогового окна

Размер и положение диалогового окна определяются четырьмя свойствами диалогового окна:

• dialogLeft
• dialogTop
• dialogWidth
• dialogHeight

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

Создание просматриваемых модальных диалоговых окон

Метод, используемый для преодоления невозможности навигации в модальных диалоговых окнах, заключается в отображении квазидокумента. Этот квазидокумент содержит элемент IFrame, который ссылается на действительный отображаемый документ. Элемент IFrame создает полный экземпляр браузера. Несмотря на то что этот метод работает, следует соблюдать меры предосторожности при его использовании. Модальные диалоговые окна не предназначены для навигации в Web.

Элементы окна

При создании нового окна с помощью метода open или showModalDialog вы можете определить набор элементов окна, используя необязательный третий параметр features. Строка features представляет собой список значений которые включают или отключают различные возможности окна. Эти значения управляют визуальным отображением окна. В приведенных табл. 5.3 и 5.4 перечислены элементы, доступные для данных двух методов.

Таблица 5.3. Элементы метода open

Метод window.showModalDialog поддерживает немного отличный набор элементов для индивидуальной настройки модального диалогового окна.

Таблица 5.4. Элементы метода window.showModalDialog

На рис. 5.1 показано окно, созданное с помощью метода open.

Рис. 5.1. Элементы окна, созданного с использованием метода open

Строка features

Определение списка пар feature-value, разделенных точками с запятой, позволяет создать строку features:

"[feature = value [; feature2 = value2… [; featuren = valuen]]]"

Для создания окна, которое не отображает некоторых элементов браузера, используйте следующий код:

window.open("example.htm", "example",
"toolbar=no; location=no; menubar=no; status=no; directories=no");

Для элементов, которые могут быть отключены или включены, вы можете определить значения yes или no или 1 или 0, или просто указать параметр для включения элемента. Например, все приведенные ниже операторы включают элемент menubar (строка меню):

window.open("...", "...", "menubar=yes");
window.open("...", "...", "menubar=1");
window.open("...", "...", "menubar");

Примечание: Если необходимо обеспечить совместимость с существующими версиями браузеров, используйте разделенный запятыми список для строки features метода open. Точки с запятой в качестве разделительного знака поддерживаются только в internet Explorer 4.0.

Значения по умолчанию

Если вы создаете окно с помощью метода open, но не указываете строку features, то автоматически будет указан набор параметров по умолчанию. Если вы указываете строку features, в которой определены не все элементы, то неопределенные элементы примут значения в соответствии с установками в исходном окне. Метод showModalDialog не поддерживает элементы браузера, такие как панели инструментов и строки меню, поскольку модальные диалоговые окна сами по себе не являются экземплярами браузера. По умолчанию в модальных диалоговых окнах отображается только строка заголовка, строка состояния, окно Close (Закрыть) и значок помощи.

Элементы модальных диалоговых окон и CSS

Многие элементы модального диалогового окна тесно связаны со свойствами CSS, поскольку модальное диалоговое окно, в отличие от немодальных окон браузера, отображает одиночный документ, переход из которого в другие документы невозможен.

Свойства font, font-size, font-weight, font-family, font-variant и font-style поддерживают те же значения, что и свойства CSS с такими же именами. Эти свойства, а также положение и размеры диалогового окна прямо соответствуют свойствам таблицы стилей, и их значения не могут быть изменены таблицей стилей документа.

Например, размер диалогового окна может быть установлен страницей при помощи метода showModalDialog или HTML-документом, отображаемым в диалоговом окне. Страница, которая вызывает метод showModalDialog, может использовать строку features для определения размера. HTML-документ, отображаемый в диалоговом окне, может определить размер, используя свойства CSS width и height. Эти значения заменяют, установки метода showModalDialog. Для создания диалогового окна, которое определяет свой собственный размер равным 10 на 10 em, используйте таблицу стилей, показанную на приведенной ниже HTML-странице:

<HTML>
<HEAD>
<TITLE>10-by-10-Em Dialog Box</TITLE>
<STYLE TYPE="text/css">
HTML {width:10em; height:10em}
</STYLE>
</HEAD>
<BODY>
Данный пример создает диалоговое окно размером 10-by-lO-em.
Em представляет собой относительную единицу, которая легко адаптируется к различным размерам шрифтов. .
</BODY>
</HTML>

Свойство opener

Окно, созданное другим окном, может обратиться к нему посредством свойства opener. В Internet Explorer 4.0 это свойство допускает операции чтения/записи и может быть повторно назначено окну высшего уровня. В Internet Explorer 3.0 это свойство было предназначено только для чтения. Свойство opener используется для вызова методов, представленных окном которые создают новый экземпляр браузера.

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

Окна, созданные с помощью кода, могут быть закрыты с использованием объектной модели. По соображениям безопасности пользователь должен подтвердить закрытие исходного окна браузера. Метод close используется для закрытия связанного с ним окна:

window.close(); // Закрывает текущее окно.

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

// Проверка того, что окно myWindow закрыто.
if (!myWindow.closed) {
// Код, который выполняется, если окно открыто.
}
else {
// Код обработчика ошибок
}

Создание диспетчера окон

Когда документ в браузере создает новое окно, единственной ссылкой на него является переменная, возвращаемая методом open. Объектная модель не содержит семейство открытых окон. Подобное семейство было бы полезно, например, если бы вы захотели выяснить существование определенного окна или изменить адрес URL окна.

Приведенный ниже код показывает, как реализовать собственное семейство windows, содержащее ссылки на все окна, которые были открыты текущим документом. Данное семейство аналогично семейству frames, которое обсуждается в следующем разделе. Семейство windows доступно только в течение времени жизни документа и автоматически удаляется, когда пользователь переходит на другую страницу.

Следующий пример определяет метод, названный createWindow, который открывает окно и добавляет ссылку на семейство windows. С помощью этого семейства можно определять, открыто ли окно, изменять его содержание или закрывать окно. Когда документ выгружается, то все окна, созданные с использованием метода createWindow, автоматически закрываются.

<HTML>
<HEAD>
<TITLE>Window Manager</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// Создание массива для хранения ссылок на дочерние окна. /* Каждый член данного массива будет окном объекта, созданного
ниже с использованием метода createWindow. */
var windows = new Array();
function newWindow(url, wname) {
// Конструктор для окна
/* Данная функция может быть вызвана только функцией
createWindow, которая приведена ниже. */
var features = "";
if (null != arguments[2])
features = arguments[2];
return window.open(url, wname, features);
}
function createWindow(url, wname) {
// Добавление окна в семейство окон.
var features = arguments[2] == null ? "" : arguments[2];
windows[wname] = new newWindow(url, wname, features);
}
function closeWindows() {
// Закрытие всех окон, открытых методом addWindow. /* Для закрытия окна вызывается его метод close. */ /* Данная функция может быть вызвана в ходе события onunload
для автоматического закрытия всех открытых окон. */
for (w in windows)
if (!windows[w].closed)
windows[w].close();
}
/* Приведенные ниже две функции демонстрируют использование методов createWindow и closeWindows. . */
function listWindows() {
// Перечисление окон с указанием их текущих состояний.
var swin = "Window List\n";
for (w in windows)
swin += w + ":" +
((windows[w].closed) ? "Closed" : "Open") + "\n";
alert(swin);
}
function openSampleWindows() {
// Открывает два окна.
createWindow("closeme.htm", "ChildWindow1");
createWindow("closeme.htm", "ChildWindow2");
}
</SCRIPT>
</HEAD>
<BODY ONUNLOAD="closeWindows();">
<H1>Window Manager</H1>
<FORM>
<INPUT TYPE=BUTTON ONCLICK="openSampleWindows();"
VALUE="Add Windows">
<INPUT TYPE=BUTTON ONCLICK="listWindows();"
VALUE="List Windows">
<INPUT TYPE=BUTTON ONCLICK="closeWindows();"
VALUE="Close Windows">
</FORM>
</BODY>
</HTML>

Данный диспетчер окон работает хорошо для именованных окон. Если вы создаете несколько окон, используя метод createWindow, но передаете пустые строки для их имен, то диспетчер окон отслеживает только последнее созданное окно.

Манипулирование наборами фреймов

Наборы фреймов поддерживались еще в Netscape Navigator 2.0 и Microsoft Internet Explorer 3.0. Наборы фреймов (frameset) представляют собой особый тип HTML-документа, который используется для разделения окна браузера на области, которые называются фреймами. Наборы фреймов наиболее широко используются для отображения меню или других механизмов навигации в документах и фреймах или для представления статического заголовка страницы.

На рис. 5.2 показан набор фреймов, который отображает четыре панели: панель с оглавлением и информационными панелями вверху и внизу данной панели, а также панель с текстом документа. Таблица с содержанием документа содержит список ссылок, представляющих документы. Когда вы щелкаете по ссылке, в правом фрейме отображается соответствующий документ.

Рис. 5.2. Окно, содержащее три фрейма в левой части и фрейм с документом справа

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

Создание наборов фреймов

Первым шагом при создании набора фреймов является определение расположения фреймов. Набор фреймов может разделить экран на ряд прямоугольных областей, каждая из которых содержит свой собственный HTML-документ.

Тег <PRAMESET> заменяет тег <BODY> в HTML-документе и используется для разделения экрана. Внутри элемента Frameset находятся теги <FRAME>, которые указывают область для каждого документа. Наборы фреймов могут быть вложены один в другой для упрощения разделения экрана на горизонтальные и вертикальные столбцы.

Примечание: Internet Explorer 3.0 не делает различия между концепциями набора фреймов и документом, содержание которого находится в теле документа (body contents), несмотря на то, что данные концепции должны были быть независимыми. В Internet Explorer 3.0, если страница состоит из набора фреймов и тела документа, то тело документа воспроизводится как фрейм позади набора фреймов. Эта модель больше не поддерживается в Internet Explorer 4.0 и никогда не поддерживалась в Netscape Navigator, и поэтому ее не следует применять.

Синтаксис набора фреймов приведен ниже:

<FRAMESET COLS="..." ROWS="..."> <FRAME SRC="..." NAME="..."> </FRAMESET> 

Атрибуты COLS и ROWS принимают в качестве аргументов список значений, разделенных запятыми, которые используются для разделения экрана. Так, приведенный ниже набор фреймов разделяет экран на четыре равные области:

<FRAMESET COLS="50%, 50%" ROWS="50%, 50%">
</FRAMESET>

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

Для заполнения областей используется тег <FRAME>. Число фреймов должно быть равно числу строк, умноженному на число столбцов. В данном примере набор фреймов должен состоять из четырех фреймов:

<FRAMESET COLS="50%, 50%" ROWS="50%, 50%">
<FRAME SRC="f1.htm">
<FRAME SRC="f2.htm">
<FRAME SRC="f3.htm">
<FRAME SRC="f4.htm">
</FRAMESET>

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

Рис. 5.3. Набор четырех фреймов

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

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

<FRAMESET COLS="50%, 50%">
<FRAME SRC="f1.htm">
<FRAME SRC="f2.htm">
<FRAME SRC="hidden.htm">
</FRAMESET>

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

Наборы фреймов также могут быть вложены друг в друга с помощью двух методов:

• Одиночная ячейка может быть разделена на дополнительные строки или столбцы путем определения другого набора фреймов.

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

Для использования первого метода в примере на рис. 5.3 с целью разделения нижнего правого фрейма на два столбца создайте приведенный ниже код HTML:

<FRAMESET COLS="50%, 50%" ROWS="50%, 50%">
<FRAME SRC="f1.htm" NAME=f1>
<FRAME SRC="f2.htm" NAME=f2>
<FRAME SRC="f3.htm" NAME=f3>
<FRAMESET COLS="50%, 50%">
<FRAME SRC="f4.htm" NAME=f4>
<FRAME SRC="f5.htm" NAME=f5>
</FRAMESET>
</FRAMESET>

В данном примере любой из документов (начиная с fl.htm и заканчивая f5.htm) может содержать другой набор фреймов, который в свою очередь делит экран. Если документ внутри фрейма содержит другой фрейм, то вы можете изменить число и расположение фреймов путем изменения данного документа. Этот метод будет рассмотрен более подробно в разделе "Установка целей фреймов" ниже в данной главе. Используя вложенные фреймы, можно легко изменить расположение фреймов.

Для создания только строк или столбцов требуется указать только атрибут ROWS или COLS. Также возможно более сложное управление расположением элементов на странице путем использования процентных значений атрибутов ROWS и COLS. Значения для каждой строки или столбца могут представлять значение в пикселах, а вместо цифры может быть указана звездочка (*). Звездочка устанавливает использование всего оставшегося пространства. Для создания набора фреймов, в котором ширина первого столбца составляет 50 процентов ширины экрана, ширина второго столбца равна одной трети оставшегося пространства и ширина третьего столбца равна оставшейся области экрана, используйте приведенный ниже код:

<FRAMESET COLS="50%, *, 2*">
<FRAME SRC="f1.htm" NAME=f1>
<FRAME SRC="f2.htm" NAME=f2>
<FRAME SRC="f3.htm" NAME=f3>
</FRAMESET>

Размеры фрейма и полос прокрутки

По умолчанию размер фреймов может быть изменен и поддерживается прокрутка фреймов. Для фиксации размера и отключения возможности прокручивания фрейма могут быть добавлены два атрибута документа: NORESIZE и SCROLLING. Атрибут NORESIZE фиксирует текущий размер фрейма, a SCROLLING имеет три действительных значения, которые перечислены в табл. 5.5.

Таблица 5.5. Значения атрибута SCROLLING

Приведенный ниже код демонстрирует несколько вариантов применения атрибутов SCROLLING и NORESIZE:

<FRAMESET COLS="50%, 50%" ROWS="50%, 50%">
<FRAME SRC="f1.htm" NORESIZE>
<FRAME SRC="f2.htm" SCROLLING="yes">
<FRAME SRC="f3.htm" SCROLLING="no" NORESIZE>
<FRAME SRC="f4.htm" SCROLLING="auto">
</FRAMESET>

Фреймы без границ

В Internet Explorer 3.0 и Netscape Navigator 3.0 была введена возможное создания фреймов без границ (borderless frames) (то есть, фреймов без окружающих их рамок. - Прим. перев.). Фреймы без границ отображают многочисленные страницы без границ и каких-либо элементов, разделяющих экран, что позволяет легко создавать привлекательные страницы.

Атрибут BORDER определяет толщину границы. Фреймы без границ создаются путем установки значения 0 для атрибута BORDER тега <FRAMESET>, что равносильно созданию прозрачных границ.

В наборе свойств доступны три дополнительных свойства, которые обеспечивают большую управляемость границами. Атрибут FRAMEBORDER определяет, будет ли граница нарисована как объемный фрейм. Атрибут FRAMESPACING подобно атрибуту BORDER, устанавливает толщину границы. Полученная в результате толщина границы будет равна значению FRAMESPACING плюс толщина объемных границ, если они присутствуют. Атрибут BORDERCOLOR определяет цвет границы фрейма.

Поддержка браузеров низкого уровня

Браузеры, не поддерживающие наборы фреймов, при попытке загрузки страницы отображают пустой документ. Для вывода содержания страницы с помощью устаревшего клиента в HTML 4.0 определен тег <NOFRAMES>. Элемент NoFrames может содержать действительное содержание тела документа, которое будет проигнорировано браузерами, поддерживающими фреймы, и будет отображено примитивными браузерами. Данный метод работает, поскольку браузеры низкого уровня не понимают теги <FRAMESET>, <FRAME> и <NOFRAMES>. Они просто проигнорируют их и отобразят содержание элемента NoFrames. Браузеры, поддерживающие наборы фреймов, проигнорируют содержание элемента NoFrames. Пример документа с набором фреймов приведен ниже:

<HTML>
<HEAD>
<TITLE>Frameset Example</TITLE>
</HEAD>
<FRAMESET COLS="50%, 50%" ROWS="50%, 50%">
<FRAME SRC="f1.htm">
<FRAME SRC="f2.htm">
<FRAME SRC="f3.htm">
<FRAME SRC="f4.htm">
</FRAMESET>
<NOFRAMES>
Для просмотра данного узла, пожалуйста, используйте браузер, который поддерживает фреймы.
click <A HREF="noframes.htm">here</A> for a no-frames version.
</NOFRAMES>
</HTML>

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

Элемент NoFrames также может быть использован в теле документа. Например, набор фреймов может предоставлять панель перехода обратно в главный документ, но браузеры, которые не поддерживают фреймы, не будут отображать панель при выводе на экран содержания главного документа. Вы можете ввести более простую панель перехода в элемент NoFrames главного документа, как показано в приведенном ниже примере:

<HTML>
<HEAD>
<TITLE>Navigation Example</TITLE>
</HEAD>
<BODY>
<NOFRAMES>
<!-- Данное содержание отображается только в браузерах, не поддерживающих фреймы. Добавьте ниже дополнительную панель перехода. -->
<P>
<A HREF="home.htm">Home Page</A>
<A HREF="search.htm">Search Page</A>
</P>
</NOFRAMES>
Здесь должно находиться содержание документа.
<NOFRAMES>
<!-- Добавьте сообщение в конце документа. -->
<P>
Для просмотра данной страницы следует использовать браузер, поддерживающий фреймы.
</NOFRAMES>
</BODY>
</HTML>

Данный метод работает корректно в Internet Explorer версий 3.0 и более поздних. Метод не работает в Netscape Navigator, поскольку Navigator в настоящее время отображает содержание элемента NoFrames.

Встроенные фреймы

Браузер Internet Explorer версии 3.0 и более поздних версий может создавать встроенные фреймы (inline frames). Встроенный фрейм находится внутри тела документа, а не внутри набора фреймов, и предоставляет возможность одиночному документу содержать другие независимые документы на странице. Встроенный фрейм функционально сходен с фреймом в наборе фреймов. Он поддерживает назначение целей (targeting) и разрешает пользователям перемешаться внутри фрейма независимо от родительского документа.

Использование встроенного фрейма сходно с внедрением объекта с помощью тега <OBJECT>. Приведенные ниже две инструкции HTML внедряют документ:

<IFRAME SRC="banner.htm" WIDTH=500 HEIGHT=500></IFRAME>
<OBJECT TYPE="text/html" DATA="banner.htm" WIDTH=500 HEIGHT=500>
</OBJECT>

Главное отличие между двумя данными инструкциями заключается в том, что элемент IFrame может впоследствии быть установлен в качестве цели подобно фрейму в наборе фреймов. В целом, элемент IFrame должен быть использован для определения пользовательского интерфейса, обеспечивающего возможности навигации на странице, а объект Object должен быть использован для включения содержания документа. Оба элемента внедряют файл banner.htm в документ, но только элемент IFrame обеспечивает возможности навигации внутри собственного окна.

Элемент IFrame представляет собой контейнер, содержание которого игнорируется другими браузерами, поддерживающими IFrame. Поэтому вы можете определить альтернативное содержание элемента IFrame для браузеров, которые не поддерживают IFrame, аналогично тому, как вы используете элемент NoFrames для браузеров, не поддерживающих фреймы.

<IFRAME SRC="banner.htm" WIDTH=500 HEIGHT=500>
<P>Ваш браузер не поддерживает элемент IFrame.</P>
</IFRAME>

Добавление элементов сценариев

Сценарии в документе с набором фреймов должны быть определены в элементе Head документа до первого элемента Frameset, как показано в следующем примере. Браузеры могут игнорировать сценарии, которые появляются внутри или после элемента Frameset.

<HTML>
<HEAD>
<TITLE>With Framesets, Script Location Is Important</TITLE>
<SCRIPT LANGUAGE="JavaScript">
/* Данный сценарий будет выполняться, поскольку он находится перед элементом Frameset. */ </SCRIPT>
</HEAD>
<FRAMESET ROWS="*">
<FRAME SRC="foo.htm">
<SCRIPT LANGUAGE="JavaScript">
// Сценарии, указанные после тега <FRAMESET>, будут игнорироваться.
</SCRIPT>
</FRAMESET>
</HTML>

Установка фреймов в качестве целей перехода

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

Ниже приведен пример простого набора фреймов, который разделяет экран на два фрейма:

<HTML>
<HEAD>
<TITLE>Main Document</TITLE>
<BASE TARGET="fContent"> </HEAD>
<FRAMESET COLS="300, *">
<FRAME SRC="menu.htm" NAME="fMenu">
<FRAME SRC="contents.htm" NAME="fContent">
</FRAMESET>
</HTML>

Файл contents.htm, показанный ниже, отображается в правом столбце и может самостоятельно представлять другой набор фреймов. В процессе навигации в правом фрейме может отображаться новый документ или новое определение набора фреймов.

<HTML>
<HEAD>
<TITLE>Contents</TITLE> </HEAD>
<FRAMESET ROWS="20%, *">
<FRAME SRC="welcome.htm">
<FRAME SRC="home.htm">
</FRAMESET>
</HTML>

Поиск целевого фрейма

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

Если определены стандартные ключевые слова, то документ отображается в данном фрейме. Например, _ТОР отображает новый документ в окне, _PARENT заменяет родительский фрейм, a _SELF заменяет текущий документ. Для цели с другим именем все фреймы, встроенные фреймы и окна просматриваются в следующем порядке:

1. Текущий фрейм.

2. Все подфреймы текущего фрейма, затем все подфреймы данных подфреймов и так далее.

3. Прямой предок текущего окна и затем его подфреймы, подфреймы его подфреймов и так далее.

4. Следующий прямой предок и все его подфреймы и так далее по цепочке до окна высшего уровня и его подфреймов.

5. Именованные окна, открытые текущим окном в произвольном порядке.

Если совпадения не найдены, то открывается новое окно в качестве цели для URL.

Сценарии для наборов фреймов

Обращение к наборам фреймов и написание для них сценариев осуществляется посредством семейства frames, которое содержит все фреймы, определенные набором фреймов. Семейство frames в окне содержит все дочерние фреймы документа. Все фреймы являются объектами window, которые представляют ту же объектную модель, что и одиночные окна.

Семейство frames создается на основе иерархии документа, а не видимой иерархии. Поэтому видимая иерархия не может быть явно определена с использованием самого семейства. Например, данный HTML-документ разделяет экран на две строки: верхняя строка является одиночным фреймом, а нижняя разделена на два столбца.

<HTML>
<HEAD>
<TITLE> Вложенные фреймы в документе </TITLE>
</HEAD>
<FRAMESET ROWS="50%, 50%">
<FRAME SRC="top.htm" NAME="topRow">
<FRAMESET COLS="50%, 50%">
<FRAME SRC="bleft.htm" NAME="bottomLeft">
<FRAME SRC="bright.htm" NAME="bottomRight">
</FRAMESET>
</FRAMESET>
</HTML>

Семейство frames, представленное для окна, содержащего приведенный выше документ, располагает фреймы в следующем порядке:

topRow
bottomLeft
bottomRight 

Несмотря на то что фреймы вложены друг в друга, семейство frames устанавливает их в исходном порядке.

Если один из документов, на который ссылается набор фреймов, содержит другой набор фреймов, то образуется иерархия документов. Каждый документ определяет свои собственные дочерние элементы и каждое дочернее окно может также определить собственные дочерние окна. Предположим, что файл top.htm является документом с набором фреймов:

<HTML>
<HEAD>
<TITLE>Nested Document That Is a Frameset</TITLE>
</HEAD>
<FRAMESET COLS="40%, *">
<FRAME SRC=tleft.htm NAME="nestLeft">
<FRAME SRC=tright.htm NAME="nestRight">
</FRAMESET>
</HTML>

Семейства теперь расположены в иерархическом порядке, поскольку документ в фрейме topRow содержит вложенный набор фреймов, который в свою очередь содержит два дополнительных документа:

topRow
nestLeft
nestRight bottomLeft
bottomRight 

Семейство документа высшего уровня включает те же элементы. Тем не менее обращение к высшему фрейму возвращает вложенное семейство:

top.frames.length // 3 фрейма: topRow, bottomLeft, bottomRight
top.frames["topRow"].frames.length // 2 фрейма: nestLeft and nestRight
top.frames["topRow"].frames["nestLeft"].length // 0: дочерние фреймы
// nestLeft отсутствуют

Фреймы как объекты window

Каждый фрейм в семействе frames в действительности представляет собой объект window. Набор свойств, представленных в каждом фрейме, совпадает с набором, представленным окном высшего уровня. Свойства window, которые обсуждаются в остальной части данного раздела, являются поэтому свойствами фреймов.

Динамический HTML представляет три связанных свойства для ссылки на окно: self, parent и top. Свойство self всегда возвращает текущее окно. Свойство parent возвращает родительское окно в иерархии набора фреймов. Свойство top возвращает ссылку на окно высшего уровня в браузере.

Если окно является окном высшего уровня, то свойство parent возвращает текущее окно. Поэтому работа цикла, который просматривает иерархию набора фреймов, прерывается, когда текущее окно становится родительским окном, а не когда родительское окно становится равным null. Приведенный ниже код просматривает иерархию набора фреймов, пока не достигнет окна высшего уровня:

var fParent = self;
while (fParent != fParent.parent) {
fParent = fParent.parent;
}

Подобный код определяет, является ли текущее окно окном высшего уровня в иерархии объектов:

if (self == top) {
// Высшее окно. Введите здесь необходимый код.
}
else {
// Документ находится в наборе фреймов. Введите соответствующий код.
}

Неявное семейство frames

Хотя семейство frames представлено в объекте window, оно не является в действительности отдельным свойством. Напротив, объект frames и объект window представляют один объект. Наличие свойства frames упрощает код и делает его более ясным.

Недостаток четкого разделения между объектами весьма важен. В JavaScript когда свойство добавляется в объект window, оно также доступно посредством семейства frames и наоборот. Поэтому ссылка на свойство frames не требуется. Например, приведенные ниже пары инструкций эквивалентны:

// Определение числа фреймов.
window.length;
window.frames.length;
// Обращение к фрейму topRow.
window.topRow;
window.frames.topRow;
// Обращение к первому фрейму в семействе.
window[0];
window.frames[0];

Хотя отсутствует четкое различие между объектами, рекомендуется использовать семейство frames, когда вы явно ссылаетесь на связанные с фреймами члены, и свойство window при использовании свойства в текущем окне. Данная методика помогает документировать код.

Определение содержания фрейма

Содержание фрейма обычно определяется отдельным HTML-документом. Атрибут SRC фрейма может содержать код HTML. Преимущество помещения HTML в тег <FRAME> заключается в том, что фреймы заголовков могут быть определены как встроенные, как показано в следующем примере, что не требует внешнего URL. Ценность данного метода заключается в том, что уменьшает число циклов обмена информацией с сервером.

<HTML>
<HEAD>
<TITLE> Фрейм, генерируемый JavaScript </TITLE>
</HEAD>
<FRAMESET ROWS="80, *">
<FRAME SRC="JavaScript:'<H1>Welcome to My Home Page</H1>'" NAME="header">
<FRAME SRC="content.htm">
</FRAMESET>
</HTML>

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

В главе 9 показано, как использовать JavaScript для атрибута HREF ссылки. В противном случае, префикс VBScript: может определить содержание с помощью VBScript.

Анализ иерархии набора фреймов

Приведенный ниже код демонстрирует иерархию документа для любого набора фреймов. Данный код просматривает иерархию окна в определенном экземпляре браузера и выводит на экран иерархию контейнеров документа.

<HTML>
<HEAD>
<TITLE> Иерархия наборов фреймов </TITLE>
</HEAD>
<FRAMESET ROWS="60, *">
<FRAME SRC="frames.htm">
<FRAME SRC="anyDocument.htm" NAME="hierarchy">
</FRAMESET>
</HTML>

Данный файл представляет собой набор фреймов высшего уровня. В нижнем фрейме отображается документ, который должен быть проанализирован (файл anyDocument.htm, но вы можете указать любой документ по своему желанию). В верхнем фрейме отображается документ frames.htm, перечисленный следующим в списке, который состоит из кнопки и кода JavaScript. При нажатии кнопки программа создает отдельное окно, показывающее иерархию документа. Данный пример находится на прилагаемом компакт-диске.

<HTML>
<HEAD>
<TITLE> Генератор иерархии наборов фреймов </TITLE>
<SCRIPT LANGUAGE="JavaScript">
function drillFrames(doc, w) { doc.write("<TR><TD>Name: " + w.name + "<BR>");
doc.write("Location: " + w.location.href);
for (var i = 0; i < w.frames.length; i++) {
doc.write("<TABLE BORDER WIDTH=100% CELLPADDING=3>");
drillFrames(doc, w.frames[i]);
doc.write("</TABLE>");
} doc.write("</TD></TR>");
}
function outputFrames() {
var doc = window.open().document;
doc.open();
doc.write("<H1>Frameset Hierarchy</H1>");
doc.write("<TABLE BORDER CELLPADDING=3>");
// Start at the sibling frame in the hierarchy.
drillFrames(doc, parent.hierarchy);
doc.write("</TABLE>");
doc.close();
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE=BUTTON VALUE="Walk" ONCLICK="outputFrames();">
</FORM>
</BODY>
</HTML>

Определение расположения набора фреймов

Семейство frames представляет иерархию документа в браузере, но не выводит параметры физического разделения экрана в каждом наборе фреймов. Эта информация представлена объектом document. Объект document имеет семейство all, которое представляет каждый элемент в документе. Используя семейство all, вы можете определить порядок фреймов и наборов фреймов.

Объект document u семейство all обсуждаются в части II. Программирование элемента Frameset обсуждается в главе 9.

Все ли фреймы загружены

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

Кроме того, документ с набором фреймов представляет свойство readyState, которое может быть использовано для выяснения текущего состояния каждого фрейма и окна. Пока происходит загрузка фреймов, значение данного свойства равно interactive, а после загрузки всех фреймов его значение изменяется на complete. Свойство readyState может быть использовано как флаг для проверки того, что все фреймы были загружены.

Свойство readyState и связанное событие onreadystatechange подробно обсуждаются в главе 6.

Моделирование браузера

Ниже показано, как создать очень простой браузер, используя наборы фреймов. Данный HTML-документ устанавливает набор фреймов:

<HTML>
<TITLE> Демонстрация браузера на основе набора фреймов </TITLE>
<FRAMESET ROWS="60, *">
<FRAME NAME="browser" SRC="browser.htm">
<FRAME NAME="content" SRC="">
</FRAMESET>
</HTML>

Следующий документ указывает файл browser.htm, который воспроизводится в верхнем фрейме. Верхний фрейм содержит кнопки Go (Переход) и Refresh (Обновить) и текстовое окно, в котором пользователь вводит адрес URL. Кнопки Forward (Вперед) и Back (Назад) добавлены для перемещения по списку истории. Данные кнопки моделируют те функциональные возможности, которые доступны на панели инструментов большинства браузеров:

<HTML>
<HEAD>
<TITLE> Панель браузера </TITLE>
</HEAD>
<BODY>
<FORM NAME="BrowseBar" ONSUBMIT="parent.content.location.href =
this.txtGo.value; return false;">
<INPUT TYPE=BUTTON VALUE="Back"
ONCLICK="parent.content.history.back();">
<INPUT TYPE=BUTTON VALUE="Forward"
ONCLICK="parent.content.history.forward();">
<INPUT TYPE=BUTTON VALUE="Refresh"
ONCLICK="parent.content.location.reload();">
<INPUT TYPE=SUBMIT VALUE="Go">
<INPUT TYPE=TEXT NAME="txtGo">
</FORM>
</BODY>
</HTML>

Примечание: Ограничения безопасности браузера могут воспрепятствовать работе кнопок Forward (Вперед) и Back (Назад), если включаемые документы находятся в разных доменах.

В данном примере элементы управления помещены в элемент Form, для гарантии совместимости с Netscape Navigator версий 2.0 и 3.0, который не может воспроизводить элементы управления, отсутствующие в элементах Form. Internet Explorer версий 3.0 и более поздних не имеет данного ограничения и может отображать и программировать элементы управления, даже если они находятся за пределами форм.

Особые случаи событий

Используя указатели функций JavaScript можно назначить обработчик событий в одном фрейме или браузере для свойства события в другом фрейме. Этот мощный метод позволяет совместно использовать программу в разных документах, однако при этом также возрастает сложность кода.

Объект event тесно связан с окном, в котором было сгенерировано событие. Поэтому даже если обработчик событий может находиться в документе другого фрейма, должен быть использован объект event фрейма, который сгенерировал событие. Это требует просмотра иерархии объектов от элемента, который сгенерировал событие до объекта event.

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

Метод назначения функции является наиболее эффективным способом захвата событий в другом фрейме. При этом не требуется создание дополнительного обработчика функции. Однако данный метод предоставляет доступ только к тому элементу, который сгенерировал событие:

<SCRIPT LANGUAGE="JavaScript">
function doClick() {
/* Это обработчик событий нажатия кнопки документа в окне window2. */
/* Доступ к объекту события не может осуществлен непосредственно с использованием объекта события текущего окна.- Напротив, следует обратиться к объекту события окна window2. Указатель this передается в документ, который сгенерировал событие. */
with (this.document.parentWindow.event) {
// Использование объекта события.
}
}
var window2 = window.open("sample.htm");
/* Связывает обработчик событий окна window2 с функцией
doClick в данном документе. * */
window2.body.onclick = doClick;
</SCRIPT>

Программирование событий, возникающих между фреймами, является основой примера Event Tutor в главе 3. Работа Event Tutor основывается на динамическом связывании событий выбранного документа и выводе строк в текущем окне.