Использование Объектов Navigator'а

Глава 11
Использование Объектов Navigator'а

В этой главе рассматриваются объекты JavaScript в Navigator'е и объясняется, как их использовать. Объекты клиентского JavaScript иногда называются объектами Navigator'а, чтобы отличить их от серверных или пользовательских объектов.

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

Иерархия объектов Navigator'а

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

Отражение JavaScript и вывод HTML

Ключевые объекты Navigator'а

Массивы объектов Navigator'а

Использование метода write

Иерархия объектов Navigator'а

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

Использование метода write

Метод write объекта document отображает вывод в Navigator'е. "Зачем?", спросите Вы, "ведь это уже делает HTML". Но в скрипте можно сделать то, чего не может обычный HTML. Например, Вы можете вывести текст на основе выполнения условия или аргументов переменной. Поэтому write это один из наиболее часто используемых методов JavaScript.

Метод write принимает любое количество строковых аргументов, которые могут быть строковыми литералами или переменными. Вы можете также использовать операцию конкатенации строк (+) для создания одной строки из нескольких при помощи оператора write.

Вот скрипт, генерирующий динамический HTML с помощью JavaScript:

<HEAD>
<SCRIPT>
<!--- Скрываем скрипт от старых браузеров

// Эта функция отображает горизонтальную линию специфицированной ширины
function bar(widthPct) {
   document.write("<HR ALIGN='left' WIDTH=" + widthPct + "%>");
}// Эта функция отображает заголовок текста специфицированного уровня и некоторый текст
function output(headLevel, headText, text) {
   document.write("<H", headLevel, ">", headText, "</H",
      headLevel, "><P>", text)
}
// конец скрытия скрипта -->
</SCRIPT>
</HEAD><BODY>
<SCRIPT>

</SCRIPT>
<P> This is some standard HTML, unlike the above that is generated.
</BODY>

В HEAD этого документа определены две функции:

bar, которая отображает горизонтальную линию HTML, имеющую ширину, специфицированную аргументом функции.

output, которая отображает заголовок HTML того уровня, который специфицирован первым аргументом, и текст параграфа, специфицированный третьим аргументом.

Затем в тэге BODY документа эти две функции вызываются и дают на выходе:

Ключевые объекты Navigator'а

В этом разделе рассмотрены некоторые наиболее используемые объекты Navigator'а: window, Frame, document, Form, location, history и navigator. Дополнительно об этих объектах см. книгу

Клиентский JavaScript.

Справочник.

Массивы объектов Navigator'а

Некоторые объекты Navigator'а имеют свойства, значения которых являются массивами. Эти массивы используются для хранения информации, когда Вы заранее не знаете, сколько будет значений. В таблице показано, какие свойства каких объектов имеют массивы в качестве значений.

Объект document

Каждая страница имеет единственный объект document.

Поскольку его методы write и writeln генерируют HTML, объект document является одним из наиболее используемых объектов Navigator'а. О методах write и writeln см. раздел "Использование Метода write".

Объект document имеет несколько свойств, отражающих цвет фона, текста и гиперссылок страницы: bgColor, fgColor, linkColor, alinkColor и vlinkColor. Часто используются lastModified, дата последнего изменения страницы, referrer, предыдущий URL, посещённый клиентом, и URL, URL документа. Свойство cookie даёт возможность устанавливать и получать значения кук; см. также "Использование Кук".

Объект document является предком всех объектов Anchor, Applet, Area, Form, Image, Layer, Link и Plugin страницы.

Пользователи могут печатать и сохранять сгенерированный HTML, используя команды меню File Navigator'а (JavaScript1.1 и позднее).

Объект Form

Каждая форма документа создаёт объект Form. Поскольку в документе может быть не одна форма, Form-объекты хранятся в массиве forms. Первая форма (самая верхняя на странице) это forms[0], вторая - forms[1], и так далее. Помимо обращения к форме по имени, Вы можете обратиться к первой (например) форме так:

document.forms[0]

Другие элементы формы, такие как текстовые поля, радио-кнопки и т.д., хранятся в массиве elements. Вы можете обратиться к первому элементу (независимо от его вида) первой формы так:

document.forms[0].elements[0]

Каждый элемент формы имеет свойство form, которое является ссылкой на родительскую форму элемента. Это свойство используется в основном в обработчиках событий, где может понадобиться обратиться к другому элементу на текущей форме. В следующем примере форма myForm содержит Text-объект и кнопку. Если пользователь щёлкает по кнопке, значением Text-объекта становится имя формы. Обработчик onClick кнопки использует this.form для обращения к родительской форме, myForm.

Объект history

Объект history содержит список строк, представляющих URL'ы, посещённые клиентом. Вы можете получить текущее, предыдущее и следующее вхождение из history через использование свойств current, next и previous объекта history. Вы получить доступ к другим значениям в history, используя массив history. Этот массив содержит вхождение для каждого вхождения history в порядке исходного кода; каждое вхождение массива это строка, содержащая URL.

Можно также перенаправить клиент к любому вхождению списка history методом go. Например, следующий код загружает URL, находящийся на две позиции назад в списке history клиента.

history.go(-2)

Следующий код перезагружает текущую страницу:

history.go(0)

Список history отображается в меню Go Navigator'а.

Объект location

Объект location имеет свойства на основе текущего URL. Например, свойство hostname это сервер и имя домена сервера - хоста текущего документа.

Объект location имеет два метода:

reload - форсирует перезагрузку текущего документа окна.

replace - загружает специфицированный URL поверх текущего вхождения списка history.

Объект navigator

Объект navigator содержит информацию о версии используемого Navigator'а. Например, свойство appName специфицирует имя браузера, а свойство appVersion специфицирует версию Navigator'а.

