Окна и панели

10.4. Создание окон средствами JavaScript

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

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

Следует отметить, что иерархия свойств JavaScript, доступная разработчику на платформе Mozilla, отличается от интерфейсов XPCOM. Хотя некоторые свойства JavaScript, например window и window.document выглядят идентичными соответствующим компонентам XPCOM, фактически они представляют собой самостоятельные конструкции, созданные для удобства разработчика.

Это существенный момент. У разработчика может сложиться впечатление, что свойства объектной модели приложения (AOM), доступные из программ на JavaScript, в точности совпадают с определенными компонентами Mozilla, но это не всегда так. Окно, в котором отображается документ, является результатом взаимодействия различных компонентов платформы Mozilla. Поэтому лучше рассматривать окно и документ как отдельные системы, которые в некоторых отношениях близки определенным интерфейсам XPCOM, а не точные копии объектов платформы, доступные для JavaScript.

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

Объект window сообщает, что его тип - ChromeWindow. В модели XPCOM нет такого объекта, хотя существует интерфейс nsIDOMChromeWindow. Однако свойства и поведение объекта ChromeWindow в большей степени связаны с интерфейсами nsIJSWindow и nsIDOMWindowInternal.

10.4.1. Окна браузера и окна chrome

Механизмы работы JavaScript с окнами ориентированы, в первую очередь, на традиционного разработчика web-приложений. По умолчанию в качестве нового окна создается окно приложения Navigator. Это окно XUL, элементы которого образуют полноценный web-браузер. Оно содержит панели инструментов, другие элементы интерфейса, некоторые элементы объектной модели DOM 0, панель для отображения web-документа, а также средства защиты информации. Помимо окон браузера, можно создавать окна chrome (простые окна XUL).

Окно браузера предоставляет web-разработчику ограниченный набор интерфейсов. Объекты window и window.document обеспечивают доступ лишь к содержимому, находящемуся в панели отображения документа. Web-разработчик не имеет доступа к содержимому XUL, формирующему интерфейс браузера; элементы интерфейса за пределами отображаемого документа являются для него "черным ящиком". Единственный способ повлиять на эти элементы – несколько параметров, передаваемых методу window.open(). Эти параметры позволяют скрыть некоторые элементы интерфейса у нового окна, например панели инструментов.

С точки зрения разработчика XUL, окно браузера способно либо облегчить ему работу, либо оказаться серьезной помехой. Если разработчик занят незначительным усовершенствованием существующего браузера (например, добавляет к нему оверлеи), окно браузера предоставляет его приложению дополнительную функциональность. Однако при разработке нового приложения вся функциональность браузера может оказаться ненужным грузом. В этом случае несложные меры (например, использование ключа -chrome ) позволяют начать "с чистого окна".

10.4.2. window.open()

Метод window.open() создает новое окно. Этот интерфейс DOM 0 широко используется при разработке web-приложений. В случае Mozilla его сигнатура такова:

target = window.open(URL, name, features);

URL – действительный URI (унифицированный идентификатор ресурса) документа, который должен быть загружен в новое окно. Чтобы открыть пустое окно, можно использовать пустую строку или "about:blank". Кодирование URL необязательно.

name – имя нового окна. Чтобы создать безымянное окно, следует использовать в качестве этого параметра null или "_blank".

features – разделенный запятыми список дополнительных параметров и их значений (строка параметров), определяющих вид и поведение нового окна.

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

Строка параметров применяется часто, однако возможные значения параметров документированы плохо, поэтому ниже приводится их полное описание.

Каждый параметр передается в виде пары имя_параметра=значение, нечувствительной к регистру символов. Значение может быть либо булевым флагом, либо скалярным (числом). Для булева параметра достаточно привести его имя без части =значение или указать "имя_параметра= yes" для того, чтобы присвоить параметру значение "истина". Любое другое значение, присвоенное параметру, означает "ложь". В случае скалярного параметра значение интерпретируется как число, любые символы, следующие за числом, игнорируются. Пары разделяются запятыми, за которыми могут следовать дополнительные пробелы, хотя это может привести к проблемам при отображении HTML-документов в некоторых устаревших браузерах. Следующий пример иллюстрирует эти правила:

"toolbar,location=yes,menubar=no,top=100, 
left=100px,width=100cm"

В этом примере новое окно будет иметь панель инструментов (toolbar) и панель адреса (location bar). Окно будет размещено на расстоянии 100 пикселей от верхнего и левого краев экрана и будет иметь ширину 100 пикселей (символы cm игнорируются).

Строка параметров определяет тип нового окна – будет ли оно окном браузера (создается по умолчанию) или же окном chrome. Для создания последнего необходимо указать в строке параметров:

chrome

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

toolbar location directories personalbar status menubar scrollbars 
extrachrome

Если указанные параметры или вся строка параметров отсутствуют, считается, что они имеют значение по умолчанию - "истина".

Булев параметр extrachrome определяет, будет ли при создании нового окна браузера загружено и отображено содержимое, определяемое пользователем (в классическом браузере – боковая панель или Sidebar). С технической точки зрения этот флаг определяет возможность загрузки оверлеев, определяемых пользователем или разработчиком, и установленных в chrome. Прочие параметры традиционны для web-приложений.

Следующие параметры могут применяться как к окнам браузера, так и к окнам chrome:

resizable dependent modal dialog centerscreen top left height width 
innerHeight innerWidth outerHeight outerWidth screenX screenY

Значением по умолчанию, которое используется, если параметр или вся строка опущены, для параметров resizable и centerscreen является "истина", а для dependent и modal – "ложь". Однако, если текущее окно является модальным, по умолчанию создается модальное окно. Прочие параметры – скалярные и требуют численных значений.

Если новое окно создано с параметром resizable (изменяемый размер), менеджер окон в системах Microsoft Windows или X11 создает стандартные активные области на рамке окна, позволяющие пользователю изменять его размер. Это поведение не зависит от наличия тегов <resizer> в данном окне.

dependent (зависимое) создает дочернее окно – закрытие родительского окна приводит к закрытию вновь созданного. Новое окно всегда открывается поверх родительского (окна, код которого вызывает window.open() ).

При использовании параметра modal созданное окно будет модальным. Родительское окно не может получить фокус ввода до тех пор, пока модальное окно не закрыто.

Если указан параметр dialog, новое окно будет создано с единственной кнопкой на заголовке окна – "Закрыть".

Параметр centerscreen обеспечивает расположение нового окна в центре экрана.

Прочие параметры – скаляры, определяющие размер и положение нового окна. Если из параметров top, left, screenX или screenY указан только один, соответствующий параметр для второго измерения считается равным нулю. Параметры, определяющие положение и размер окон браузера, игнорируются, если был использован атрибут persist, предназначенный для окон классического браузера.

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

titlebar close alwaysLowered z-lock alwaysRaised minimizable

Значение по умолчанию двух первых параметров – "истина", остальных – "ложь". titlebar обеспечивает добавление элементов окна, создаваемых менеджером окон – заголовка и рамки. close обеспечивает создание кнопки "Закрыть" на заголовке окна. Если указаны параметры alwaysLowered или z-lock, окно будет оставаться на заднем плане, получая фокус ввода; если указан параметр alwaysRaised, окно будет оставаться на переднем плане при потере фокуса. Параметр minimizable, по всей видимости, никак не меняет поведение окна.

Если параметр close имеет значение "ложь", пользователь, тем не менее, может закрыть окно средствами менеджера окон. Так, в системе Microsoft Windows в меню окна, которое открывается при щелчке по значку в левой части заголовка окна, сохраняется пункт "Закрыть".

10.4.3. window.openDialog()

Метод window.openDialog() доступен лишь в том случае, если он вызывается из документа, который считается защищенным, например установленного в chrome. Этот метод принимает практически те же аргументы, что и window.open(), и приводит практически к тем же результатам.

target = window.open(URL, name, features, arg1, arg2,...);

arg1, arg2 и т.д. – любые аргументы, допустимые для функций на JavaScript. В новом окне они доступны как элементы массива window.arguments.

Фактически, метод openDialog() эквивалентен методу window.open() с параметрами "chrome=yes, dialog=yes". Это поведение можно переопределить, присвоив какому-либо из этих параметров в явном виде значение "ложь". openDialog() также поддерживает параметр all. Если указать его в строке параметров, новое окно будет создано со всеми элементами, позволяющими пользователю управлять окном. В частности, на заголовке окна будут доступны кнопки "Закрыть" и "Свернуть".

10.4.4. window.content, id="content" и метод loadURI()

В окне классического браузера тегом XUL c id="content" является тег <tabbrowser>, соответствующий панели для отображения web-документа. Этот тег недоступен для web-разработчика, однако весьма полезен для разработчика приложений на основе браузера. Он предоставляет обширную функциональность, которая может быть использована в программах, и заслуживает внимательного изучения при помощи Инспектора DOM.

Если окно является обычным окном браузера на основе XUL, указанный объект <tabbrowser> доступен как свойство content объекта window. Объект, доступный таким образом, не только реализует интерфейс nsIWebNavigation, но и имеет свойство document, указывающее на документ HTML (или XML), который отображается в текущей вкладке браузера.

Интерфейс nsIWebNavigation содержит все методы, необходимые для управления web-документами, отображаемыми в данной панели – их загрузки, перезагрузки и перемещения между ними. Объект AOM <tabbrowser> имеет свойство webNavigation, обеспечивающее доступ к этому интерфейсу. Наиболее полезным методом является loadURI(), который во многом сходен с объектом XmlHttpRequest, речь о котором шла в "Формы и меню" "Формы и меню". Основное различие между ними состоит в том, что XmlHttpRequest просто возвращает ответ на HTTP-запрос в виде данных, в то время как loadURI() отображает полученный документ в окне. Одновременно метод задействует другие функции классического браузера, например, добавляет полученный документ к истории посещений. Сигнатура метода loadURI() такова:

void loadURI(uri, flags, referrer, postData, headers)

uri – URI ресурса, который должен быть отображен.

flags (по умолчанию null ) – набор однобитовых флагов, определяющих поведение при загрузке документа. Отдельные флаги доступны как свойства объекта webNavigation, имеющие префиксы LOAD_FLAGS, и имеют различную семантику – не использовать копию документа из кэша, перезагрузить страницу и т.п.

referrer (по умолчанию null ) – URI ссылающегося документа для включения в HTTP-запрос. С помощью этого аргумента можно изменить значение, передаваемое платформой Mozilla.

postData (по умолчанию null ) – строка данных POST, передаваемая в составе HTTP-запроса.

headers (по умолчанию null ) – строка дополнительных заголовков HTTP-запроса.

Последние два аргумента редко применяются в программах на JavaScript. Если вам необходимо использовать их, предаваемую строку следует преобразовать в объект, соответствующий интерфейсу nsIInputStream. Пример того, как это можно сделать, показан на листинге 10.1.

var str, C, obj, iface, arg;
str = "put data here";
C = Components;
obj = C.classes["@mozilla.org/io/string-input-stream;1"];
iface = C.interfaces.nsIStringInputStream;
arg = obj.createInstance(iface);
arg.setData(str, str.length);
loadURI("page.cgi", null, null, arg, null);