Встроенные диалоговые панели
Объект window позволяет отображать различные диалоговые панели, вызываемые с помощью методов alert, prompt и confirm:
window.alert("Вы
- наш"
+ visCount
+"
посетитель!") where
=
window.prompt("Kуда
пойдем сегодня?", "News") YesNo
= window.confirm("3акрыть
текущее окно?")
Метод alert просто выводит указанное сообщение и ждет, когда пользователь нажмет кнопку Ok.
Использование метода alert
Метод prompt служит для ввода текстовой информации. В качестве параметров передаются текст приглашения и значение по умолчанию. Введенная пользователем строка возвращается при нажатии кнопки Ok. Если же нажата кнопка Cancel, возвращается значение null.
Использование метода prompt
М
if
(window.confirm("Закрыть
текущее окно?")) { window.close() }
Использование метода confirm
Модальные диалоговые панели и справка
Д
newDlg
=
window.showModalDialog(URL, arguments, features)
где
URL — адрес диалоговой панели. Указание пустой строки («») недопустимо;
arguments — необязательный список аргументов любого типа. Диалоговая панель может получить аргументы через свойство dialogArguments объекта window;
features — необязательный список параметров:
Параметр |
Значение |
Описание |
dialogWidth |
Число |
Задает ширину диалоговой панели. |
dialogHeight |
Число |
Задает высоту диалоговой панели. |
dialogTop |
Число |
Задает вертикальную координату левого верхнего угла диалоговой панели. |
dialogLeft |
Число |
Задает горизонтальную координату левого верхнего угла диалоговой панели. |
center |
yes | no | 1 | 0 |
Задает выравнивание панели по центру экрана. |
Рассмотрим несколько примеров использования метода window.showModalDialog. Начнем с самого простого - по нажатию кнопки вызывается диалоговая панель для ввода пароля. Введенный пароль возвращается запрашивавшей странице. Вот текст основной страницы:
<html> <head><title>JavaScript
Demos</title></head> <body> <script
language="JavaScript"> function
doNext() { pwd
=
window.showModalDialog("pwd.htm", null,
"dialogWidth:20em;
dialogHeight:20em, center:1")
alert("password
=" +
pwd) } </script> <form> <center> <input
type = button value = "Next" onClick="doNext()"> </form> </body> </html>
Здесь по нажатию кнопки Next мы вызываем функцию doNext, в которой вызывается метод window.showModalDialog, где открывается диалоговая панель, описанная в файле pwd.htm. Обратите внимание, как описаны размеры панели. Вот текст файла pwd.htm.
<html> <head><title>JavaScript
Demos</title></head> <body
bgcolor="#a7b7c7"> <script
language="JavaScript"> function
doOk() {
window.returnValue
=
window.document.all.pwd.value window.close(); } </script> <form> <center> Enter
password: <input
type = password name = pwd> <input
type = button value = "Ok" onClick = "doOk()"> </form> </body> </html>
Здесь отображается форма со строкой ввода и кнопкой. По нажатию кнопки содержимое строки передается вызывавшей странице – для этого используется метод window.returnValue, а окно с формой закрывается.
Основная идея использования диалоговых панелей, создаваемых средствами HTML, заключается в том, что они предоставляют более богатые возможности по сравнению со стандартными диалоговыми панелями, описанными выше. Взаимодействие между вызывающим документом и диалоговой панелью происходит через метод window.returnValue и соответствующую переменную, которой возвращается значение, введенное в панели.
Выше мы упомянули о том, что вызывающий документ может передавать диалоговой панели параметры. Посмотрим, как это можно сделать. Пусть нам необходимо передать массив, состоящий из четырех элементов. В диалоговой панели этот массив используется для динамического построения списка выбора.
В
<html> <head><title>JavaScript
Demos</title></head> <body> <script
language="JavaScript"> function
doArgs() { var
args
= new
Array("мать",
"отец", "сестра", "брат") ret
=
window.showModalDialog("args.htm", args) document.write(ret) } </script> <form> <center> <input
type=button value="Args" onClick="doArgs()"> </form> </body> </html>
В
<html> <head><title>JavaScript
Demos</title> <script
language="JavaScript"> function
getArgs() { str
=
new String s
=
"<p><center><form>" s
=
s
+
"<select name='args" s
=
s
+"
onchange='window.returnValue=
window.document.all.args.value'>" for
(i=0; i
< 4;
i++) { s
=
s
+
"<option value='" str
=
window.dialogArguments[i] s
=
s
+
str
+ "'>" +
str
+
"</option>" } s
=
s
+
"</select>" s
= s + "<input type='button' value='close'
onclick='window.close()'>" s
=
s
+
"</form>" document.write(s) } </script> </head> <body> <P
align=center>Arguments</P> <center><form> <input
type="button" value="Args" onClick="getArgs()"> </form></body></html>
Здесь у нас реализована форма с одной кнопкой — ее нажатие приводит к вызову функции getArgs, которая динамически строит список. Выбор элемента списка и нажатие кнопки Close закрывает панели и возвращает выбранное значение вызывавшему документу.
Отображение справочной информации
Д
<BUTTON>
onclick="window.showHelp('helpinfo.htm')"> Справка </BUTTON>
Этот метод также может использоваться для отображения файлов WinHelp – в этом случае в качестве первого параметра указывается имя *.hlp - файла.
Перемещение фокуса
Если у вас открыто более одного окна, то с помощью методов focus и blur можно программно перемещаться между ними и таким образом изменять текущее активное окно. Метод blur перемещает фокус из одного окна в другое (аналогично нажатию клавиши Tab), метод focus перемещает фокус на окно, в котором находится исполняемый код, написанный на JavaScript.
Скроллирование
К
window.scroll
(100,100)
Таймеры
Д
<html> <head><title>JavaScript
Demos</title></head> <body>
<script language="JavaScript"> function
showtimeOut() {
document.write("Время
вышло...") } function
timerDemo() {
// вызвать
showtimeOut
через
5 секунд
window.setTimeout("showtimeOut()",
5000, "JavaScript") } timerDemo() </script> </body></html>
Для выполнения действий, повторяющихся с определенным интервалом времени, используется метод setInterval. Например, в следующей программе каждые 5 секунд выводится сообщение «Прошло 5 секунд»:
М
<html> <head><title>JavaScript
Demos</title></head> <body> <script
language="JavaScript"> function
showtimeOut() {
window.alert("Прошло
5
секунд...") } function
timerDemo() { //
выполнять showtimeOut
каждые
5 секунд
window.setInterval("showtimeOut()",
5000,
"JavaScript") } timerDemo() </scrip> </body> </html>
В следующей таблице приведен список методов объекта window.
Метод |
Описание |
open |
Открывает новое окно браузера. |
close |
Закрывает текущее окно браузера. |
showHelp |
Отображает окно справочной системы. |
ShowModalDialog |
Отображает новое окно как модальную диалоговую панель. |
alert |
Отображает панель сообщений Alert. |
prompt |
Отображает диалоговую панель Prompt. |
confirm |
Отображает диалоговую панель Confirm. |
navigate |
Загружает другую страницу. |
blur |
Вызывает потерю страницей фокуса. |
focus |
Переводит фокус на данную страницу. |
scroll |
Скроллирует содержимое страницы по горизонтали и вертикали. |
SetInterval |
Задает интервал выполнения указанной функции. |
setTimeout |
Задает временную задержку перед выполнением указанной функции. |
clearInterval |
Отменяет интервал, заданный функцией setInterval. |
clearTimeout |
Отменяет задержку, заданную функцией setTimeout. |
execScript |
Выполняет скриптовую программу. |