Техника Web-дизайна для студента
Окно браузера как объект программирования
До сих пор в качестве объектов в наших программах фигурировали метки HTML. Однако возможности языка JavaScript гораздо шире. В частности, объектом программирования может являться окно браузера (объект window). Объект имеет множество свойств и методов. К методам объекта window относятся уже рассмотренные нами методы: alert о, setlnterval (>, clearlnterval (), а также еще один — метод open (), с которым познакомимся в данном разделе.
Метод open () предназначен для открытия нового окна. Его структура может выглядеть следующим образом:
Open ("имя файла", "имя окна", "параметры окна") о имя файла — имя файла документа, который должен загрузиться в раскрываемом окне или его адрес, если документ находится на другом сервере;
□ имя окна — имя открываемого окна. Используя это имя после открытия окна, можно загружать в него другие документы;
О параметры окна — группа параметров, перечисляемых через запятую, определяющих внешний вид окна.
Часть параметров позволяет задать размеры окна и его положение на экране. К ним относятся: width — ширина окна, height — высота окна, top — смещение по вертикали относительно верхней границы окна монитора, left — смещение по горизонтали относительно левой границы окна монитора. Все четыре параметра задаются в пикселях.
Другая часть параметров позволяет установить, будет ли отображаться тот или иной элемент браузера. Каждый из них может принимать одно из двух значений: 1 — отобразить элемент, 0 — скрыть элемент (допускается также использование значений yes/no). По умолчанию действует значение 0 (элемент скрыт). Эта часть параметров включает: toolbar — отображение панели инструментов (кнопки), directories — отображение панели инструментов (ссылки), location — отображение адресной строки, menubar — отображение меню, status — отображение строки состояния, resizable — разрешение изменения размеров окна пользователем.
Приведем пример использования программы для открытия документа в новом окне. Текст документа показан в листинге 8.12.
Листинг 8.12. Пример использования программы для открытия документа в новом окне и управления параметрами окна
<HTML>
<HEAD>
<Т1ТЪЕ>новое okho</TITLE>
<SCRIPT> function NW()
Open("PI. jpg", "wl", "top=150, left=300, width=155, height=230")
</SCRIPT>
</HEAD>
<BODY>
<H1 onclick=NW()>Открытие рисунка в новом окне браузера</Н1> </BODY>
</HTML>
Для открытия рисунка Р1 - jpg в новом окне вызывается функция nw (), в которой и располагается метод open (). Для открываемого окна заданы только его размеры и положение в окне монитора. Параметры, определяющие внешний вид окна, не заданы и будут определяться по умолчанию. Внешний вид документа вместе с новым окном, открытым после щелчка по тексту, показан на рис. 8.8.
Следует обратить внимание, что по умолчанию на открываемой в браузере странице существуют поля, которые создают белую рамку вокруг рисунка. Задавая размер открываемого окна, приходится это учитывать и устанавливать размеры окна несколько больше, чем размер рисунка. Чтобы избавиться от полей, следует открывать в новом окне не файл рисунка, а HTML-документ
Без полей, содержащий только этот рисунок. Пример текста такого документа приведен в листинге 8.13.
|
'З |
|
|
] Файл Правка Вид Избранное * |
|
|
Открытие рисунка в |
|
|
Новом окне браузера |
|
|
I ’ ■ ^ І і |
|
Рис 8.8. Результат открытия изображения в новом окне |
Листинг 8.13. Текст документа, создающего страницу без полей
<html>
<head>
<title>OTKpbiTHe OKHa</title>
</head>
<body topmargin="0" leftmargin="0">
<img src="Pl. jpg">
</body>
</html>
Параметрами topmargin и leftmargin устанавливаются нулевые поля страницы. Изменим значения параметров метода open () предыдущей программы, изменив имя открываемого файла и размеры окна:
Open("Plnb. htm", "wl", "top=150, left=300, width=133, height=200")
Результат показан на рис. 8.9.
|
Рис. 8.9. Результат открытия в новом окне документа, не содержащего полей |
Программа может быть использована и для открытия окон с разными документами, причем они могут быть и разного размера. Для этого достаточно ввести механизм параметров. Рассмотрим следующий пример (листинг 8.14).
Листинг 8.14. Пример открытия нового окна с разными документами и разного размера
<HTML>
<HEAD>
<Т1ТЪЕ>новое okho</TITLE>
<SCRIPT>
Function NW(FN, W,H)
Open(FN, "wl", "top=150, left=300, width="+W+", height="+H)
</SCRIPT>
</HEAD>
<BODY>
<H1 onclick=NW ("PI. htm", "150", "250") >Документ 1</H1> <H1 onclick=NW("Р2.htm","200","300")>Документ 2</Н1>
</BODY>
</HTML>
Параметры метода open ( ) записываются как строки символов, т. е. в кавычках. Поэтому значения параметров, передаваемых в функцию nw ( ) при ее вызове, должны относиться к типу данных "строки символов" и записываться в кавычках. В свою очередь переменные fn, w и н в заголовке функции nw ( ) также принадлежат к строчному типу данных, так как через них осуществляется передача значений. Это объясняет, почему переменная fn в методе open о записывается без кавычек, а переменные w и н объединяются с другими частями в единую строку при помощи знака "+".
Проверив работу программы, убедимся, что прежде чем открыть новое окно документа, следует закрыть окно предыдущего. Объясняется это тем, что открываемое окно имеет конкретное имя wl и открыть второе окно с таким же именем невозможно. Для многих решаемых задач такое положение дел можно считать вполне нормальным. Например, вы создаете картинную галерею и на странице размещаете уменьшенные репродукции картин. Щелчок по любой из них открывает увеличенное изображение картины в новом окне. Перед тем как перейти к демонстрации следующей картины, вполне естественно желание закрыть изображение предыдущей. И все-таки можно придумать ситуацию, когда необходимо открыть сразу несколько новых окон с разными документами. В этом случае в программе необходимо предусмотреть передачу еще одного параметра с именем окна (листинг 8.15).
Листинг 8.15. Пример открытия нескольких окон документов разного размера
<HTML>
<HEAD>
<Т1ТЪЕ>новое okho</TITLE>
<SCRIPT>
Function NW(FN, W, H, WN) open(FN, Ш, "top=150, left=300, width="+W+", height="+H)
</SCRIPT>
</HEAD>
<BODY>
<H1 onclick=NW("PI. htm","150","250", "wl")>Документ 1</H1>
<H1 onclick=NW("P2.htm","200","300","w2")>Документ 2</Hl> </BODY>
</HTML>
