Веб-инструмент
Веб-мастерская
HTML-документ загружается в окно браузера. Можно открыть несколько таких окон и загрузить в них различные документы, а также разбить одно окно на несколько прямоугольных областей, называемых фреймами. В каждый такой фрейм можно загрузить отдельный документ. При этом существует возможность организовать взаимодействие между фреймами — например, с помощью действий в одном фрейме управлять содержимым другого фрейма.
Загрузка в браузер HTML-документа приводит к тому, что в браузере создается иерархическая объектная модель этого документа, на самом верхнем уровне которой находится объект window. Доступ к свойствам и методам данного объекта имеет уже знакомый вам синтаксис:
window.свойство
window.метод( [параметры])
У объекта window имеется синоним self, используемый при обращении к окну, содержащему текущий документ. Иначе говоря, идентификатор self применяется в многооконных или многофреймовых системах, когда требуется указать окно с документом, в котором находится данный сценарий. Его рекомендуется вставлять, чтобы не запутаться. При запуске сценария в ссылках на объекты только текущего документа (типичная ситуация) идентификаторы window и self можно опускать.
У объекта window есть ряд подобъектов. Мы уже рассматривали некоторые свойства объекта события event, который является подобъектом объекта window. Другой объект, location, содержит информацию, полезную для работы в сети и для создания ссылок в документах с многофреймовой структурой. Кроме этого, свойство href объекта location используется для загрузки документа в текущее окно:
window. location.href = "URL -адрес_документа"
Данный способ загрузки документов в текущее окно браузера доступен во всех версиях IE и NN. В IE можно использовать также и метод navigate():
window.navigate("URL-aдрес_документа")
Главное окно браузера создается не с помощью сценариев, а автоматически, когда пользователь запускает браузер, а также при открытии документа с определенным URL-адресом или другого файла. В HTML открыть документ в новом окне можно с помощью атрибута TARGET тега ссылки <А HREF =...>.
<А HREF= "http://www.rambler.ru" TARGET = "newWindow"> Rаmbler</A>.
С помощью сценария можно создать любое количество окон. Для этого применяется метод
window.open([параметры])
Этому методу передаются следующие необязательные параметры:
В строке свойств записываются пары "свойство=значение", которые отделяются друг от друга запятыми. В таблице приведен список свойств окна, передаваемых в строке features. Значения yes и nо можно заменить числовыми эквивалентами 1 и 0 соответственно.
| Свойство | Значение | Описание |
| channelmode | yes, no, 1, 0 | Показывает элементы управления Channel |
| directories | yes, no, 1, 0 | Включает кнопки каталога |
| fullscreen | yes, no, 1, 0 | Полностью разворачивает окно |
| height | Число | Высота окна в пикселах |
| left | Число | Положение по горизонтали относительно левого края экрана в пикселах |
| location | yes, no, 1, 0 | Текстовое поле Address |
| menubar | yes, no, 1, 0 | Стандартные меню браузера |
| resizeable | yes, no, 1, 0 | Может ли пользователь изменять размер окна |
| scrollbars | yes, no, 1, 0 | Горизонтальная и вертикальная полосы прокрутки |
| status | yes, no, 1, 0 | Стандартная строка состояния |
| toolbar | yes, no, 1, 0 | Включает панели инструментов браузера |
| top | Число | Положение по вертикали относительно верхнего края экрана пикселах |
| width | Число | Ширина окна в пикселах |
Рассмотрим примеры.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Сoздание новых окон</title>
<script language="JavaScript">
window.open("stage.html", "newWin", "height=300, width=400")
window.open("news.html")
</script>
</head>
<body>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Сoздание новых окон</title>
<script language="JavaScript">
features="top=100, left=30, height=400, width=500, location=no, menubar=yes"
window.open("http://sevidi.narod.ru/","newWin",features)
</script>
</head>
<body>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Вместо третьего параметра (строки features) можно использовать значение true. В этом случае указанный документ загружается в уже существующее окно, вытесняя предыдущий.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Сoздание новых окон</title>
<script language="JavaScript">
features="top=100, left=30, height=400, width=500, location=no, menubar=yes"
window.open("http://sevidi.narod.ru/","newWin",true)
</script>
</head>
<body >
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Метод window.open() возвращает ссылку на объект окна. Эту ссылку можно сохранить в переменной, чтобы потом использовать, например при закрытии окна.
Для закрытия окна служит метод close(). Выражение window.close() или self.close() закрывают главное окно, а не дополнительное, которое вы создали методом open(). В этом случае как раз и необходима ссылка на созданное окно. Эту ссылку следует сохранить в глобальной переменной, чтобы иметь доступ к ней до тех пор, пока главный документ загружен в браузер. Рассмотрим пример.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Сoздание новых окон</title>
<script language="JavaScript">
var objwin=window.open("http://sevidi.narod.ru/","newWin",true)
objwin.close()
window.open("stage.html", "newWin", "height=300, width=400")
</script>
</head>
<body >
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
В нашем случае с помощью метода close() закрыто первое окно, созданное с помощью метода window.open("http://sevidi.narod.ru/","newWin",true). Второе окно остается загруженным в браузере.
Метод window.open() открывает новое независимое окно как экземпляр браузера. В этом случае при закрытии главного окна браузера новое окно остается открытым. Независимые окна называют еще немодальными (modalless). Однако можно создать и так называемое модальное окно. Пока открыто модальное окно, пользователь не может обратиться к другим окнам, в том числе и к главному. Так обычно работают стандартные диалоговые окна. Например, окна, создаваемые методами alert(), prompt() и confirm() являются модальными. В модальное окно можно загрузить любой документ.
Для создания модального окна используется метод showModalDialog(). Так же, как и метод open(), он принимает в качестве параметров адрес документа (файла), имя окна и строку свойств. Однако формат этой строки другой. В частности, параметры в строке разделяются точкой с запятой, размеры окна и координаты его верхнего левого угла требуют указания единиц измерения (например, рх — пикселы). Кроме того, этот метод не возвращает ссылку на объект окна, поскольку она не нужна для модального окна.
В таблице приведен список свойств окна, созданного методом showModalDialog() и передаваемых в строке features.
| Свойства | Значения | Описание |
| order | thick, thin | Размер рамки вокруг окна (толстая или тонкая) |
| center | yes, no, 1, 0 | Выравнивание окна по центру главного |
| dialogHeight | Число с единицей измерения | Высота окна |
| dialogLeft | Число с единицей измерения | Горизонтальная координата |
| dialogTop | Число с единицей измерения | Вертикальная координата |
| dialogWidth | Число с единицей измерения | Ширина окна |
| font | Строка таблицы стилей | Стиль, определенный по умолчанию для окна |
| font-family | Строка таблицы стилей | Вид шрифта, определенный по умолчанию для окна |
| font-size | Строка таблицы стилей | Размер шрифта, определенный по умолчанию для окна |
| font-style | Строка таблицы стилей | Тип шрифта, определенный по умолчанию для окна |
| font-variant | Строка таблицы стилей | Вариант шрифта(обычный или курсив) определенный по умолчанию для окна |
| font-weight | Строка таблицы стилей | Толщина шрифта, определенная по умолчанию для окна |
| help | yes, no, 1, 0 | Включение кнопки Справка ( Нelp) в заголовке окна |
| maximize | yes, no, 1, 0 | Включение кнопки Развеннуть (Мaximize) в заголовке окна |
| minimize | yes, no, 1, 0 | Включение кнопки Свернуть (Мinimize) в заголовок |
| font-weight | Строка таблицы стилей | Толщина шрифта, определенная по умолчанию для окна |
| help | yes, no, 1, 0 | Включение кнопки Справка ( Нelp) в заголовке окна |
| maximize | yes, no, 1, 0 | Включение кнопки Развеннуть (Мaximize) в заголовке окна |
| minimize | yes, no, 1, 0 | Включение кнопки Свернуть (Мinimize) в заголовок |
Рассмотрим пример.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Сoздание новых окон</title>
</head>
<body >
<button style="background-color:#CCFF00" onClick="return openWin1()" > Открыть окно 1</button>
<button style="background-color:#66FFFF"onClick="return openWin2()" > Открыть окно 2</button>
<script language="JavaScript">
var newWindow //глобальная переменная для ссылки на окно
function openWin1(){ //открытие первого окна
window.status="Первое окно /*статусная строка главного окна*/
strfeatures="top=200,left=150, width=400, height=350, scrollbars=yes"
window.open("stage.html", "Win1", strfeatures)
}
function openWin2(){ //открытие второго модального окна
window.status="Второе окно" /*статусная строка главного окна*/
strfeatures="dialogWidth=400px; dialogHeight=350px; scrollbars=yes"+"border=thin;help=no"
window.showModalDialog("stage1.html","win2", strfeatures )
}
function closeWin1(){ //закрытие первого окна
if(newWindow){ //если первое окно открыто
newWindow.close() //закрыть первое окно
newWindow=null //очистить ссылку на первое окно
window.status=""
}
}
</script>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Похожие материалы по теме: Фреймы. Разделение окна веб-браузера на несколько областей
Обсудить на форуме