div.main {margin-left: 20pt; margin-right: 20pt}
Использование окон и фреймов
Открытие и закрытие окон
Использование фреймов
Управление окнами
Обращение к окнам и фреймам
Открытие и закрытие окон
Открытие окон
Закрытие окон
Открытие новых окон в браузере - грандиозная возможность языка 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=добавляет пустое поле между боковыми границами фрейма и текстом или графикой.
Следующий график показывает окно, содержащее три фреймов:
This frame is This frame is
named listFrame named contentFrame
| |
| |
-------------v------------------------------v----------
| Music Club | Toshiko Akiyoshi |
| Artists | Interlude |
| | |
| Jazz | The Beatles |
| - T. Akiyoshi | Please Please Me |
| - J. Coltrane | |
| - M. Davis | Betty Carter |
| - D. Gordon | Ray Charles and Betty Carter |
| | |
| Soul | Jimmy Cliff |
| - B. Carter | The Harder They Come |
| - R. Charles | |
| ... | ... |
-------------------------------------------------------
| Alphabetical By category Musician Descriptions |
----------------^--------------------------------------
|
|
This frame is named
navigateFrame
Пример 1. Следующе утверждение создает frameset, показанный в предыдущем графике.
Следующий график показывает иерархию фреймов. Все три фрейма имеют того же самого родителя, даже при том, что два из фреймов определены внутри отдельного frameset. Это, потому что родитель фреймов есть родитель окно, и фрейм, расположенный не в frameset, определяет окно.
top
|
+--listFrame (Category.html)
|
+--contentFrame (Titles.html)
|
+--navigateFrame (Navigate.html)
Вы можете обращаться к предыдущим фреймам, используя массив frames следующим образом. (Для информации относительно массива frames, смотрите объект frame.)
listFrame - top.frames [0]
contentFrame - [1] top.frames
navigateFrame - top.frames [2]
Пример 2.Вы можете создавать окно подобно предыдущему, но в котором вершина двух фреймов имеют отдельного родителя из navigateFrame. Верхний уровень frameset будет определен следующим образом:
Файл Muskel3.html содержит следующие утверждения для верхних фреймов и определяют frameset:
Следующий график показывает иерархию фреймов. UpperFrame и navigateFrame родитель: верхнее окно. ListFrame и contentFrame родитель: upperFrame.
top
|
| +--listFrame
| | (Category.html)
+---upperFrame------|
| (muskel3.html) |
| +--contentFrame
| (Titles.html)
|
+---navigateFrame
(Navigate.html)
Вы можете обращаться к предыдущим фреймам, использующим массив frames следующим образом. (Для информации относительно массивов frames, смотрите объект frame.)
upperFrame - top.frames [0]
navigateFrame - [1] top.frames
listFrame - upperFrame.frames [0] или top.frames [0] .frames [0]
contentFrame - upperFrame.frames [1] или top.frames [0] .frames [1]
Модифицикация фреймов
Вы можете модифицировать содержание фрейма, используя свойство 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, в фрейме listFrame, содержит список музыкантов, сортируемых классом.
Titles.html, в фрейме ContentFrame, содержит алфавитный список каждого музыканта и названий, доступных для того музыканта.
Navigate.html, в фрейме NavigateFrame, содержит гиперссылки, которые позволяют пользователю, выбирать, как музыканты показаны в listFrame: в алфавитном списке или категорическом списке. Этот файл также определяет гиперссылки, которые позволяют пользователю, выделить описание каждого музыканта.
Дополнительный файл, Alphabet.html, содержит список музыкантов, сортируемые в алфавитном порядке. Этот файл показана в listFrame, когда пользователь нажимает связь для алфавитного списка.
Файл Category.html (категорический список) содержит следующий код:
Music Club Artists
Jazz
Toshiko Akiyoshi
John Coltrane
Miles Davis
Dexter Gordon
Soul
Betty Carter
Ray Charles
...
The file alphabet.html (the alphabetical list) contains code similar to the following:
Music Club Artists
Toshiko Akiyoshi
The Beatles
Betty Carter
Ray Charles
...
Файл navigate.html (навигационные связи внизу экрана) содержит следующий код:
Alphabetical
By category
Musician Descriptions
Файл Titles.html (главный файл, показанный в фрейме справа) содержит следующий код:
Toshiko Akiyoshi
Interlude
The Beatles
Please Please Me
Betty Carter
Ray Charles and Betty Carter...
Для более подробного создания фрейма, смотрите объект frame.
Обращение к окнам и фреймам
Имя, которое вы используете, чтобы обратиться к окну, зависит от того, обращаетесь ли вы к свойствам, методам, и обработчикам события окна или - обращаетесь к окну, как к строке, указывающей имя окна подчиненной формы или гиперсвязь.
Так как объект окна - верхнего уровня объект в JavaScript иерархии пользователя, окно необходимо для определения объектов в любом окне.
Обращение к свойствам, методам, и обработчикам собития окна
Вы можете обращаться к свойствам, методам, и обработчикам собития текущего окна или другого окна следующими из способов:
self или window. Self или window - синонимы для текущего окна, и вам необязательно использовать их, чтобы обратиться к текущему окну. Например, Вы можете закрыть текущее окно, используя или window.close () или self.close ().
top или parent. Top или parent - также синонимы, которые могут использоваться вместо имени окна. Top обращается к самому верхнему окну Navigator, и parent обращается к окну, содержащий frameset. Например, выражение parent.frame2.document.bgColor="teal" изменяет цвет фона фрейма с именем frame2 в teal; frame2 - фрейм в текущем frameset.
The name of a window variable. Variable окна - переменная, которая определена, когда окно открыто. Например, msgWindow.close () закрывает окно с именем msgWindow. Однако, когда Вы открываете или закрываете окно внутри обработчика события, то вы должны точно определить window.open () или window.close () вместо использования open() или close(). Из-за обзора статических объектов в JavaScript, обращение к close() без определения точного имени окна эквивалентно выражению document.close().
Omit the window name. Поскольку существование текущего окна принято, то вы не должны обращаться к имени окна, чтобы вызывать его метод и присвоить его свойству. Например, close() закрывает текущее окно.
Для получения дополнительной информации этих методах обращения к окну, смотрите объект window.
Пример 1: обращение к текущему окну. Следующая выражение обращается к форме с именем musicForm в текущем окне. Выражение выдает предупреждение, если переключатель выбран.
if (self.document.musicForm.checkbox1.checked) {
alert('The checkbox on the musicForm is checked!')}
Пример 2: обращение к другому окну. Следующие выражения обращаются к форме с именем musicForm в окне checkboxWin. Выражения определяют, если выбран переключатель, отмечает переключатель, определят, если выбрана вторая опция объекта selected, выбирает вторую опция объекта selected. Даже при том, что значения объекта изменены в checkboxWin, текущее окно остается активным: проверка переключателя и выбора опции отбора не дает фокус окну.
// Определят выбран ли переключатель
if (checkboxWin.document.musicForm.checkbox2.checked) {
alert('The checkbox on the musicForm in checkboxWin is checked!')}
// Отмечает переключатель
checkboxWin.document.musicForm.checkbox2.checked=true
// Определяет, выбрана ли опция в объекте select
if (checkboxWin.document.musicForm.musicTypes.options[1].selected)
{alert('Option 1 is selected!')}
// Выбирает опцию в объекте select
checkboxWin.document.musicForm.musicTypes.selectedIndex=1
Пример 3: обращение к фрейму в другом окне. Следующее выражение обращается к фрейму с именем frame2, который находится в окне с именем window2. Выражение изменяет цвет фона frame2 в фиолетовый. Имя фрейма frame2, должно быть определено в теге <FRAMESET>, который создает frameset.
Window2.frame2.document.bgColor = "violet"
Обращение к окну подчиненной формы или гиперсвязи
Используйте имя окна, когда обращаетесь к окну, как к строке, указывающей имя окна подчиненной формы или гиперсвязи (атрибут TARGET тегов <FORM> или <A>).
Пример 1: второе окно. Следующий пример создает гиперссылку ко второму окну. В примере есть кнопка, которая открывает, окно с именем window2, и связь, которая загружает файл Doc2.html в открытое окно, и еще одна кнопка, которая закрывает окно.
Load a file into window2
Пример 2:anchor во втором окне. Следующий пример создает гиперссылку к anchor во втором окне. Связь отображает anchor с именем numbers в файле Doc2.html в окне window2. Если window2 не существует, его создает.
numbers
Пример 3: имя фрейма. Следующий пример создает гиперссылку к anchor в фрейме. Связь отображает anchor с именем abs_method в файле Sesame.html фрейма с именем "contentFrame". Фрейм должн быть внутри текущего frameset, и имя фрейма должно быть определено в атрибуте NAME тега <FRAME>.
abs
Пример 4: литеральное имя фрейма. Следующий пример создает гиперссылку к файле. Сслка отображает файл с именем Artists.html в родительском окне текущего frameset. Этот объект ссылки появляется в фрейме внутри frameset, и когда пользователь нажимает ссылку, все фреймы в frameset исчезают, и загружается файл Artists.html в родительское окно.
Musician Descriptions
Управление окнами
В Navigator может быть открыто много окон одновременно. Пользователь может перемещаться среди этих окон, щелкая их, давая им фокус. Вы можете дать фокус окну запрограммированно, давая фокус объекту в окне или, точно определяя окно как адрес гиперссылки. Хотя вы можете изменять значения объекта во втором окне, которое не делает второе окно активным: текущее окно остается активным.
Активное окно - окно, которое имеет фокус. Когда окно имеет фокус, оно принесено на передний план и изменяется некоторым визуальным способом. Например, область заголовка окна могжет быть изменено в различный цвет. Визуальная команда вызова программы изменяется в зависимости от платформы, которую вы используете.
Пример 1: передача фокуса объекту в другом окне. Следующее выражение дает фокус текстовому объекту с именем city в окне checkboxWin. Так как текстовый объект получает фокус, то checkboxWin также получает фокус и становится активным окном. В примере также показано выражение, которое создает checkboxWin.
сheckboxWin=window.open ("Doc2.html")
...
checkboxWin.document.musicForm.city.focus()
Пример 2: передача фокуса другому окну, при использовании гиперссылки. Следующее выражение определяет window2 как target гиперссылки. Когда пользователь нажимает на ссылку, фокус передается window2. Если window2 не существует, то оно создается.
Load a file into window2
| 
