Wiki-учебник по веб-технологиям: JavaScript/СозданиеОкон ...

Главная | Каталог |

Создание окон


Открытие новых окон браузера — великолепное свойство JavaScript. Вы можете или загрузить новый документ (например HTML-документ) в новое окно, или вы можете создавать новые (оперативные) документы. Мы сначала рассмотрим то, как мы можем открыть новое окно, загрузить HTML-страницу в это окно и затем снова закрыть его.

Следующий сценарий открывает новое окно браузера и загружает бессмысленную страницу:

<html>
<head>
<script language="JavaScript">
<!-- hide

function openWin() {
  myWin= open("bla.htm");
}

// -->
</script>
</head>
<body>

<form>
<input type="button" value="Open new window" onClick="openWin()">
</form>

</body>
</html>


Страница bla.htm загружается в новое окно, посредством метода open().

Вы можете управлять появлением нового окна. Например вы можете решать, должно ли окно иметь строку статуса, инструментальную панель или меню. Помимо этого вы можете определять размер окна. Следующий сценарий открывает новое окно, которое имеет размер 400x300. Окно не имеет строки состояния, инструментальной панели и меню.

<html>
<head>
<script language="JavaScript">
<!-- hide

function openWin2() {
  myWin= open("bla.htm", "displayWindow", 
    "width=400,height=300,status=no,toolbar=no,menubar=no");
}

// -->
</script>
</head>
<body>

<form>
<input type="button" value="Open new window" onClick="openWin2()">
</form>

</body>
</html>


Вы можете видеть, что свойства в строке «width=400,height=300,status=no,toolbar=no,menubar=no».
Пожалуйста, обратите внимание на то, что вы не должны использовать пробелов внутри этой строки!

Ниже представлен список свойств, которые может иметь окно:

directories yes/no
height число пикселей
location yes/no
menubar yes/no
resizable yes/no
scrollbars yes/no
status yes/no
toolbar yes/no
width число пикселей
alwaysLowered yes/no
alwaysRaised yes/no
dependent yes/no
hotkeysyes/no
innerWidth число пикселей (заменяет width)
innerHeight число пикселей (заменяет height)
outerWidth число пикселей
outerHeight число пикселей
screenX число пикселей
screenY число пикселей
titlebar yes/no
z-lock yes/no

Вы найдете объяснение этих свойств в руководстве JavaScript 1.2. Позже, я объясню и некоторые примеры.
С помощью этих свойств вы можете теперь определить, в которой позиции окно должно открыться.

Имя окна


Как вы могли видеть, мы используем три аргумента при окрытия окна:

myWin= open("bla.htm", "displayWindow", 
    "width=400,height=300,status=no,toolbar=no,menubar=no");


Для чего нужен второй аргумент? Это имя окна. Мы и раньше видели, как используется target-свойство. Если вы знаете имя существующего окна, вы можете загрузить новую страницу в него с помощью

<a href="bla.html" target="displayWindow">


Здесь вам необходимо имя окна (если окно не существует, этим кодом создаётся новое окно).
Пожалуйста обратите внимание на то, что myWin-- не имя окна. Просто через эту переменную вы можете обращаться к окну. Поскольку myWin — нормальная переменная, она имеет силу только внутри сценария, в котором она определена. Имя окна (здесь displayWindow) — уникальное имя, которое может использоваться всеми существующими окнами браузера.