FAQ по созданию всплывающих и диалоговых окон (pop-up/popup) :: В помощь вебмастеру

обзор форума » (клиентские скрипты » JavaScript) » FAQ по окнам / Новые вопросы по браузерным окнам

Вопросы и ответы по окнам
FAQ по всплывающим (pop-up) окнам, а также модальным (диалоговым) окнам

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

Все новые вопросы по открытию новых окон просьба задавать в этой теме, впоследствии они будут добавлены сюда вместе с ответами.

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

? Как узнать размер картинки для того, чтобы открыть под неё окно соответствующего размера?

! Только предварительно загрузив интересующую картинку перед открытием нового окна:

Код:

var temp=new Image();
temp.src="picture.gif";

размер будет temp.width и temp.height
© Cheery

?
Цитата:

Как средствами JavaScript открыть окно нулевого размера?

! Никак. Даже если убрать все элементы интерфейса и указать в параметрах открываемого окна нулевые размеры-- окно всё равно получится больше, чем 0х0 пикселов:
Код:

При необходимости скрыть окно его можно поместить под остальные окна или же вынести за пределы экрана (см. ниже).

?
Цитата:

Дано: открывается основная страница, с ней открывается поп-ап страничка с текстом и графикой. В поп-апе есть ссылка!
Задача: при нажатии на ссылку надо, что бы поп-ап закрывался и открывалась новая страница в том окне, где открылась Основная старица!

!
1. В <body> основного документа добавляем код:

Код:

2. В открываемом file.html оформляем ссылку следующим образом:

Код:

?
Цитата:

Как сделать поп-андер окно, т.е. окно , которое незаметно открывается под текущими?

При открытии окна в параметрах напрямую нельзя указать, чтобы окно открывалось под другими окнами (есть параметр alwaysLowered, но его использование требует сертифицированного скрипта, тем более, что работает он только в 4-м Нетскейпе).

Итак, есть два варианта решения:
! 1. Сначала открываем окно, а затем помещаем его под остальные окна (т.е. само открытие окна останется замеченным):

Код:

Иногда может понадобиться (всяким нехорошим людям

), чтобы окно, открытое таким образом, нельзя было "поднять" выше остальных окон. Для этого в коде открываемой страницы добавляется:

Код:

! 2. Совсем нехорошие люди открывают в подобных случаях окно за пределами экрана, напр.:

Код:

В Мозилле и Нетскейпах такое работать не будет, а в Опере, к сожалению, работает как и в MSIE.

?
Цитата:

как вызывать открытие нового окна?

! 1. Если скрипт открытия окна просто находится на странице (т.е. не внутри функции или события), то окно откроется в процессе загрузки страницы, напр.:

Код:

! 2. Скрипт открытия нового окна (как и любой другой) можно вызвать при каком либо событии либо поместить непосредственно в ссылку, напр.:

Код:

аналогично для всех остальных событий (onLoad, onUnLoad и т.д.)

Код:

<a href="javascript:void window.open('page.html','')">открыть окно</a>

! 3. Если скрипт открытия нового окна помещён в функцию (как в ответе на предыдущий вопрос), то вызвать эту функцию можно (a) по событию, (б) из другой функции либо (в) поместить в ссылку, напр. (для удобства фунция открытия нового окна названа win(), так же, как и в ответе на предыдущий вопрос):
а)
Код:

б)
Код:

в)
Код:

<a href="javascript:void win()">открыть окно</a>

?
Цитата:

Скажите пожалуйста, можно-ли создать диалоговое окно с помощью JavaScript наподобие "Да" - "Нет", но с пятью вариантами ответа?

! Стандартными средствами нельзя, но выход из положения есть

?
Цитата:

Как сделать новое окно заданного размера?(то же самое здесь и здесь)

! Код для открытия окна:
Код:

И ссылка, при нажатии на которую окно откроется:

Код:

?
Цитата:

как сделать чтобы окно открывалось сразу развернутым на весь экран?

и
Цитата:

стандартно новое окно открывается небольшим. А хотелось бы нормально - на весь экран. КАК?

! 1. Открытие нового окна на весь экран:
a) человеческий способ:

Код:

window.open('link.html','','width='+screen.availWidth+',height='+screen.availHeight+',top=0,screenY=0,left=0,screenX=0,scrollbars')

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

Код:

var win=window.open('link.html','')
win.moveTo(0,0)
win.resizeTo(screen.availWidth,screen.availHeight)

! 2. (только для ИЕ)
a) Т.н. Сhannelmode (в MSIE такой режим по F11 вызывается):

Код:

window.open('file.html','','channelmode')

b) самое жестокое издевательство над пользователем:

Код:

window.open('file.html','','fullscreen')

c) менее жестокое издевательство:

Код:

window.open('file.html','','fullscreen,channelmode')

! 3. Изменение размера существующего окна до размера полноэкранного (не рекомендую — раздражает, лучше вёрстку с самого начала под любое разрешение по-нормальному делать):

Код:

?
Цитата:

Как открыть окно, когда посетитель покидает сайт?

! Добавляем в тэг <body> страницы атрибут onUnLoad:

Код:

?
Цитата:

а как сделать, чтобы при переходе юзера по внутренним ссылкам ничего не происходило, а если он покидает сайт — открывать окно?

