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

Обратите внимание! Представленный здесь сценарий будет только открывать окно. В этом окне выводится документ 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. А в общем, назови хоть горшком, научись только пользоваться.

Тэги в новом окне

В открывающееся новое окно загружается документ HTML opened.html. Это обычная страница HTML, которая может содержать любые команды, в частности, с этой страницы можно управлять загрузкой других документов. Например, чтобы открыть главную страницу INTUIT в основном окне, надо поместить на ней следующий код:

Основное окно всегда имеет по умолчанию имя "main". Поэтому в команду HREF документа HTML добавляется просто команда TARGET="—" c указанием main для окна, в которое должна загрузиться страница.

А если надо, чтобы страница загрузилась в новом окне? У этого окна, как было сказано выше, тоже есть имя, здесь оно названо joe. Необходимо написать просто команду ссылки HREF с указанием окна joe.

Можно открыть на самом деле несколько окон, добавляя несколько команд window.open. Надо только задать окнам различные имена. Можно создавать также ссылки между окнами, указывая необходимые имена окон.

Закрытие окна

Можно создать также в документе ссылку, которая будет закрывать окно. Вот как это делается:

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

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

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

Задание

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

одна откроет новую страницу в главном окне; вторая откроет новую страницу в том же окне.

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

И сделайте фон страницы желтым (ffff00).

Возможное решение

<SCRIPT type="text/javascript"> window.open ('opened2.html', 'newwin', config='height=100,width=400,toolbar=no,menubar=yes,scrollbars=no,resizable=no,location=no,directories=yes,status=no') </SCRIPT>

Использованы все характеристики. Ссылки внутри нового окна написаны так же, как и в материалах урока.

12. Урок: Открытие окна с помощью функции

Основные функции для манипуляции с окнами.

Концепция

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

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

Сценарий

<SCRIPT type="text/javascript">function openindex() { var OpenWindow=window.open("", "newwin", "height=300,width=300");OpenWindow.document.write("<HTML>")OpenWindow.document.write("<TITLE>Новое окно</TITLE>")OpenWindow.document.write("<BODY BGCOLOR='00ffff'>")OpenWindow.document.write("<CENTER>")OpenWindow.document.write("<font size=+1>Новое окно</font><P>")OpenWindow.document.write("<a href='http://www.intuit.ru' target='main'>Эта ссылка<BR> откроется в основном окне</a><p>")OpenWindow.document.write("<P><HR WIDTH='60%'><P>")OpenWindow.document.write("<a href='' onClick='self.close()'>Эта ссылка закроет окно</a><p>")OpenWindow.document.write("</CENTER>")OpenWindow.document.write("</HTML>")}</SCRIPT>

...и в команде BODY:

onLoad="openindex()"

Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями: