38. Объект Window. Создание диалоговых окон. Открытие и закрытие окон.

Объект Window JavaScript представляет окно браузера или фрейм, в котором отображается документ. Свойства конкретного экземпляра Window могут нести информацию о размерах, элементах оформления окна (кнопки, полосы прокрутки и т.п.), о положении окна на экране и.т.д. Методы объекта Window могут обеспечивать создание и уничтожение типичных окон, а также обработку специальных окон — диалоговых окон предупреждений, подтверждений и запросов. Кроме того, как верхний объект в иерархии JavaScript, объект Window содержит ссылки почти на все объекты.

Диалоговое окно — это небольшое окно в рамках графического интерфейса, возникающее для запроса некоторого действия юльзователя.

Метод alert() объекта Window создает специальное окно с коротким сообщением и кнопкой ОК.

• Синтаксис вызова: window.alert(строка);

или, более коротко,

• alert(строка);

Метод confirm() объекта Window создает окно с сообщением для пользователя, ответить на которое он может, либо щелкнув на кнопке ОК, т.е. согласиться, или на кнопке Отмена в противном случае.

• Синтаксис вызова: window.confirm(строка);

или просто

• confirm(строка);

JavaScript также поддерживает метод prompt() объекта window. Окно запроса — это небольшое окно, предлагающее пользователю ввести короткую строку данных.

результат = window.prompt(строка_запроса, значение_по_умолчанию);

• Пример:

result = prompt("Введите ответ на мой вопрос","");

Методы alert(), confirm() и prompt() позволяют быстро создавать окна специального вида, но часто требуется открыть самое обычное окно, чтобы показать в нем содержимое Web-страницы или результаты некоторых вычислений. Для создания и уничтожения окон используются методы open() и close() объекта Window.

window.open(url, имя, опции, замена)

где

url — адрес URL, указывающий документ для загрузки в данное окно;

имя — имя данного окна (позже его можно использовать в атрибутах target ссылок HTML);

опции — строка, в которой указаны опции оформления окна, разделенные запятыми;

замена — необязательное логическое значение (true или false), указывающее, должно ли содержимое адреса URL заменять содержимое окна (применимо к уже существующим окнам).

Если окно открыто, можно использовать метод close() для того, чтобы окно закрыть.

if (secondwindow && !secondwindow.closed) secondwindow.close();

39. Управление окнами

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

• Общий синтаксис:

window.open(url, имя, опции, замена);

• Пример:

secondwindow = open("http://www.yahoo.com",

"yahoo", "height=300,

width=200, scrollbars=yes");

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

if (secondwindow && !secondwindow.closed) secondwindow.close();

Опции оформления окна

Компонент Значение Описание Пример

alwaysLowered yes/no Указывает, должно ли окно всегда оставаться позади других окон. Несет в себе потенциальный риск с точки зрения безопасности alwaysLowered=no

alwaysRaised yes/no Указывает, должно ли окно всегда оставаться поверх других окон alwaysRaised=no

dependent yes/no Указывает, должна ли отображаться в окне браузера панель ссылок directories=yes

fullscreen yes/no Указывает, должно ли окно отображаться в полноэкранном режиме (только для IE) fullscreen=yes

height Число пикселей Устанавливает высоту окна, без элементов оформления height=100

hotkeys yes/no Указывает, должны ли быть отключены для нового окна «горячие» клавиши браузера (кроме основных, типа завершения сеанса) hotkeys=no

innerHeight Число пикселей Устанавливает высоту внутренней части окна, где отображается документ innerHeight=200

innerWidth Число пикселей Устанавливает ширину внутренней части окна, где отображается документ innerWidth=300

left Число пикселей Указывает позицию по горизонтали, где по отношению к началу координат экрана следует разместить окно. Предназначен для IE, в других случаях следует использовать screeny left=10

location yes/no Указывает, должна ли отображаться в окне панель адреса location=no

menubar yes/no Указывает, должна ли отображаться в окне панель меню menubar=yes

outerHeight Число пикселей Устанавливает внешнюю высоту окна, включая элементы оформления outerHeight=300

resizable yes/nо Устанавливает внешнюю высоту окна, включая элементы оформления resizable=no

screenx Число пикселей Число пикселей Расстояние (в пикселях) по горизонтали от начала координат экрана до позиции, в которой открывается данное окно. Предназначен для Netscape, в IE следует использовать left screenx=100

screeny Число пикселей Расстояние (в пикселях) по вертикали от начала координат экрана до позиции, в которой открывается данное окно. Предназначен для Netscape, в IE следует использовать top screeny=300

scrollbars yes/no Указывает, должны ли отображаться в окне полосы прокрутки scrollbars=no

status yes/no Указывает, должна ли отображаться в окне строка состояния status=no

titlebar yes/no Указывает, должна ли отображаться в окне строка заголовка toolbar=yes

toolbar yes/no Указывает, должна ли отображаться в окне панель инструментов toolbar=yes

top Число пикселей Указывает позицию по вертикали, где по отношению к началу координат экрана следует разместить окно. Предназначен для IE, в других случаях следует использовать screeny top=20

width Число пикселей Ширина окна. Вместо этого компонента лучше использовать innerWidth width=300

z-lock yes/no Указывает, запрещается ли окну менять свой порядок в стеке (z-индекс) относительно других окон (даже при получении фокуса ввода) z-lock=yes

• Смещение окна

имяОкна.moveBy(числоПикселейХ, числоПикселейY);

• Пример

myWindow.moveBy(100,100);

• Перемещение окна

имяОкна.moveTo(координатаХ, координатаY);

• Пример

myWindow.moveTo(1,1);

• Сужение/расширение окна

window.resizeBy(поШирине, поВысоте)

• Пример

myWindow.resizeBy(10,10); // делает окно на 10 пикселей выше и шире

myWindow.resizeBy(-100,0); // сужает окно на 100 пикселей

• Изменение размера окна

window.resizeTo(ширина, высота)

• Пример

myWindow.resizeTo(100,100); // устанавливает размеры окна 100x100

myWindow.resizeTo(500,100); // устанавливает размеры окна 500x100

• Прокрутка на указанное количество пикселей

myWindow.scrollBy(10,0); // прокрутка на 10 пикселей вправо

myWindow.scrollBy(-10,0); // прокрутка на 10 пикселей влево

myWindow.scrollBy(100,100); // по 100 пикселей вправо и вниз

• Прокрутка к указанным координатам

myWindow.scrollTo(1,1); // прокрутка к началу координат 1,1

myWindow.scrollTo(100,100); // прокрутка к позиции 100, 100

свойства location

• Пример перехода на новую страницу

<form action="#" method="get">

<input type="button" value="Go to Yahoo" onclick="window.location='http://www.yahoo.com';" />

</form>

• Определение протокола и имени хоста

alert(window.location.protocol); // указывает текущий протокол URL

alert(window.location.hostname); // указывает текущее имя хоста

объект history

• Назад по журналу

<а href="javascript: window.history.forward();">Вперед</а>

• Вперед

<a href="javascript: window.history.back();">Назад</а>

• На указанную позицию

<а href="javascript: window.history.go(-2);">Назад на две позиции</а>

<а href="javascript: window.history.go(3);">Вперед на три позиции</а>

<а href="javascript: window.history.go(window.history.length-1));"> Последний элемент </a>