Объект navigator имеет три метода:

javaEnabled специфицирует, включен ли Java

preference позволяет использовать маркированный скрипт для получения различных пользовательских настроек (JavaScript1.2 и позднее)

taintEnabled специфицирует, включено ли разрушение данных/tainting (только JavaScript 1.1)

Объекты window и Frame

Объект window является "родительским" объектом для всех объектов в Navigator'е. Вы можете создать несколько окон в приложении JavaScript. Объект Frame определяется тэгом FRAME в документе FRAMESET. Frame-объекты имеют те же свойства и методы, что и объекты window, и отличаются только способом отображения.

Объект window имеет несколько широко используемых методов, в том числе:

open и close: открывают и закрывают окно браузера; Вы можете специфицировать размер окна, его содержимое и наличие панели кнопок/button bar, адресной строки/location field и других "chrome"-атрибутов.

alert - Выводит диалоговое окно Alert с сообщением.

confirm - Выводит диалоговое окно Confirm с кнопками OK и Cancel.

prompt - Выводит диалоговое окно Prompt с текстовым полем для ввода значения.blur и focus - Убирают и передают фокус окну.

scrollTo - Прокручивает окно на специфицированные координаты.

setInterval - Вычисляет выражение или вызывает функцию многократно по истечении специфицированного периода времени.

setTimeout - Вычисляет выражение или вызывает функцию однократно по истечении специфицированного периода времени.

window имеет также несколько свойств, которые могут устанавливаются Вами, таких как location и status.

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

location = "http://home.netscape.com"

Свойство status можно использовать для показа сообщения в статусной строке/status bar внизу клиентского окна; дополнительно см. "Использование Статусной Строки".

Об окнах и фрэймах см. дополнительно Главу 12 "Использование Окон и Фрэймов". В данной книге не рассматривается полный набор методов и свойств объекта window. Полный список см. в книге

Клиентский JavaScript.

Справочник.

Отражение JavaScript и вывод HTML

В JavaScript значения свойств объекта основаны на содержимом Вашего HTML-документа, что иногда называется reflection/отражением, поскольку значения свойств отражают HTML. Для понимания отражения JavaScript важно разобраться, как Navigator выполняет layout\вывод - процесс трансформации Navigator'ом HTML-тэгов в графическое отображение на экране Вашего компьютера.

Обычно отображение выполняется в Navigator'е последовательно: Navigator стартует от верха HTML-файла и проходит до конца документа (вниз), отображая вывод на экране по мере прохождения документа. Из-за такого выполнения "сверху вниз", JavaScript отражает только HTML, который обнаружен. Например, Вы определяете форму и два элемента для ввода текста:

Эти элементы формы отражаются как объекты JavaScript, которые могут использоваться Вами после определения формы: document.statform.userName и document.statform.Age. Например, Вы можете отобразить значения этих объектов в скрипте после определения формы:

<SCRIPT>
document.write(document.statform.userName.value)
document.write(document.statform.Age.value)
</SCRIPT>

Однако, если Вы попытаетесь сделать это до того как форма определена, (выше определения формы на HTML-странице), Вы можете получить ошибку, поскольку объект пока ещё не существует в Navigator'е.

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

<TITLE>My JavaScript Page</TITLE>

Он отражается в JavaScript как значение свойства document.title. После того как Navigator отобразил этот заголовок в строке заголовка окна Navigator'а, Вы не можете изменить это значение в JavaScript. Если у Вас имеется такой скрипт далее на странице, он не изменит значение document.title, не повлияет на вид страницы или вызовет генерацию ошибки.

document.title = "The New Improved JavaScript Page"

Из этого правила есть несколько важных исключений: Вы можете динамически обновлять значения элементов. Например, следующий скрипт определяет текстовое поле, которое первоначально выводит строку "Starting Value." При каждом щелчке по кнопке Вы добавляете текст "...Updated!" к этому значению.

Это простой пример обновления элемента формы после завершения вывода документа.

Используя обработчики событий, Вы можете также изменять некоторые другие свойства после завершения вывода документа, такие как document.bgColor.

Печать вывода

Navigator версии 3.0 печатает вывод, созданный в JavaScript. Для распечатки вывода, пользователь выбирает Print из меню File Navigator'а. Navigator2.0 не распечатывает вывод, создаваемый JavaScript.

Если Вы распечатываете страницу, содержащую слои/layers (Navigator 4.0 и позднее), каждый слой печатается отдельно на той же странице. Например, если три слоя перекрывают друг друга в браузере, распечатанная страница показывает каждый слой отдельно.

Если Вы выбрали Page Source из меню View Navigator'а или View Frame Source из контекстного меню (правой клавишей мыши), web-браузер отображает содержимое HTML-файла со сгенерированным HTML. Если Вы хотите просмотреть исходный HTML со скриптами генерирующими HTML (с методами document.write и document.writeln), не используйте меню Page Source и View Frame Source. Тогда используйте протокол view-source:. Например, предположим, файл file://c|/test.html содержит такой текст:

<HTML>
<BODY>
Hello,
<SCRIPT>document.write(" there.")</SCRIPT>
</BODY>
</HTML>

При загрузке этого URL браузер выведет:

Hello, there.

Если выбрать Page Source из меню View, браузер выведет:

<HTML>
<BODY>
Hello,
there.
</BODY>
</HTML>

Если загрузить view-source:file://c|/test.html, браузер выведет:

<HTML>
<BODY>
Hello,
<SCRIPT>document.write(" there.")</SCRIPT>
</BODY>
</HTML>

Иерархия объектов Navigator'а

Рисунок 11.1 Иерархия объектов Navigator'а

