Урок 11
Новые окна

красным цветом даны примечания переводчика
Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Концепция

Это первый из двух уроков, посвященных открытию новых окон. Сначала вы узнаете, как через команды Javascript открыть новый документ HTML в другом окне. Второй урок научит вас, как с помощью функции поместить две разные страницы в одном документе.

Начнем с основ.

Скрипт

window.open('opened.html', 'joe', config='height=300,width=300')
self.name="main window"

</SCRIPT>

Эффект

Вы видели, как действует скрипт, когда открывали страницу. Всплыло второе окно с двумя ссылками: на HTML Goodies и закрывающая окно.

Разбор скрипта

Расположение на странице
Начнем с расположения скрипта на странице. До сих пор я говорил, что лучше помещать скрипты повыше, чтобы они первыми загружались в память компьютера и начинали работать без задержки. Когда вы имеете дело с функцией, скрипт помещается между командами <HEAD>. Здесь я хочу сделать вам другое предложение.

Если вы собираетесь открывать новое окно, ставьте скрипт ближе к концу документа. Проще говоря, пусть он идет в последнюю очередь. Причина простая: сначала загрузится страница, а потом всплывет окошко. Если команда стоит в начале, то окошко всплывет прежде, чем пользователь увидит вашу страницу. Скорее всего он закроет новое окно, не успев им воспользоваться.

Это только мое мнение. На самом деле можно ставить скрипт куда угодно, и он будет работать. Просто я считаю, что чем позже откроется новое окно, тем лучше для вас и для посетителей ваших страниц.

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

window.open
Нельзя сказать яснее, чем это: window (окно) — объект, a open (открыть) — метод, который на него воздействует.

Конфигурация нового окна
Информация об этом находится в круглых скобках (это называется примером, помните?) Вот схема, которой вы будете следовать:

('URL документа в новом окне', 'Название нового окна', config='параметры нового окна')

Сегодняшний образец:
('opened.html','joe',config='height=300,width=300')

opened.html — это URL страницы, которая появится в новом окне. Если страница располагается на другом сервере, то добавьте http:// и так далее.
joe — название нового окна. Через минуту я объясню вам, для чего оно нужно. config= указывает, что следующие команды относятся к конфигурации нового окна.

Команды конфигурации
Они сообщают, что новое окно будет размером 300 на 300 пикселей.

Кстати, всегда делайте ваше окно немножко больше, чем нужно вам. Может быть, у кого-то другое разрешение экрана, и ваши размеры окна ему не годятся.

Обратите внимание, что команды height (высота) и width (ширина) разделены только запятой без пробелов, а значения поставлены в одинарные кавычки, так как эти два элемента являются подкомандами config. Пробел для браузера означает конец команды. Ошибка.
Есть множество подкоманд для команды config. Про высоту и ширину вы уже знаете, они определяются в пикселях. Остальные подкоманды употребляются со словами «yes» или «no» в зависимости от того, нужны ли в новом окне эти элементы. (Можно ставить «1» вместо «да» и «0» вместо «нет».) Помните, никаких пробелов между подкомандами и одинарные кавычки.

toolbar= отвечает за наличие панели инструментов c кнопками НАЗАД, ВПЕРЕД, СТОП и т.д.
menubar= отвечает за наличие строки меню с элементами ФАЙЛ, ПРАВКА, ВИД и т.д.
scrollbars= отвечает за наличие полосы прокрутки. Я никогда не делаю новое окно с полосой прокрутки. По-моему, это убивает весь эффект.
resizable= указывает, сможет ли пользователь изменить размер окна по своему желанию.

Я вас умоляю, никогда не ставьте здесь «нет», если только это не художественная инсталляция!

location= отвечает за наличие адресной строки, где виден URL страницы.
status= отвечает за наличие строки состояния.

От строки с заголовком вы не избавитесь никогда, хотите вы этого или нет.

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

Тэги в новом окне
Всплывающее новое окно — это не просто рамка для страницы.
Как видите, я поставил две ссылки. Первая открывает домашнюю страницу HTML Goodies в главном окне. Вот как это получается:

У большого окна есть имя, «main window» (главное). Вот почему я называл его главным на протяжении всего урока. В скрипте это обозначено строкой self.name="main window". Добавляем в ссылку HREF TARGET="--" (цель) и указание на main window.

А если надо, чтобы страница загружалась в маленьком окошке? Что ж, как оно называется? «joe». Помните? Просто нужно написать «joe» после команды target.

С помощью многократных команд window.open можно вызывать многократные окна. Только следите за тем, чтобы у каждого нового окна было свое имя. Можете связывать окна ссылками при условии, что правильно указываете имена окон в команде target.

Закрыть окно
Вторая ссылка нового окна закрыла его. Вот как это сделано:

<A HREF="" onClick="self.close">Щелкните, чтобы закрыть</A>

Это обычная ссылка HREF, которая никуда не ведет. Видите пустые кавычки? Команда onClick="self.close" закрывает окно и никуда не ведет.
self (само, себя) — это свойство может относиться к любому объекту. В нашем случае это свойство окна. Команда close (закрыть) закрывает окно.

Еще кое-что
Допустим, вы хотите открыть окно по команде, а не когда пользователь заходит на страницу. Вот как это можно сделать:

<A HREF="les11.htm" onClick="window.open('opened.html', 'joe',
config='height=300,width=300')">Щелкните, чтобы открыть 'joe'</A>

И вот что у вас выйдет (если вы еще не закрыли маленькое окно, сделайте это, потому что ссылка попытается его открыть):

Щелкните, чтобы открыть 'joe'

Это ссылка HREF, которая направлена на самое себя. Команда onClick делает работу, а параметры содержатся в скобках().

В следующем Уроке мы поговорим о том, как из одной страницы сделать две.

Ваше задание

Я не показал вам в действии все доступные характеристики окна, так что в качестве задания напишите скрипт, который откроет новое окно со всеми характеристиками. Пусть оно будет размером 250 на 300 пикселей и с двумя ссылками:

Одна откроет новую страницу в главном окне.
Вторая откроет новую страницу в том же окне.
Страница, которая откроется в том же маленьком окне, должна содержать ссылку, закрывающую окно.

Возможный ответ здесь

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Вперед, на Урок 12