ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Окна и фреймы. Создание новых окон

Окна и фреймы

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).

В строке свойств записываются пары "свойство=значение", которые отделяются друг от друга запятыми. В таблице приведен список свойств окна, передаваемых в строке features. Значения yes и можно заменить числовыми эквивалентами 1 и 0 соответственно.

Таблица. Свойства окна, передаваемые в строке features
Свойство Значение Описание
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 Число Ширина окна в пикселах

Рассмотрим примеры.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Сoздание новых окон</title>
<script language="JavaScript">
window.open("193.html", "newWin", "height=300, width=400")
window.open("190.html")
</script>
</head>

<body>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Сoздание новых окон</title>
<script language="JavaScript">
features="top=100, left=30, height=400, width=500, location=no, menubar=yes"
window.open("http://rambler.ru/","newWin",features)
</script>
</head>

<body>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Вместо третьего параметра (строки features) можно использовать значение true. В этом случае указанный документ загружается в уже существующее окно, вытесняя предыдущий.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Сoздание новых окон</title>
<script language="JavaScript">
features="top=100, left=30, height=400, width=500, location=no, menubar=yes"
window.open("http://rambler.ru/","newWin",true)
</script>
</head>

<body>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Метод window.open() возвращает ссылку на объект окна. Эту ссылку можно сохранить в переменной, чтобы потом использовать, например при закрытии окна.

Для закрытия окна служит метод close(). Выражение window.close() или self.close() закрывают главное окно, а не дополнительное, которое вы создали методом open(). В этом случае как раз и необходима ссылка на созданное окно. Эту ссылку следует сохранить в глобальной переменной, чтобы иметь доступ к ней до тех пор, пока главный документ загружен в браузер.

Рассмотрим пример.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Сoздание новых окон</title>
<script language="JavaScript">
var objwin=window.open("http://rambler.ru/","newWin",true)
objwin.close()
window.open("241.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.

Свойства окна, созданного методом showModalDialog()
Свойства Значения Описание
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) в заголовок

Рассмотрим пример.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<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("192.html", "Win1", strfeatures)
}
function openWin2(){ //открытие второго модального окна
window.status="Второе окно" /*статусная строка главного окна*/
strfeatures="dialogWidth=400px; dialogHeight=350px; scrollbars=yes"+"border=thin;help=no"
window.showModalDialog("193.html","win2", strfeatures )
}
function closeWin1(){ //закрытие первого окна
if(newWindow){ //если первое окно открыто
newWindow.close() //закрыть первое окно
newWindow=null //очистить ссылку на первое окно
window.status=""
}
}
</script>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.