Лабораторная работа №11. Создание окон.
Открытие новых окон в браузере – грандиозная возможность языка JavaScript. Вы можете либо загружать в новое окно новые документы (например, те же документы HTML), либо (динамически) создавать новые материалы. Приводимый далее скрипт открывает новое окно браузера и загружает в него некую web-страничку.
Упражнение 11.1. Открытие нового окна.
<html>
<head>
<script language="JavaScript">
<!-- hide
function openWin() {
myWin= open("dog.htm");
}
// -->
</script>
</head>
<body>
<div align="center">
<form>
<input type="button" value="Открыть новое окно" onClick="openWin()">
</form>
</div>
</body>
</html>
В представленном примере в новое окно с помощью метода open() записывается страница dog.htm.
Заметим, что Вы имеете возможность управлять самим процессом создания окна. Например, Вы можете указать, должно ли новое окно иметь строку статуса, панель инструментов или меню. Кроме того, Вы можете задать размер окна. Например, в следующем скрипте открывается новое окно размером 400x300 пикселов. Оно не имеет ни строки статуса, ни панели инструментов, ни меню.
Упражнение 11.2. Управление процессом создания нового окна.
<html>
<head>
<script language="JavaScript">
<!-- hide
function openWin2() {
myWin= open("dog.htm", "displayWindow",
"width=400,height=300,status=no,toolbar=no,menubar=no");
}
// -->
</script>
</head>
<body>
<div align="center">
<form>
<input type="button" value=" Открыть новое окно" onClick="openWin2()">
</form>
</div>
</body>
</html>
Как видите, свойства окна формулируются в строке "width=400,height=300,status=no,toolbar=no,menubar=no".
Обратите внимание также и на то, что Вам не следует помещать в этой строке символы пробела!
Список свойств окна, которыми Вы можете управлять:
directories |
yes|no |
height |
количество пикселов |
location |
yes|no |
menubar |
yes|no |
resizable |
yes|no |
scrollbars |
yes|no |
status |
yes|no |
toolbar |
yes|no |
width |
количество пикселов |
Упражнение 11.3. Закрытие окон.
Вы можете также закрывать окна с помощью языка JavaScript. Чтобы сделать это, Вам понадобится метод close().
<html>
<script language="JavaScript">
<!-- hide
function closeIt() {
close();
}
// -->
</script>
<center>
<form>
<input type=button value="Close it" onClick="closeIt()">
</form>
</center>
</html>
Если теперь в новом окне Вы нажмете кнопку Close it, то оно будет закрыто. open() и close() – это методы объекта window. Мы должны помнить, что следует писать не просто open() и close(), а window.open() и window.close(). Однако в нашем случае объект window можно опустить – Вам нет необходимости писать префикс window, если Вы хотите всего лишь вызвать один из методов этого объекта (и такое возможно только для этого объекта).