Как открыть новое окно

Strelok · 29.12.2010, 18:24

Концепция

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

Начнем с основ.
Скрипт

<SCRIPT LANGUAGE="javascript">

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

</SCRIPT>

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

Расположение на странице
Начнем с расположения скрипта на странице. До сих пор я говорил, что лучше помещать скрипты повыше, чтобы они первыми загружались в память компьютера и начинали работать без задержки. Когда вы имеете дело с функцией, скрипт помещается между командами <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 в главном окне. Вот как это получается:

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

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

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

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

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

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

Lunnka · 21.06.2017, 20:31

Лучше подряд все в книге учить..

Gulik · 12.03.2018, 01:21

Если есть хорошая книга, киньте.

29.12.2010, 18:24	#1
Strelok Бессмертный Регистрация: 22.01.2009 Адрес: Ф жДуНгЛяХ Сообщений: 1,388 Сказал(а) спасибо: 134 Поблагодарили 614 раз(а) в 333 сообщениях Настроение: Вес репутации: 382	Как открыть новое окно *Концепция* Это первый из двух уроков, посвященных открытию новых окон. Сначала вы узнаете, как через команды Javascript открыть новый документ HTML в другом окне. Второй урок научит вас, как с помощью функции поместить две разные страницы в одном документе. Начнем с основ. *Скрипт* <SCRIPT LANGUAGE="javascript"> window.open('opened.html', 'joe', config='height=300,width=300') self.name="main window" </SCRIPT> *Разбор скрипта* Расположение на странице Начнем с расположения скрипта на странице. До сих пор я говорил, что лучше помещать скрипты повыше, чтобы они первыми загружались в память компьютера и начинали работать без задержки. Когда вы имеете дело с функцией, скрипт помещается между командами <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 в главном окне. Вот как это получается: <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> И вот что у вас выйдет (если вы еще не закрыли маленькое окно, сделайте это, потому что ссылка попытается его открыть): Щелкните, чтобы открыть 'joe' Это ссылка HREF, которая направлена на самое себя. Команда onClick делает работу, а параметры содержатся в скобках(). В следующем Уроке мы поговорим о том, как из одной страницы сделать две. *Ваше задание* Я не показал вам в действии все доступные характеристики окна, так что в качестве задания напишите скрипт, который откроет новое окно со всеми характеристиками. Пусть оно будет размером 250 на 300 пикселей и с двумя ссылками: Одна откроет новую страницу в главном окне. Вторая откроет новую страницу в том же окне. Страница, которая откроется в том же маленьком окне, должна содержать ссылку, закрывающую окно. __________________

21.06.2017, 20:31	#2
Lunnka Новичок Регистрация: 21.06.2017 Сообщений: 7 Сказал(а) спасибо: 0 Поблагодарили 0 раз(а) в 0 сообщениях Вес репутации: 136	Ответ: Как открыть новое окно Лучше подряд все в книге учить..

12.03.2018, 01:21	#3
Gulik Новичок Регистрация: 12.03.2018 Сообщений: 7 Сказал(а) спасибо: 0 Поблагодарили 0 раз(а) в 0 сообщениях Вес репутации: 123	Ответ: Как открыть новое окно Если есть хорошая книга, киньте.

Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)