В данной иерархии "потомки" объектов являются их свойствами. Например, форма form1 является объектом, а также свойством объекта document, и к ней обращаются document.form1.

Список всех объектов, их свойств, методов и обработчиков событий см. в книге

Клиентский JavaScript.

Справочник.

На каждой странице имеются следующие объекты:

navigator: имеет свойства - имя и версию используемого Navigator'а, MIME-типы, поддерживаемые клиентом и plug-in'ы, установленные на клиенте.

window: объект верхнего уровня/top-level; имеет свойства, которые применяются ко всему окну. Каждое "дочернее окно" в документе с фрэймами также является window-объектом.

document: имеет свойства на основе содержимого документа, такого как заголовок, цвет фона, гиперссылки и формы.

location: имеет свойства на основе текущего URL.

history: имеет свойства, представляющие URL'ы, которые клиент запрашивал ранее.

В зависимости от содержимого, документ может содержать и другие объекты. Например, каждая форма (определённая тэгом FORM) в документе имеет соответствующий объект Form.

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

Главе 12 "Использование Окон и Фрэймов".

Например, следующий код обращается к свойству value текстового поля text1 на форме myform в текущем документе:

document.myform.text1.value

Если объект находится на форме, Вы обязаны включать имя формы при обращении к этому объекту, даже если объект не обязан быть на форме. Например, изображения не обязаны находиться на форме. Следующий код обращается к изображению, находящемуся на форме:

document.imageForm.aircraft.src='f15e.gif'

Следующий код обращается к изображению, которое не находится на форме:

document.aircraft.src='f15e.gif'

Вывод, созданный с использованием функций JavaScript

Рисунок 11.2 Вывод, созданный с использованием функций JavaScript

Следующая строка создаёт вывод функции bar:

document.write("<HR ALIGN='left' WIDTH=", widthPct, "%>")

Заметьте, что в определении bar использованы знаки одинарных кавычек вместо двойных. Вы обязаны делать так при обозначении закавыченной строки внутри строкового литерала. Затем вызов bar с аргументом 25 производит вывод, эквивалентный следующему HTML:

write сопутствующий метод writeln, который добавляет последовательность символов "новая строка" (возврат каретки или возврат каретки + прогон строки, в зависимости от платформы) в конец своего вывода. Поскольку HTML обычно игнорирует символы новой строки, разницы между write и writeln нет, за исключением положения внутри таких тэгов, как PRE.

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

Свойства объекта document зависят от содержимого. То есть они создаются на основе HTML документа. Например, document имеет свойства для каждой формы и каждого якоря /anchor документа.

Предположим, Вы создаёте страницу simple.html, которая содержит следующий HTML:

<HEAD><TITLE>A Simple Document</TITLE>
<SCRIPT>

function update(form) {
alert("Form being updated")
}
</SCRIPT>

</HEAD><BODY>
<FORM NAME="myform" ACTION="foo.cgi" METHOD="get" >Enter a value:
<INPUT TYPE="text" NAME="text1" VALUE="blahblah" SIZE=20 >

Check if you want:
<INPUT TYPE="checkbox" NAME="Check1" CHECKED

onClick="update(this.form)"> Option #1
<P>

</FORM>
</BODY>

На основе этого HTML базовые объекты могут иметь свойства вроде тех, которые показаны в таблице.

Пример значений свойств объектов

Таблица 11.1 Пример значений свойств объектов

Свойство

Значение

document.title	"A Simple Document"
document.fgColor	#000000
document.bgColor	#ffffff
location.href	"http://www.royalairways.com/samples/simple.html"
history.length	7

