Опубликован: 19.10.2006 | Уровень: для всех | Доступ: платный
Лекция 12:

Открываем новые окна

< Лекция 11 || Лекция 12: 12 || Лекция 13 >
Аннотация: Методы создания и работы с новыми окнами.

Концепция

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

Второй урок также рассматривает создание нового окна, но с помощью функции — так, чтобы оба окна содержали одну и ту же страницу. Не нужно будет использовать две страницы HTML. Все можно будет сделать с помощью одной страницы HTML и сценария JavaScript.

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

Сценарий

<SCRIPT type="text/javascript" >

window.open('opened.html', 'joe', config='height=300,width=300')

</SCRIPT>

Результат работы сценария

Обратите внимание! Представленный здесь сценарий будет только открывать окно. В этом окне выводится документ opened.html. Содержание документа будет рассмотрено позже.

Разбор сценария

Расположение на странице

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

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

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

window.open

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

Конфигурация нового окна

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

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

В рассматриваемом случае мы имеем:

('opened.html', 'joe', config='height=300,width=300')
  • opened.html — это URL страницы, которая появится в новом окне. Если страница располагается на другом сервере, то необходимо добавить http:// и так далее.
  • joe — имя нового окна. Далее это будет важно.
  • config= указывает, что следующие команды относятся к конфигурации нового окна.

Команды config

Приведенные выше команды config открывают новое окно размером 300 на 300 пикселей.

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

Обратите внимание, что команды height (высота) и width (ширина) разделены только запятой без пробелов, а значения поставлены в одинарные кавычки, так как эти два элемента являются подкомандами config и должны выполняться совместно. Пробел для браузера означает конец команды. Ошибка.

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

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

  • toolbar= отвечает за наличие панели инструментов во вновь открытом окне. Панель инструментов в верхней части окна браузера содержит кнопки НАЗАД, ВПЕРЕД, СТОП и т.д. ()
  • menubar= отвечает за наличие строки меню с элементами ФАЙЛ, ПРАВКА, ВИД и т.д.
  • scrollbars= отвечает за наличие полосы прокрутки.
  • resizable= указывает, может ли пользователь изменить размер окна по своему желанию.
  • location= отвечает за наличие адресной строки во вновь открытом окне, в которой выводится URL страницы.
  • directories= отвечает за наличие строки каталогов в новом окне, которая содержит закладки и т.п.
  • status= отвечает за наличие строки состояния.

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

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

< Лекция 11 || Лекция 12: 12 || Лекция 13 >
Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Эдуард Семынин
Эдуард Семынин

Здравствуйте.

Перестали быть видны лекции и тесты практикума по программированию на JavaScript. Уже второй день из моего аккаунта виден лишь план занятий. В чем может быть проблема?

 

Alex Chekalov
Alex Chekalov
Украина, Poltava
Виктория Вернер
Виктория Вернер
Украина, Днепропетровск, ДИИТ, 2012