! Используем такой код:

Код:

И в каждую ссылку добавляем:

Код:

?
Цитата:

Как открыть окно неизменяемого размера?

! 1. при открытии окна просто пропускаем в коде параметр resizable:

Код:

или присваиваем ему значение 0 или no:

Код:

! 2. Запрет на изменение размера любого окна (издевательство нaд посетителем

):

Код:

?
Цитата:

Как из одного окна передать данные в другое средствами JavaScript, например, в одном окне набрать текст в поле ТЕКСТАРЕА и нажав кнопку этот текст появляется в другом окне в таком же поле

! 1. Предположим, в основном окне есть форма с именем FormMain и textarea с именем TxtMain в ней, а в окне, открытом скриптом из основного окна, есть форма FormPopUp и textarea TxtPopUp.
Для передачи данных из главного окна в новое:
а)Открываем новое окно таким образом:

Код:

var win=window.open('http://','','width=400,height=200')

б)И добавляем в главном окне кнопку:

Код:

Для передачи данных из нового окна в главное делаем в новом окне кнопку:

Код:

! 2. Если нужно передать данные новому окну в момент открытия окна, то можно добавить данные к открываемой ссылке, а в открываемом окне извлечь данные из ссылки (т.е. воспользоваться методом get).
Простейший случай:
открываем новое окно таким образом:

Код:

eval("window.open('http://site.com/file.html?"+escape("данные_которые_нужно_передать")+"','','width=300,height=200,etc')")

И в новом окне для получения данных используем такой код:

Код:

if(location.href){alert(unescape(location.search.replace(/\?/,'')))}

В JavaScript нет встроенных методов для получения нескольких переменных/значений из адреса страницы, поэтому при передаче нескольких переменных методом get придётся воспользоваться отдельной функцией для получения названий и значений переменных, к примеру, такой.

?
Цитата:

почему на некоторых сайтах окно окрывается в верхнем левом углу, а на некоторых по центру?

! При открытии окна нужно использовать параметры top, screenY, left, screenX (первые два — вертикальное положение в пикселах относительно верхнего левого угла экрана, вторые два — горизонтальное положение, дублируются значения для кросс-браузерной совместимости):
1. Окно в верхнем левом углу экрана:

Код:

window.open('link.html','','width=300,height=400,top=0,screenY=0,left=0,screenX=0,scrollbars')

2. Окно в верхнем правом углу экрана:

Код:

var w=300 // ширина окна
var h=400 //высота окна
var wc=screen.availWidth-w
window.open('link.html','','width='+w+',height='+h+',top=0,screenY=0,left='+wc+',screenX='+wc)

3. Окно в нижнем левом углу экрана:

Код:

var w=300 // ширина окна
var h=400 //высота окна
var hc=screen.availHeight-h
window.open('link.html','','width='+w+',height='+h+',top='+hc+',screenY='+hc+',left=0,screenX=0')

4. Окно в нижнем правом углу экрана:

Код:

var w=300 // ширина окна
var h=400 //высота окна
var wc=screen.availWidth-w
var hc=screen.availHeight-h
window.open('link.html','','width='+w+',height='+h+',top='+hc+',screenY='+hc+',left='+wc+',screenX='+wc)

5. Окно по центру:

Код:

var w=300 // ширина окна
var h=400 //высота окна
var wc=parseInt((screen.availWidth-w)/2)
var hc=parseInt((screen.availHeight-h)/2)
window.open('link.html','','width='+w+',height='+h+',top='+hc+',screenY='+hc+',left='+wc+',screenX='+wc)

?
Цитата:

можно ли сделать, чтобы имена файлов не указывать?...путем SSI определять имя файла и вставлять его в код JS?

! SSI не понадобится, можно динамически создавать содержимое нового окна:

Код:

Весь код новой страницы должен быть в одну строку, туда, где на выходе должна будет начинаться новая строка нужно добавить символ конца строки — "\n".

?
Цитата:

Подскажите скрипт для открытия нового окна без скролбара, без кнопок и определенного размера. НО!! мне нужен скрипт, который может находиться не в ХТМЛ документе, а во внешнем файле, типа script.js

! В хтмл пишешь

Код:

а вот функция, ее запихивай в файл

Код:

window.open(URL,"","toolbar=no,width=400,height=400,status=no,scrollbars=no,resize=no,menubar=no")

?
Цитата:

ещё надо, чтоб это окошко открывалось при нажати на кнопку? что к кнопке привязывать?

! В коде:

Код:

В script.js

Код:

function opennewwindow(URL) {
window.open(URL,'',"toolbar=no,width=400,height=400,status=no,scrollbars=no,resize=no,menubar=no")
}

А вызывать так:

Код:

?
Цитата:

При нажатии кнопки "Открыть" должна окрыться страница 1.htm в том же окне где была кнопка "Открыть" и в новом окне (размером 300*300 pixels) должна открыться страница 2.htm

! что нить такое

Код:

OnClick='window.open("new_page.htm","",""); location.href="/new_page2.htm";'

----------
away.

Модерирует : Cheery
Svarga (28-06-2004 03:48): Только вопросы и ответы.	Версия для печати • Подписаться • Добавить в закладки