Открытие новых окон в браузере - грандиозная возможность языка JavaScript. Вы можете либо загружать в новое окно новые документы (например, те же документы HTML), либо (динамически) создавать новые материалы.
Вы можете создавать окно с помощью метода Window.
Следующее утверждение создает
окно "msgWindow", которое показывает содержание файл sesame.html:
MsgWindow=window.open("sesame.html")
Следующее утверждение создает окно "homeWindow", которое показывает домашнюю страницу Netscape:
homeWindow=window.open("http://www.netscape.com")
Окна могут иметь два названия. Следующее утверждение создает окно с двумя
названиями. Название окна "msgWindow" - это вовсе не имя окна, но только с помощью этой переменной вы можете получить доступ к окну. И поскольку это обычная переменная, то область ее действия - лишь тот скрипт, в котором она определена; а между тем, имя окна, "displayWindow" - уникальный идентификатор, которым можно пользоваться с любого из окон браузера.
msgWindow=window.open("sesame.html","displayWindow")
Когда Вы создаете окно, имя окна не требуется. Но если Вы хотите обратиться к окну из другого окна, то окно должно иметь свое уникальное имя (в данном случае "displayWindow"). Приведенный далее скрипт открывает новое окно браузера и загружает в него страничку sesame.html с помощью метода open():
<html>
<head>
<script language="JavaScript">
<!-- hide
function openWin() {
msgWindow= open("sesame.html")
}
// -->
</script>
</head>
<body>
<form>
<input type="button" value="Открыть новое окно" onClick="openWin()">
</form>
</body>
</html>
Заметим, что Вы имеете возможность управлять самим процессом создания окна. Например, Вы можете указать, должно ли новое окно иметь строку статуса, панель инструментов, меню или полосы прокрутки. Кроме того, Вы можете задать размер окна. Рассмотрим следующий пример создания окна размерами 250x100 пикселов, которое не имеет ни строки статуса, ни панель инструментов, ни меню, ни полосы прокрутки.
<html>
<head>
<script language="JavaScript">
<!-- hide
function openWin() {
msgWindow= open("sesame.html",displayWindow",
"width=250,height=100,status=no,
toolbar=no,menubar=no,scrollbars=no")
}
// -->
</script>
</head>
<body>
<form>
<input type="button" value="Открыть новое окно"
onClick="openWin()">
</form>
</body>
</html>
Как видно в примере, свойства окна записаны в строке "width=250,height=100,status=no,toolbar=no,menubar=no,scrollbars=no", в которой следует обратить внимание на то, что вам не следует помещать в ней символы пробела.
Вы можете закрывать окна с помощью языка JavaScript. Следующие утверждения закрывают текущее окно:
Window.close ()
Self.close ()
Замечание: не использовать следующее утверждение в обработке результата close()
Следующее утверждение закрывает окно, названное "msgWindow":
MsgWindow.close()
Теперь создадим пример, который открывает новое окно. Загрузим туда web-страницу, где при нажатие кнопки оно будет закрыто:
<html>
<script language="JavaScript">
<!-- hide
function closeIt(){
close();
}
// -->
</script>
<center>
<form>
<input type=button value="Закрыть окно" onClick="closeIt()">
</form>
</center>
</html>
open() и close() - это методы объекта window. Мы должны помнить, что следует писать не просто open() и close(), а window.open() и window.close(). Однако в нашем случае объект window можно опустить - Вам нет необходимости писать префикс window, если Вы хотите всего лишь вызвать один из методов этого объекта (и такое возможно только для этого объекта).
Один из способов выдать сразу несколько файлов HTML на экране пользователя - это открыть несколько окон броузера. Другой путь состоит в том, чтобы разбить окно на несколько разделов. Эти разделы называются фреймами. В каждом фрейме показывается свой документ HTML. Каждый фрейм может иметь свои полосы прокрутки, ссылки, графические изображения и т.д. Фреймы могут функционировать независимо или влиять друг на друга, используя ссылки, указывающие на другие фреймы.
Для использования фреймов необходимо как минимум три файла: установачный файл и два исходных файла HTML. Установачный файл назначает исходные файлы HTML для каждого из окон, но не содержит собственного текста или графики. Исходные файлы HTML выдаются во фреймы и, как и любые другие файлы могут содержать ссылки, изображения, скрипты и пр.
Для создания установочного фрейма необходимо два тэга:
<frameset>
и
<fram>
.
HTML-страница, создающая фреймы, в общем случае может выглядеть следующим образом:
<html>
<frameset cols="50%,50%">
<frameset rows="50%,50%">
<frame src="cell.htm">
<frame src="cell.htm">
</frameset>
<frameset rows="33%,33%,33%">
<frame src="cell.htm">
<frame src="cell.htm">
<frame src="cell.htm">
</frameset>
</frameset>
</html>
Внутри тега <frameset> мы использовали свойства rows и cols. Это означает, что фреймы будут расположены друг над другом или друг под друго соответсвенно. Фрагмент "33%,33%,33%" задает размеры открываемых окон. Этот фрагмент эквивалентен следующей записи "33%,33%,*" или задать размер фрейма в пиксилах, для чего достаточно после числа не ставить символ %. Любому фрейму можно присвоить уникальное имя, воспользовавшись в тэге <frame> атрибутом name. Такая
возможность пригодится нам в языке JavaScript для доступа к фреймам.
Тег <frame> содержит отрибуты, которые управляют различными свойствами фреймов.
BORDER=определяет ширину разделительной полосы между фреймами.
BORDERCOLOR=устанавливает цвет разделительной полосы между фреймами.
NORESIZE атрибут, запрещающий пользователю изменять размеры фреймов.
SCROLLING=задает, появляются ли в окне полосы прокрутки.
MARGINHEIGHT=добавляет пустое поле между верхней границей фрейма и началом текста или графики.
MARGINWIDTH=добавляет пустое поле между боковыми границами фрейма и текстом или графикой.
Следующий график показывает окно, содержащее три фреймов:
Следующий график показывает иерархию фреймов. Все три фрейма имеют того же самого родителя, даже при том, что два из фреймов определены внутри отдельного frameset. Это, потому что родитель фреймов есть родитель окно, и фрейм, расположенный не в frameset, определяет окно.
Вы можете обращаться к предыдущим фреймам, используя массив frames следующим образом. (Для информации относительно массива frames, смотрите объект frame.)
Пример 2.Вы можете создавать окно подобно предыдущему, но в котором вершина двух фреймов имеют отдельного родителя из navigateFrame. Верхний уровень frameset будет определен следующим образом:
Файл muskel3.html содержит следующие утверждения для верхних фреймов и определяют frameset:
Следующий график показывает иерархию фреймов. UpperFrame и navigateFrame родитель: верхнее окно. ListFrame и contentFrame родитель: upperFrame.
Вы можете обращаться к предыдущим фреймам, использующим массив frames следующим образом. (Для информации относительно массивов frames, смотрите объект frame.)
Вы можете модифицировать содержание фрейма, используя свойство location, пока вы точно определяете иерархию фреймов.
Например, пусть вы используете frameset, описанный в Примере 2 в предыдущем примере. Если вы хотите, чтобы пользователь был способен закрывать фрейм, содержащий список artists (в фрейме listframe) и просматр только music titles, сортируемые musician (в настоящее время в фрейме contentFrame), вы можете добавить следующую кнопку к navigateFrame.
Если Вы хотите, чтобы пользователь мог закрыть фрейм, содержащий список artists (в фрейме listframe) и просматривая только music titles, сортируемые musician (в настоящее время в фрейме contentFrame), вы можете добавить следующую кнопку к navigateFrame.
Когда пользователь нажимает на эту кнопку, файл artists.html загружается в фрейм upperFrame; фреймы listFrame и contentFrame закрываются и больше не существуют.
Поскольку фреймы - это тип окна, то вы обращаетесь к фреймам и перемещаетесь среди фреймов также как с окном. Смотрите также: обращение к окнам и фреймам и Управление окнами
Если frameset в предыдущем примере разработан, чтобы представить доступные названия для music club, фреймы и их файлы HTML могут иметь следующее содержание:
Файл category.html (категорический список) содержит следующий код:
Файл navigate.html (навигационные связи внизу экрана) содержит следующий код:
Файл titles.html (главный файл, показанный в фрейме справа) содержит следующий код:
Для более подробного создания фрейма, смотрите объект frame.
Имя, которое вы используете, чтобы обратиться к окну, зависит от того, обращаетесь ли вы к свойствам, методам, и обработчикам события окна или - обращаетесь к окну, как к строке, указывающей имя окна подчиненной формы или гиперсвязь.
Так как объект окна - верхнего уровня объект в JavaScript иерархии пользователя, окно необходимо для определения объектов в любом окне.
Вы можете обращаться к свойствам, методам, и обработчикам собития текущего окна или другого окна следующими из способов:
Для получения дополнительной информации этих методах обращения к окну, смотрите объект window.
Пример 1: обращение к текущему окну. Следующая выражение обращается к форме с именем musicForm в текущем окне. Выражение выдает предупреждение, если переключатель выбран.
Пример 2: обращение к другому окну. Следующие выражения обращаются к форме с именем musicForm в окне checkboxWin. Выражения определяют, если выбран переключатель, отмечает переключатель, определят, если выбрана вторая опция объекта selected, выбирает вторую опция объекта selected. Даже при том, что значения объекта изменены в checkboxWin, текущее окно остается активным: проверка переключателя и выбора опции отбора не дает фокус окну.
Пример 3: обращение к фрейму в другом окне. Следующее выражение обращается к фрейму с именем frame2, который находится в окне с именем window2. Выражение изменяет цвет фона frame2 в фиолетовый. Имя фрейма frame2, должно быть определено в теге <FRAMESET>, который создает frameset.
Используйте имя окна, когда обращаетесь к окну, как к строке, указывающей имя окна подчиненной формы или гиперсвязи (атрибут TARGET тегов <FORM> или <A>).
Пример 1: второе окно. Следующий пример создает гиперссылку ко второму окну. В примере есть кнопка, которая открывает, окно с именем window2, и связь, которая загружает файл doc2.html в открытое окно, и еще одна кнопка, которая закрывает окно.
Пример 2:anchor во втором окне. Следующий пример создает гиперссылку к anchor во втором окне. Связь отображает anchor с именем numbers в файле doc2.html в окне window2. Если window2 не существует, его создает.
Пример 3: имя фрейма. Следующий пример создает гиперссылку к anchor в фрейме. Связь отображает anchor с именем abs_method в файле sesame.html фрейма с именем "contentFrame". Фрейм должн быть внутри текущего frameset, и имя фрейма должно быть определено в атрибуте NAME тега <FRAME>.
Пример 4: литеральное имя фрейма. Следующий пример создает гиперссылку к файле. Сслка отображает файл с именем artists.html в родительском окне текущего frameset. Этот объект ссылки появляется в фрейме внутри frameset, и когда пользователь нажимает ссылку, все фреймы в frameset исчезают, и загружается файл artists.html в родительское окно.
В Navigator может быть открыто много окон одновременно. Пользователь может перемещаться среди этих окон, щелкая их, давая им фокус. Вы можете дать фокус окну запрограммированно, давая фокус объекту в окне или, точно определяя окно как адрес гиперссылки. Хотя вы можете изменять значения объекта во втором окне, которое не делает второе окно активным: текущее окно остается активным.
Активное окно - окно, которое имеет фокус. Когда окно имеет фокус, оно принесено на передний план и изменяется некоторым визуальным способом. Например, область заголовка окна могжет быть изменено в различный цвет. Визуальная команда вызова программы изменяется в зависимости от платформы, которую вы используете.
Пример 1: передача фокуса объекту в другом окне. Следующее выражение дает фокус текстовому объекту с именем city в окне checkboxWin. Так как текстовый объект получает фокус, то checkboxWin также получает фокус и становится активным окном. В примере также показано выражение, которое создает checkboxWin.
Пример 2: передача фокуса другому окну, при использовании гиперссылки. Следующее выражение определяет window2 как target гиперссылки. Когда пользователь нажимает на ссылку, фокус передается window2. Если window2 не существует, то оно создается.
|
|  |