Обратите внимание, что значение свойства document.title отражает значение, специфицированное тэгом TITLE. Значения свойств document.fgColor (цвет текста) и document.bgColor (цвет фона) не были установлены в HTML, поэтому они базируются на значениях по умолчанию, специфицированных в диалоговом окне Preferences (в меню Edit Navigator'а).

Поскольку в документе имеется форма, имеется также объект Form под названием myform (на основе атрибута NAME формы), который имеет дочерние объекты для checkbox и для button. Каждый из этих объектов имеет имя на основе атрибута NAME тэга HTML, определяющего этот объект:

document.myform - форма

document.myform.Check1 - checkbox/переключатель

document.myform.button1 - button/кнопка

Form-объект myform имеет другие свойства на основе атрибутов тэга FORM, например,

action это http://www.royalairways.com/samples/mycgi.cgi - URL по которому форма отправляется.

method это "get" - на основе значения атрибута METHOD.

length равен 3, поскольку на форме размещены три элемента.

Объект Form имеет дочерние объекты button1 и text1, соответствующие кнопке и текстовому полю на форме. Эти объекты имеют свои собственные свойства на основе значений своих HTML-атрибутов, например,

button1.value имеет значение "Press Me"

button1.name имеет значение "Button1"

text1.value имеет значение "blahblah"

text1.name имеет значение "text1"

Вы обращаетесь к этим свойствам, используя из полное именование, например, document.myform.button1.value. Это полное имя, основанное на иерархии объектов Navigator'а, начинается с document, затем идёт имя формы, myform, затем - имя элемента, button1, и, наконец, имя свойства.

Предопределённые массивы JavaScript

Таблица 11.2 Предопределённые массивы JavaScript

ОбъектСвойство

Описание

document	anchors	Отражает тэги <A> документа, содержащие атрибут NAME, в порядке расположения в исходном коде.
applets	Отражает тэги <APPLET> в порядке расположения в исходном коде.
embeds	Отражает тэги <EMBED> в порядке расположения в исходном коде.
forms	Отражает тэги <FORM> в порядке расположения в исходном коде.
images	Отражает тэги <IMG> в порядке расположения в исходном коде (изображения, созданные конструктором Image(), не включаются в массив images).
layers	Отражает тэги <LAYER> и <ILAYER> в порядке расположения в исходном коде.
links	Отражает тэги <AREAHREF="...">, <A HREF="">, и объекты Link, созданные методом link, в порядке расположения в исходном коде.
Form	elements	Отражает элементы формы (такие как объекты Checkbox, Radio и Text) в порядке расположения в исходном коде.
Function	arguments	Отражает аргументы функции.
navigator	mimeTypes	Отражает все MIME-типы, поддерживаемые клиентом (внутренне, через вспомогательные приложения или через plug-in'ы).
plugins	Отражает все plug-in'ы, установленные на клиенте, в порядке расположения в исходном коде.
select	options	Отражает опции объекта Select (тэги <OPTION>) в порядке расположения в исходном коде.
window	frames	Отражает все тэги <FRAME> в окне, содержащем тэг <FRAMESET>, в порядке расположения в исходном коде.
history	Отражает вхождения history окна.

Вы можете индексировать порядковыми числами или по именам (если определены). Например, если второй тэг <FORM> имеет в атрибуте NAME значение "myForm", Вы можете обратиться к форме document.forms[1], или document.forms["myForm"] или document.myForm.

Например, определён следующий элемент:

Если Вы хотите обратиться к этому элементу формы по имени, можно специфицировать document.forms["Comments"].

Все предопределённые массивы JavaScript имеют свойство length, которое указывает количество элементов массива. Например, чтобы получить количество форм в документе, используйте свойство length: document.forms.length.

JavaScript 1.0.

Вы обязаны индексировать массивы порядковыми числами, например document.forms[0].

Использование Окон и Фрэймов

Глава 12
Использование Окон и Фрэймов

JavaScript позволяет создавать окна и фрэймы для представления HTML-содержимого. Объект window является объектом верхнего уровня в иерархии клиентского JavaScript; объект Frame похож на объект window, но соответствует "подокну" и создаётся тэгом FRAME в документе с тэгом FRAMESET.

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

Открытие и закрытие окон

Использование фрэймов

Обращение к окнам и фрэймам

Навигация по окнам и фрэймам

ПРИМЕЧАНИЕ: Эта книга не содержит информации о слоях/layers, которые были введены в JavaScript 1.2.

О слоях см. Dynamic HTML in Netscape Communicator.

Использование фрэймов

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

На рисунке показано окно с тремя фрэймами. Левый фрэйм называется listFrame; правый - contentFrame; нижний - navigateFrame.

Навигация по окнам и фрэймам

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

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

Вы перемещаетесь по фрэймам так же, как по окнам.

Обновление фрэйма

Вы может обносить содержимое фрэйма с помощью свойства location, установив URL.

Например, Вы используете frameset, описанный в Примере 2 в предыдущем разделе. Если Вы хотите, чтобы пользователи могли закрывать фрэйм, содержащий алфавитный список артистов или список по категориям (во фрэйме listFrame) и вид только названий произведений, отсортированных по музыкантам (в данный момент - во фрэйме contentFrame), Вы можете добавить следующую функцию в navigateFrame:

Когда пользователь щёлкает по этой кнопке, файл artists.html загружается во фрэйм upperFrame; фрэймы listFrame и contentFrame закрываются и больше не существуют.

Обращение к фрэймам и навигация по ним

Поскольку фрэймы являются типом окна, Вы обращаетесь к фрэймам и перемещаетесь по ним, как по окнам. См. "Обращение к Окнам и Фрэймам" и "Навигация по Окнам и Фрэймам".

Обращение к окнам и фрэймам

Имя, используемое Вами для обращения к окну, зависит того, ссылаетесь ли Вы на свойства, методы и обработчики окна, или ссылаетесь на окно как на цель\target при отправке формы или для гиперссылок.

Поскольку объект window это объект верхнего уровня в иерархии клиентского JavaScript, он работает исключительно как контейнер объектов в любом окне.

Обращение к окну при отправке формы или из гиперссылки

Вы используете имя окна (не переменную окна) при обращении к окну как к цели/target при отправке формы или из гиперссылки (атрибут TARGET тэга FORM или A). Специфицируемое окно это окно, в которое загружается ссылка, или, для формы, окно, где выводится ответ сервера.

Следующий пример создаёт гиперссылку на второе окно. Имеется кнопка, которая открывает пустое окно window2, гиперссылка, загружающая файл doc2.html во вновь открытое окно, и кнопка, закрывающая окно.

<FORM>
<INPUT TYPE="button" VALUE="Open Second Window"
onClick="msgWindow=window.open('','window2',
'resizable=no,width=200,height=200')">
<P>
<A HREF="doc2.html" TARGET="window2"> Load a file into window2</A>
<P>
<INPUT TYPE="button" VALUE="Close Second Window"
onClick="msgWindow.close()">
</FORM>

Если пользователь выбирает сначала кнопку Open Second Window, а затем гиперссылку, Communicator открывает небольшое окно, специфицированное в кнопке, а затем загружает в него файл doc2.html.

Если пользователь выбирает гиперссылку до создания окна window2 с помощью кнопки, Communicator создаёт window2 с параметрами по умолчанию и загружает doc2.html в это окно. Если пользователь позднее щёлкает кнопку Open Second Window button, Communicator изменяет параметры уже открытого окна на специфицированные в обработчике события.

Обращение к свойствам, методам и обработчикам

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

self или window: self и window

являются синонимами текущего окна, и Вы можете использовать их по выбору для обращения к текущему окну. Например, Вы можете закрыть текущее окно, вызвав window.close()

или self.close().

top или parent: top и parent также являются синонимами, которые могут использоваться как имена окна.

top можно использовать для любого окна; оно ссылается на самое верхнее окно Navigator'а.

parent можно использовать для фрэйма; оно ссылается на окно с тэгом frameset, содержащее данный фрэйм. Например, для фрэйма frame1, оператор parent.frame2.document.bgColor="teal" изменяет фон фрэйма frame2 на teal, где frame2 это дочерний фрэйм текущего frameset.

Имя переменной окна: переменная окна это переменная, специфицированная при открытии окна. Например, msgWindow.close() закрывает окно msgWindow.

Отсутствие имени окна: поскольку существование текущего окна подразумевается, Вы не обязаны обращаться к окну по имени, когда вызываете его методы и присваиваете значения свойств. Например, close() закрывает текущее окно. Однако, когда Вы открываете или закрываете окно обработчиком события, Вы обязаны специфицировать window.open() или window.close() вместо простого open() или close(). Из-за области видимости static-объектов в JavaScript, вызов close() без специфицирования имени объекта эквивалентен document.close().

Дополнительно об этих техниках см. объект window в книге

Клиентский JavaScript.

Справочник.

Открытие и закрытие окон

Окно создаётся автоматически при запуске Navigator'а; Вы можете открыть другое окно, выбрав New и Navigator Window в меню File. Вы можете закрыть окно, выбрав Close или Exit в меню File. Вы можете также открывать и закрывать окна программно с помощью JavaScript.

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

Можно создать окно методом open. Следующий оператор создаёт окно msgWindow, которое отображает содержимое файла sesame.html:

msgWindow=window.open("sesame.html")

Следующий оператор создаёт окно homeWindow, которое отображает домашнюю страницу Netscape:

homeWindow=window.open("http://home.netscape.com")

Окно может иметь два имени. Следующий оператор создаёт окно с двумя именами. Первое имя, msgWindow, это переменная, которая ссылается на объект window. Этот объект содержит информацию о свойствах, методах и контейнерах окна. При создании окна Вы можете также предоставить второе имя, в данном случае - displayWindow, для обращения к окну как к цели/target при отправке формы или при переходе по гиперссылке.

msgWindow=window.open("sesame.html","displayWindow")

Имя окна не требуется при создании окна. Но окно обязано иметь имя, если Вы хотите обратиться к нему из другого окна.

При открытии окна Вы можете специфицировать атрибуты, такие как высота/height и ширина/width, панель утилит/toolbar, адресная строка/location field или полосы прокрутки/scrollbars. Следующий оператор создаёт окно без панели утилит, но с полосами прокрутки:

msgWindow=window.open
("sesame.html","displayWindow","toolbar=no,scrollbars=yes")

Об именах окно см. дополнительно "Обращение к окнам и фрэймам". Об атрибутах окна см. метод open объекта window в книге Клиентский JavaScript. Справочник.

Следующий оператор создаёт frameset, показанный

Следующий оператор создаёт frameset, показанный ранее на рисунке:
<FRAMESET ROWS="90%,10%">
<FRAMESET COLS="30%,70%">
      <FRAME SRC=category.html NAME="listFrame">
      <FRAME SRC=titles.html NAME="contentFrame">
   </FRAMESET>
   <FRAME SRC=navigate.html NAME="navigateFrame">
</FRAMESET>
На следующем рисунке показана иерархия фрэймов. Все три фрэйма имеют общего родителя, хотя два фрэйма определены в отдельном frameset. Это из-за того, что родителем фрэйма является родительское окно, и фрэйм, а не frameset, определяет окно.

обращение к текущему окну.

Следующий оператор ссылается на форму musicForm в текущем окне. Оператор выводит диалог alert, если переключатель/checkbox отмечен.

if (document.musicForm.checkbox1.checked) {
alert('The checkbox on the musicForm is checked!')}

передача фокуса объекту в другом окне.

Следующий оператор передаёт фокус Text-объекту city в окне checkboxWin. Поскольку Text-объект получает фокус, окно также получает фокус и становится активным. В примере имеется также оператор, создающий окно checkboxWin.

checkboxWin=window.open("doc2.html")
...
checkboxWin.document.musicForm.city.focus()

Альтернативно Вы можете создать окно

Альтернативно Вы можете создать окно типа вышеприведённого, в котором два верхних фрэйма имеют родителя отдельно от navigateFrame. Набор фрэймов/frameset верхнего уровня может быть определён так:
<FRAMESET ROWS="90%,10%">
<FRAME SRC=muskel3.html NAME="upperFrame">
   <FRAME SRC=navigate.html NAME="navigateFrame">
</FRAMESET>
Файл muskel3.html содержит каркас верхних фрэймов и определяет следующий frameset:
<FRAMESET COLS="30%,70%">
   <FRAME SRC=category.html NAME="listFrame">
   <FRAME SRC=titles.html NAME="contentFrame">
</FRAMESET>
На следующем рисунке показана иерархия фрэймов.
upperFrame и navigateFrame имеют общего родителя - окно top.
listFrame и contentFrame - имеют общего родителя upperFrame.

обращение к другому окну.

Следующие операторы ссылаются на форму musicForm, находящуюся в окне checkboxWin. Операторы определяют, выбран ли checkbox, выбирают checkbox, определяют, выбрана ли вторая опция объекта Select, и выбирают вторую опцию объекта Select. Даже если значения объектов изменяются в другом окне (checkboxWin), текущее окно остаётся активным: отметка переключателя и выбор selection-опции не передают фокус окну.

// определить, отмечен ли checkbox
if (checkboxWin.document.musicForm.checkbox2.checked) {
alert('The checkbox on the musicForm in checkboxWin is checked!')}// отметить checkbox
checkboxWin.document.musicForm.checkbox2.checked=true// определить, выбрана ли опция объекта Select
if (checkboxWin.document.musicForm.musicTypes.options[1].selected)
{alert('Option 1 is selected!')}// выбрать опцию объекта Select
checkboxWin.document.musicForm.musicTypes.selectedIndex=1

обращение к фрэйму в другом окне.

Следующий оператор обращается к фрэйму frame2, который находится в окне window2. Оператор изменяет цвет фона frame2 на violet. Имя фрэйма, frame2, обязано быть специфицировано в тэге FRAMESET, создающем набор фрэймов.

window2.frame2.document.bgColor="violet"

иерархии фрэймов

Рисунок 12.2 Пример иерархии фрэймов

Вы можете обратится к фрэймам, используя массив frames так, как показано ниже. (О массиве frames см. объект window в книге Клиентский JavaScript. Справочник.)

listFrame is top.frames[0]

contentFrame is top.frames[1]

navigateFrame is top.frames[2]

Ещё один пример иерархии фрэймов

Рисунок 12.3 Ещё один пример иерархии фрэймов

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

upperFrame это top.frames[0]

navigateFrame это top.frames[1]

listFrame это upperFrame.frames[0] или top.frames[0].frames[0]

contentFrame это upperFrame.frames[1] или top.frames[0].frames[1]

Пример создания фрэймов см. в разделе "Создание и Обновление Фрэймов: Пример".

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

Вы создаёте фрэйм тэгом FRAMESET в HTML-документе; единственное предназначение этого тэга - определить фрэймы на странице.

Создание и обновление фрэймов: пример

Если Вы создаёте набор фрэймов/frameset из предыдущего раздела для представления информации музыкального клуба, фрэймы и их HTML-файлы могут иметь следующее содержимое:

category.html, во фрэйме listFrame, содержит список музыкантов, отсортированный по категориям.

titles.html, во фрэйме contentFrame, содержит алфавитный список музыкантов и произведений каждого.

navigate.html, во фрэйме navigateFrame, содержит гипертекстовые ссылки для выбора представления музыкантов в списке listFrame: по алфавиту или по категориям. Также в это файле имеется ссылка на описание музыкантов.Дополнительный файл, alphabet.html, содержит список музыкантов, отсортированный по алфавиту. Этот файл выводится во фрэйме listFrame, если пользователь щёлкает по гиперссылке для отображения в алфавитном порядке.

Файл category.html (список по категориям) содержит код типа такого:

<B>Music Club Artists</B>
<P><B>Jazz</B>
<LI><A HREF=titles.html#0001 TARGET="contentFrame">Toshiko Akiyoshi</A>
<LI><A HREF=titles.html#0006 TARGET="contentFrame">John Coltrane</A>
<LI><A HREF=titles.html#0007 TARGET="contentFrame">Miles Davis</A>
<LI><A HREF=titles.html#0010 TARGET="contentFrame">Dexter Gordon</A><P><B>Soul</B>
<LI><A HREF=titles.html#0003 TARGET="contentFrame">Betty Carter</A>
<LI><A HREF=titles.html#0004 TARGET="contentFrame">Ray Charles</A>
...

Файл alphabet.html (алфавитный список) содержит код типа такого:

<B>Music Club Artists</B>
<LI><A HREF=titles.html#0001 TARGET="contentFrame">Toshiko Akiyoshi</A>
<LI><A HREF=titles.html#0002 TARGET="contentFrame">The Beatles</A>
<LI><A HREF=titles.html#0003 TARGET="contentFrame">Betty Carter</A>
<LI><A HREF=titles.html#0004 TARGET="contentFrame">Ray Charles</A>
...

Файл navigate.html ( ссылки внизу экрана) содержит код типа нижеприведённого. Обратите внимание, что target для файла artists.html это "_parent." Если пользователь щёлкает по гиперссылке, все окно перерисовывается, потому что окно top является родителем для navigateFrame.

<A HREF=alphabet.html TARGET="listFrame"><B>Alphabetical</B></A>
&nbsp&nbsp&nbsp
<A HREF=category.html TARGET="listFrame"><B>By category</B></A>
&nbsp&nbsp&nbsp
<A HREF="artists.html" TARGET="_parent">
<B>Musician Descriptions</B></A>

Файл titles.html (главный файл, отображаемый в правом фрэйме) содержит код типа такого:

<A NAME="0001"><H3>Toshiko Akiyoshi</H3></A>
<P>Interlude<A NAME="0002"><H3>The Beatles</H3></A>
<P>Please Please Me<A NAME="0003"><H3>Betty Carter</H3></A>
<P>Ray Charles and Betty Carter
...

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

Вы можете закрыть окно методом close. Вы не можете закрыть фрэйм, не закрыв родительское окно.

Каждый из следующих операторов закрывает текущее окно:

window.close()
self.close()
close()

Не используйте третью форму, close(), в обработчиках событий. В зависимости от того, как JavaScript вычисляет объект, на который ссылается вызов метода, Вы можете получить в обработчике не тот объект.

Следующий оператор закрывает окно msgWindow:

msgWindow.close()

Дополнительные Статьи

Глава 13
Дополнительные Статьи

В этой главе рассматриваются некоторые специальные понятия и приложения, расширяющие мощь и гибкость JavaScript.

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

Использование JavaScript-URL

Использование клиентских карт изображений

Использование серверных карт изображений

Использование статусной строки

Использование кук

Определение установленных Plug-in'ов

Использование JavaScript-URL

Вам, возможно, уже знакомы стандартные типы URL: http:, ftp:, file: и так далее. В Navigator'е Вы можете использовать также URL типа javascript: для выполнения операторов JavaScript вместо загрузки документа. Вы просто используете строку, начинающуюся с javascript:, в качестве значения атрибута HREF тэгов anchor. Например, Вы можете определить такую гиперссылку для перезагрузки текущей страницы:

<A HREF="javascript:history.go(0)">Reload Now</A>

В общем, Вы можете поместить любой оператор или вызов функции после префикса javascript: в URL.

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

function countJumps() {
parent.p1++
window.location=page1
}

Для вызова этой функции используйте JavaScript-URL в стандартной гиперссылке HTML:

Здесь предполагается, что page1 это строка, представляющая URL.

Если значение выражения, идущего после URL-префикса javascript:, вычисляется в undefined, новый документ не загружается. Если значение вычисляется в определённый тип, значение конвертируется в строку, которая специфицирует источник загружаемого документа.

Использование клиентских карт изображений

Клиентская карта изображений определяется тэгом MAP. Вы можете определить области на изображении, которые являются гиперссылками на различные URL; области могут быть прямоугольными, круглыми и многоугольными.

Вместо стандартных URL Вы можете использовать в клиентских картах JavaScript-URL, например:

Использование кук

Куки Netscape это механизм хранения данных на клиенте в файле cookies.txt. Поскольку HyperText Transport Protocol (HTTP) это бесстатусный/stateless протокол, куки являются способом обслуживания информации в промежутках между клиентскими запросами. В этом разделе обсуждаются основы использования кук/cookies и дан простой пример. Полное описание кук см. в книге

Клиентский JavaScript. Справочник.

Кука это небольшой блок информации, иногда имеющий строк действия и добавляемый в cookie-файл в следующем формате:

name=value;expires=expDate;

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

expDate это дата окончания срока действия в GMT-формате даты:

Wdy, DD-Mon-YY HH:MM:SS GMT

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

Дата-срок действия куки является параметром по выбору/optional, указывающим срок действия куки. Если expDate не специфицирован, кука перестаёт действовать после выхода пользователя из текущей сессии Navigator'а. Navigator обслуживает и запрашивает куку, только если строк действия куки ещё не передан.

О функциях escape и unescape см. книгу Клиентский JavaScript.

Справочник.

Использование кук: пример

Используя cookie-функции, определённы в предыдущем разделе, Вы можете создать простую страницу, которую пользователи могут заполнить для "регистрации" при посещении Вашей страницы. Если они будут повторно посещать Вашу страницу в течение года, они будут получать персональное приветствие.

Вам необходимо определить дополнительно ещё одну функцию в HEAD/шапке документа. Эта функция, register, создаёт куку TheCoolJavaScriptPage и значение, передаваемое ей - в качестве аргумента.

function register(name) {
   var today = new Date()
   var expires = new Date()
   expires.setTime(today.getTime() + 1000*60*60*24*365)
   setCookie("TheCoolJavaScriptPage", name, expires)
}

BODY документа использует getCookie (определённую в предыдущем разделе) для проверки существования куки TheCoolJavaScriptPage и выводит приветствие, если кука имеется. Имеется также форма, которая вызывает register для добавления куки. Обработчик onClick вызывает также history.go(0) для перерисовки страницы.

<BODY>
<H1>Register Your Name with the Cookie-Meister</H1>
<P>
<SCRIPT>
var yourname = getCookie("TheCoolJavaScriptPage")
if (yourname != null)
   document.write("<P>Welcome Back, ", yourname)
else
   document.write("<P>You haven't been here in the last year...")
</SCRIPT><P> Enter your name. When you return to this page within a year, you will be greeted with a personalized greeting.
<BR>
<FORM onSubmit="return false">
Enter your name: <INPUT TYPE="text" NAME="username" SIZE= 10><BR>
<INPUT TYPE="button" value="Register"
   onClick="register(this.form.username.value); history.go(0)">
</FORM>

Использование кук в JavaScript

Свойство document.cookie это строка, содержащая имена и значения всех кук Navigator'а. Вы можете использовать это свойство для работы с куками в JavaScript.

Вот что Вы можете делать с куками:

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

Получить значение куки, задав её имя.

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

// Установить значение куки. Дата окончания действия - не обязательна.
//
function setCookie(name, value, expire) {
document.cookie = name + "=" + escape(value)
+ ((expire == null) ? "" : ("; expires=" + expire.toGMTString()))
}

Обратите внимание на использование функции escape для кодирования специальных символов (точки с запятой, запятой, пробелов) в строке-значении. Эта функция принимает, что имена кук не содержат специальных символов.

Следующая функция возвращает значение куки, задавая имя куки:

function getCookie(Name) {
   var search = Name + "="
   if (document.cookie.length > 0) { // если есть какие-либо куки
      offset = document.cookie.indexOf(search)
      if (offset != -1) { // если кука существует
         offset += search.length
         // установить индекс начала значения
         end = document.cookie.indexOf(";", offset)
         // установить индекс конца значения куки
         if (end == -1)
            end = document.cookie.length
         return unescape(document.cookie.substring(offset, end))
      }
   }
}

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

Использование серверных карт изображений

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

Если Вы щёлкаете по изображению с атрибутом ISMAP, Navigator запрашивает URL в такой форме:

URL?x,y

где URL это документ, специфицированный значением атрибута HREF, а x и y это горизонтальная и вертикальная координаты указателя мыши (в пикселах от верхнего левого угла изображения) во время щелчка. (Изображение "about:logo" встроено в Navigator и отображает логотипом Netscape.)

Запросы карт традиционно отправляются на сервер, где CGI-программа выполняет функцию просмотра базы данных. С помощью клиентского JavaScript, однако, Вы можете просматривать на стороне клиента. Можно использовать свойство search объекта location для разбора координат x и y и выполнения соответствующей акции. Например, у Вас имеется файл img.html со следующим содержимым:

<H1>Click on the image</H1>
<P>
<A HREF="img.html"><IMG SRC="about:logo" BORDER=0 ISMAP></A>
<SCRIPT>
str = location.search
if (str == "")
document.write("<P>No coordinates specified.")
else {
   commaloc = str.indexOf(",") // местонахождение запятой
   document.write("<P>The x value is " + str.substring(1, commaloc))
   document.write("<P>The y value is " +
      str.substring(commaloc+1, str.length))
}
</SCRIPT>

Если Вы щёлкаете по изображению, Navigator перезагружает страницу (поскольку атрибут HREF специфицирует тот же самый документ), добавляя в URL координаты x и y щелчка мыши. Операторы блока else отображают затем координаты x и y. На практике Вы можете перенаправлять на другую страницу (устанавливая location) или выполнять какое-нибудь другое действие на основе значений x и y.

Использование статусной строки

Вы можете использовать два свойства объекта window, status и defaultStatus, для отображения сообщений в статусной строке Navigator'а в нижней части окна. Navigator обычно использует status bar для вывода таких сообщений, как "Contacting Host..." и "Document: Done." Сообщение defaultStatus появляется, если в статусной строке больше ничего нет. Свойство status отображает временное сообщение, как, например, при проведении указателя мыши над гиперссылкой.

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

defaultStatus = "Some rise, some fall, some climb...to get to Terrapin"

Массив mimeTypes

mimeTypes это массив всех MIME-типов, поддерживаемых клиентом (внутренне - через вспомогательные приложения, или с помощью plug-in'ов). Каждый элемент массива является MimeType-объектом, который имеет свойства своего типа, описание, расширение файла и подключённые plug-in'ы.

Например, в следующей таблице даны значения для вывода JPEG-изображений.

Массив plugins

plugins это массив всех plug-in'ов, установленных в данный момент на клиенте. Каждый элемент массива является Plugin-объектом, имеющим свойства для своего имени, имени файла и описание, а также массив MimeType-объектов для MIME-тпов, поддерживаемых данным plug-in'ом. Пользователь может получить список установленных plug-in'ов, выбрав меню About Plug-ins из Help. Например, в следующей таблице резюмируются значения для plug-in'ов LiveAudio.

Ограничения

Куки имеют следующие ограничения:

всего 300 кук в cookie-файле.

4 Kb на одну куку как сумму имени и значения.

20 кук на сервер или домен (полностью специфицированные хосты и домены рассматриваются как отдельные объекты и имеют ограничение в 20 кук каждый, не суммируясь).

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

Справочник.

Определение установленных Plug-in'ов

Вы можете использовать JavaScript для того чтобы определить, имеется ли у пользователя определённый установленный plug-in; затем Вы можете отобразить данные внедрённого plug-in'а, если plug-in установлен, или вывести какую-нибудь другую информацию (например, рисунок или текст), если не установлен. Вы можете также определить, может ли клиент обрабатывать определённый MIME-тип (Multipart Internet Mail Extension). В этом разделе даны объекты и свойства, необходимые для обработки plug-in'ов и MIME-типов. Более детальную информацию об этих объектах и свойствах см. в книге Клиентский JavaScript.

Справочник.

Объект navigator имеет два свойства для проверки установленных plug-in'ов: массив mimeTypes и массив plugins.

Создание подсказок обработчиками onMouseOver и onMouseOut

По умолчанию, если Вы проводите указатель мыши над гиперссылкой, в статусной строке отображается URL назначения гиперссылки. Вы можете установить status в обработчиках onMouseOut и onMouseOver гиперссылки или области изображения для отображения подсказок в статусной строке. Обработчик события обязан возвращать true для установки значения status. Например,

<A HREF="contents.html"
onMouseOver="window.status='Click to display contents';return true">
Contents
</A>

В это примере подсказка "Click to display contents" выводится в статусной строке, когда указатель мыши проходит над гиперссылкой.

Значения свойства MimeType для рисунков JPEG

Таблица 13.1 Значения свойства MimeType для рисунков JPEG

Выражение

Значение

navigator.mimeTypes["image/jpeg"].type	image/jpeg
navigator.mimeTypes["image/jpeg"].description	JPEG Image
navigator.mimeTypes["image/jpeg"].suffixes	jpeg, jpg, jpe, jfif, pjpeg, pjp
navigator.mimeTypes["image/jpeg"].enabledPlugin	null

Следующий скрипт проверяет, может ли клиент работать с клипами QuickTime:

var myMimetype = navigator.mimeTypes["video/quicktime"]
if (myMimetype)
document.writeln("Click <A HREF='movie.qt'>here</A> to см. a " +
myMimetype.description)
else
document.writeln("Too bad, can't show you any movies.")

Значения свойств Plugin для plug-in'а LiveAudio

Таблица 13.2 Значения свойств Plugin для plug-in'а LiveAudio

Выражение

Значение

navigator.plugins['LiveAudio'].name	LiveAudio
navigator.plugins['LiveAudio'].description	LiveAudio - Netscape Navigator sound playing component
navigator.plugins['LiveAudio'].filename	d:\nettools\netscape\nav30\ Program\plugins\NPAUDIO.DLL
navigator.plugins['LiveAudio'].length	7

В Таблице 13.2 значение свойства length указывает, что navigator.plugins['LiveAudio'] имеет массив объектов MimeType, содержащий 7 элементов. Значения свойств второго элемента этого массива показаны в следующей таблице.