Открытие новых окон с помощью сценариев JavaScript. Данная лабораторная работа имеет дело с командами Javascript, которые используются для открытия нового окна. В новом окне будет выводиться другой документ HTML. Начнем с основ. Сценарий: <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. Тэги в новом окне. В открывающееся новое окно загружается документ HTML opened.html. Это обычная страница HTML, которая может содержать любые команды, в частности, с этой страницы можно управлять загрузкой других документов. Например, чтобы открыть главную страницу mail.ru в основном окне, надо поместить на ней следующий код: <A HREF="http://www.mail.ru" TARGET="main window"></A> Основное окно всегда имеет по умолчанию имя "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="les.htm" onClick="window.open('opened.html', 'joe', config='height=300,width=300')">Щелкните, чтобы открыть 'joe'</A> Это ссылка HREF, которая направлена на саму себя. Команда onClick делает работу, а параметры содержатся в скобках (). Задание: здесь не были показаны в действии все доступные функции, так что в качестве задания напишите сценарий, который откроет новое окно со всеми характеристиками. Пусть оно будет размером 300на 500 пикселей и содержит две ссылки: одна откроет новую страницу в главном окне; вторая откроет новую страницу в том же окне. Страница, которая откроется в том же маленьком окне, должна содержать ссылку, закрывающую окно. И сделайте фон страницы желтым (ffff00). Питання та завдання для самоконтролю та самоперевірки: 1. Створіть функцію, що створює два запити (prompt). (Підказка: один послідує за іншим з нового рядка.) Перший пропонує користувачеві ввести своє ім'я, другий - прізвище. Потім та ж функція повинна викликати вікно повідомлення (alert) c текстом: Привіт, "ім'я прізвище", ласкаво просимо на "адресу сторінки", мою чудову сторінку! 2. Напишіть сценарій, що відкриє нове вікно з усіма характеристиками. Нехай воно буде розміром 300на 500 пикселей і містить два посилання:одне відкриє нову сторінку в головному вікні; друга відкриє нову сторінку в тім же вікні. Сторінка, що відкриється в тім же маленькому вікні, повинна містити посилання, що закриває вікно.зробіть фон сторінки жовтим (ffff00). |