При создании многооконного интерфейса пользователь помимо возможностей HTML,
связанных с применением фреймовай структуры, может использовать для этой цели также
методы объекта window.
Объект window является
родительским объектом для всех других объектов. Это наивысший объект в иерархии
JavaScript, представляющий собой открытое окно браузера. Вместо наименования window можно также использовать его синоним - self.
Часть методов объекта window в JavaScript была рассмотрена ранее:
setTimeout(), clearTimeout(), setInterval() и clearInterval(), рассматривалась в "Движения объектов в JavaScript" на Web-странице.
Кроме того объект window в JavaScript поддерживает следующие
методы:
open() - создает новое окно. Синтаксис метода: aNewWindow = window.open("URL","windowName" [,"windowFeatures"]). Имя переменной (aNewWindow) используется для ссылки на свойства и
методы вновь созданного окна. Параметр URL указывает на URL-адрес Web-страницы,
которая может быть загружена в это окно. Параметр windowName используется для задания имени
окна в атрибуте TARGET тэга <А>. Параметры windowFeatures задают характеристики
оконного интерфейса:
toolbar - выводит стандартную панель инструментов, включая кнопки Forward,
Back, перехода к домашней странице и печати;
menubar - выводит меню в верхней части экрана, включающее пункты File, Edit
и View;
location - выводит строку URL;
status - выводит строку состояния (статуса) внизу окна;
scrollbar - добавляет линейки прокрутки, если документ не помещается в окне
браузера;
resizable - позволяет пользователю изменять размер окна;
width - указывает первоначальную ширину окна в пикселях;
height - указывает первоначальную высоту окна в пикселях.
Если не один параметр из списка windowFeatures не указан, используются значения
по умолчанию. В этом случае создается окно, подобное окну браузера. Если же
указан хотя бы один параметр из списка windowFeatures, все неуказанные
параметры исключаются.
close() - закрывает текущее окно (если окно было открыто методом open(), то
оно закрывается сразу, если же оно было открыто пользователем, сначала появляется
окно предупреждения, предлагающее пользователю сделать выбор);
moveTo(X,Y) - перемещает окно в точку экрана, заданную координатами
X и Y;
moveBy(X,Y) - перемещает окно на X пикселей вправо и на Y пикселей
вниз (для перемещения влево и вверх необходимо задать отрицательные числа);
scrollTo(X,Y) - провкручивает окно до заданных в пискселях координат
X и Y;
scrollBy(X,Y) - провкручивает окно на X пикселей вправо и на Y пикселей
вниз (для прокрутки влево и вверх необходимо задать отрицательные числа);
resizeTo(X,Y) - изменяет размер окна до X пикселей по ширине и до Y
пикселей по высоте;
resizeBy(X,Y) - изменяет размер окна на X пикселей по ширине и на Y
пикселей по высоте;
navigate(URL-адрес) - загружает в окно Web-страницу, адрес которой передан
в качестве параметра;
print() - печатает содержимое окна или фрейма на принтере;
focus() - устанавливает фокус для окна, перемещая окно на первый план;
blur() - удаляет фокус с окна, перемещая окно на заднийй план;
Объект window в JavaScript имеет
следующие свойства:
closed - возвращает значение true/false, указывающее на то, закрыто ли окно;
defaultStatus - значение по умолчанию поля статуса окна (свойство доступно
для записи и считывания);
document - ссылка на объект document данного окна;
frames - ссылка на массив фреймов данного окна (включая плавающие фреймы
IFRAME);
length - указывает число фреймов, содержащихся в окне (включая плавающие
фреймы);
history - ссылка на объект history, который содержит URL-адреса Web-страниц,
загружаемых в данное окно;
location - устанавливает или возвращает URL-адрес текущей Web-страницы,
содержащийся в объекте location;
2 Создание окон средствами JavaScript
Использование методов и свойств объекта window показано в примере № 2, где
создаются два окна.
<HTML> <HEAD> <TITLE>Работа с окнами средствами JavaScript;/TITLE> <SCRIPT> moveTo(100,100); // Координаты resizeTo(640,480); // и размер окна браузера status="MAIN WINDOW"; function help() // Формирование окна подсказки { helpW=window.open("","","width=200,height=100"); helpW.moveTo(80,80) helpW.document.write("<SPAN STYLE='color:blue; font:4mm'>"+ "<SPAN STYLE='margin-left:1.8cm;color:red;font:bold'> HELP: </SPAN><BR>"+ "Вызвать окно подсказки - F1 <BR>"+ "Открыть окно - левый ALT <BR>"+ "Закрыть окно - правый ALT </SPAN>"); event.returnValue=false; setTimeout("helpW.close()",5000); } function createWindow() // Формирование нового окна { newW=window.open("js_pr4-3.htm","new", "toolbar,location, scrollbars=yes, width=400, height=250, status, resizable"); newW.moveTo(300,300); newW.document.write("<BODY onContextmenu='self.status=\"NEW WINDOW\";"+ "alert(window.name);return false'"+ "onKeydown='if (event.altKey && !event.altLeft) self.close()'>"+ "<H1 style='font:15mm;color=FF00ff;text-align:center'>Новое окно</H1>"+ "<IMG SRC='fish.gif'>"); } </SCRIPT> </HEAD> <BODY onKeydown="if(event.altLeft) createWindow();" onLoad="help()" onHelp="help()"> <H1 ALIGN=center>Основное окно</H1> <A HREF="js_3-3.htm" TARGET="new">окно</A> </BODY> </HTML>
Первое окно helpW - окно подсказки формирует
функция help(), которая вызывается как при загрузке
Web-страницы, так и по нажатию клавиши "F1". В этом окне сообщается о том,
как получить подсказку, а также, как открыть и закрыть новое окно. Через 5
секунд окно helpW закрывается.
Второе окно newW -
новое окно формирует функция createWindow(), которая
вызывается по нажатию клавиши "левый ALT". Это окно в отличие от окна подсказки,
для которого задан лишь его размер, имеет все элементы (за исключением панели
меню), которые имеет окно браузера. Размеры окон helpW и окно newW и их расположение на экране выбраны
с учетом удобства работы пользователя.
С помощью метода newW.document.write() динамически формируется HTML-
документ, реализующий в новом окне, такие элементы, как заголовок и изображение.
Также для тэга <BODY> указываются обработчики событий:
по нажатию правой клавиши мышки;
по нажатию клавиши клавиатуры "правый ALT".
По первому событию с помощью метода alert() в новом окне выводится имя этого
окна ("new"), а в поле статуса нового окна появляется сообщение "NEW WINDOW".
По второму событию новое окно закрывается.
Кроме того, при щелчке по ссылке в главном окне
происходит загрузка в новое окно Web-страницы js_3-3.htm ("Изменение свойств
объектов").
