Это первый из двух уроков, посвященных открытию новых окон. Сначала вы узнаете, как через команды Javascript открыть новый документ HTML в другом окне. Второй урок научит вас, как с помощью функции поместить две разные страницы в одном документе.
Начнем с основ.
Скрипт
<SCRIPT LANGUAGE="javascript">
window.open('les1.htm', 'joe',
config='height=300,width=300')
self.name="main window"
</SCRIPT>
Результат
Вы видели, как действует скрипт, когда открывали страницу. Всплыло второе окно с 1 Уроком данного учебника.
Разбор скрипта
Расположение на странице
Начнем с расположения
скрипта на странице. До сих пор я говорил, что лучше помещать скрипты
повыше, чтобы они первыми загружались в память компьютера и начинали
работать без задержки. Когда вы имеете дело с функцией, скрипт помещается
между командами <HEAD>. Здесь я хочу сделать вам другое
предложение.
Если вы собираетесь открывать новое окно, ставьте скрипт ближе к концу документа. Проще говоря, пусть он идет в последнюю очередь. Причина простая: сначала загрузится страница, а потом всплывет окошко. Если команда стоит в начале, то окошко всплывет прежде, чем пользователь увидит вашу страницу. Скорее всего он закроет новое окно, не успев им воспользоваться.
Это только мое мнение. На самом деле можно ставить скрипт куда угодно, и он будет работать. Просто я считаю, что чем позже откроется новое окно, тем лучше для вас и для посетителей ваших страниц.
Не стоит злоупотреблять всплывающими окнами. По себе и по другим знаю, как это иногда раздражает. Если же появление нового окна оправдано, то хорошо бы предупредить об этом заранее.
window.open
Нельзя сказать яснее, чем это:
window (окно) — объект, a open (открыть) — метод, который на него воздействует.
Конфигурация нового окна
Информация об этом
находится в круглых скобках (это называется примером, помните?) Вот схема,
которой вы будете следовать:
('URL документа в новом окне', 'Название нового окна', config='параметры нового окна')
Сегодняшний образец:
('opened.html','joe',config='height=300,width=300')
Команды конфигурации
Они сообщают, что новое
окно будет размером 300 на 300 пикселей.
Кстати, всегда делайте ваше окно немножко больше, чем нужно вам. Может быть, у кого-то другое разрешение экрана, и ваши размеры окна ему не годятся.
Обратите внимание, что команды height (высота) и width (ширина)
разделены только запятой без пробелов, а значения
поставлены в одинарные кавычки, так как эти два элемента являются
подкомандами config. Пробел для браузера означает конец команды.
Ошибка.
Есть множество подкоманд для команды config. Про высоту и
ширину вы уже знаете, они определяются в пикселях. Остальные подкоманды
употребляются со словами «yes» или «no» в зависимости от того, нужны ли в
новом окне эти элементы. (Можно ставить «1» вместо «да» и «0» вместо
«нет».) Помните, никаких пробелов между подкомандами и одинарные
кавычки.
От строки с заголовком вы не избавитесь никогда, хотите вы этого или нет.
Может быть, вы думаете, что все вышеперечисленное — свойства. Нет. Если вам проще их запомнить, считая свойствами, отлично, считайте их чем угодно. Но в действительности они называются характеристиками или атрибутами. А в общем, назови хоть горшком, научись только пользоваться.
Тэги в новом окне
Всплывающее новое окно — это
не просто рамка для страницы.
Как видите, я поставил две ссылки. Первая
открывает домашнюю страницу HTML Goodies в главном окне. Вот как это
получается:
<A HREF="http://www.htmlgoodies.com" TARGET="main window"></A>
У большого окна есть имя, «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>
И вот что у вас выйдет (если вы еще не закрыли маленькое окно, сделайте это, потому что ссылка попытается его открыть):
Это ссылка HREF, которая направлена на самое себя. Команда onClick делает работу, а параметры содержатся в скобках().
В следующем Уроке мы поговорим о том, как из одной страницы сделать две.
Ваше задание
Я не показал вам в действии все доступные характеристики окна, так что в качестве задания напишите скрипт, который откроет новое окно со всеми характеристиками. Пусть оно будет размером 250 на 300 пикселей и с двумя ссылками:
Возможный ответ здесь