Открытие нового окна средствами JavaScript

   Многие посетители писали нам письма, в которых интересовались, как открыть новое окно браузера с присутствием одних панелей и отсутствием других, как создать новое окно вообще без панелей инструментов, как создаются самораскрывающиеся окна и т.д. Поэтому мы решили написать данную статью, где подробно описать, каким же образом это реализуется, и какие параметры могут быть использованы.


   Начнем с маленького отступления. Какие возможности нам предоставляет в чистом виде язык HTML? Мы можем открывать ссылку в новом окне, использовав атрибут target со значением _blank, на этом, собственно, возможности HTML и заканчиваются:

<a href="http://www.site.ru" target="_blank">Site.ru</a>

В этом случае ссылка откроется в новом окне браузера, которое будет выглядеть так же, как и предыдущее с точки зрения наличия / отсутствия определенных панелей браузера, кроме того, это окно, как правило, открывается в оконном режиме, размеры которого также у каждого пользователя могут быть различны.


   Как Вы, наверное, уже знаете, для контроля всех перечисленных параметров используются возможности JavaScript, а конкретно метод open объекта window. Запишем его со всеми возможными параметрами:

window.open('http://www.site.ru','namewin','top, left, menubar, toolbar, location, directories, status, scrollbars, resizable, width, height')

здесь 3 группы параметров, каждая из которых заключена в апострофы (одинарные кавычки).



   Рассмотрим эти параметры:

http://www.site.ru - это адрес сайта, открываемого в новом окне браузера;

namewin - это имя, которое будет присвоено открываемому окну. Имя может состоять из букв английского алфавита (больших и малых), цифр и знака "_". Затем по имени можно обращаться к новому окну и совершать различные действия с ним: загружать в него другой сайт, перемещать окно и т.д. вплоть до закрытия этого окна.


top - отступ открываемого окна от верхней части экрана. Значение задается в пикселах, например, top=25.

left - отступ открываемого окна от левой части экрана. Значение задается в пикселах, например, left=20.


menubar - определяет показывать строку меню браузера в открываемом окне или нет. Значениями являются yes или no, вы также можете использовать в виде значений соответственно 1 и 0. Значения true (правда) и false (ложь) не совсем корректно воспринимаются браузерами Netscape, поэтому таким образом задавать значения не рекомендуется. Например, menubar=1. Кроме того, если меню присутствует, то пользователь получает возможность добавить или удалить какие-либо панели браузера с помощью команд меню.

toolbar - определяет показывать в открываемом окне панель "Обычные кнопки" (назад, вперед, остановить и т.д.) или нет. Для браузера Netscape эта панель называется "Панель навигации". Значения задаются аналогично предыдущему параметру, например, toolbar=no.

location - определяет показывать панель "Адресная строка" (в Netscape "Панель адреса") или нет. Значения задаются аналогично предыдущему параметру, например, location=0.

directories - определяет показывать панель "Ссылки" (в Netscape "Личная панель инструментов") или нет. Значения задаются аналогично предыдущему параметру, например, directories=yes.

status - определяет показывать строку состояния (статуса) или нет. Значения задаются аналогично предыдущему параметру, например, status=1.


scrollbars - определяет можно ли при необходимости (когда содержимое странички не помещается на экране) показывать панели прокрутки (горизонтальные и вертикальные) или нет. Значения задаются аналогично предыдущему параметру, например, scrollbars=0.

resizable - определяет возможность пользователя изменять размеры открываемого окна. Если задано значение resizable=0, то в открываемом окне недоступной становится кнопка "Развернуть" (при доступных "Свернуть" и "Закрыть"), а в Netscape 6 вообще не отображаются никакие кнопки, кроме доступной "Закрыть".


width - ширина открываемого окна. Значение задается в пикселах, например, width=450.

height - высота открываемого окна. Значение задается в пикселах, например, height=300.


Примечание: если Вы используете метод open совсем без параметров, то есть open(), то будет открыто пустое новое окно (about:blank). Использование только первого параметра (или первого и второго) аналогично примеру на чистом HTML, но если использован второй параметр, то к окну можно будет обратиться по имени. Если в списке 3 группы параметров указан один из параметров, а остальные параметры, отвечающие за наличие / отсутствие панелей, не указаны, то они автоматически считаются равными 0.



   Использование:

   Для использования метода open объекта window его сопоставляют с обработчиком какого-либо события, рассмотрим это на примерах:

<form>
<input onclick="window.open('http://www.site.ru','newwin','top=15, left=20, menubar=0, toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, width=400, height=300')" type=button value="Кнопка">
</form>

Мы создали форму с одной единственной кнопкой. Если пользователь нажмет на нее (событие onclick), то будет открыто новое окно браузера (с именем newwin) без каких-либо панелей, строки статуса, панелей прокрутки, без возможности изменения размеров шириной 400 пикселей и высотой 300 пикселей, в которое начнется загрузка сайта http://www.site.ru


   Также Вы можете записать содержимое обработчика события onclick в виде отдельной функции JavaScript, а потом в обработчике события просто вызвать эту функцию.


   Рассмотрим создание текстовых ссылок, использовав вызов заранее созданной функции JavaScript (и записанной в заголовке странички), которая выполняет открытие нового окна:

<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
function new_window()
{
window.open('http://www.site.ru','newwin','top=15, left=20, menubar=0, toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, width=400, height=300');
}
// -->
</SCRIPT>
</head>
.
.
.

<a href="javascript: new_window()">Site.ru</a>

Непосредственно при нажатии на ссылку выполняется соответствующая функция JavaScript, в данном случае new_window.

Copyright Atoev Jake company © 2001