Заметки о вёрстке сайтов  ·  Александр Шуркаев об HTML, CSS и JavaScript (скрипты, справочники и примеры по сайтостроению)

Юзабильные popup'ы (window.open)

21 марта 2002 г.

В заметке указано, как правильно использовать метод window.open для открытия юзабильных popup'ов.

Новое окно браузера открыть не составляет труда — мы просто прописываем в теге a атрибут target со значением _blank (некоторые нерадивые товарищи, кстати, неправильно указывают вместо _blank значение _new, что приводит к тому же эффекту, но совершенно не соответствует спецификации). В то же время, часто необходимо, чтобы новое окно открывалось с дополнительными параметрами: окно должно быть определённых размеров, не должна присутствовать строка состояния и т. п. Это легко достигается, как вам вероятно известно, с помощью метода window.open(URL, windowName[, parameters]).

Я не буду описывать все значения, которые может принимать третий аргумент функции open(). Напомню только, что их необходимо писать через запятую, без пробелов. По умолчанию все опции включены, но если вы укажите хотя бы одну, то другие все автоматически отключатся. Следующий пример открывает popup с адресной строкой, ширина окна составляет 400px, высота — 300px и окно расположено в верхнем левом углу экрана:

popupWin = window.open("contacts.html", "contacts", "location,width=400,height=300,top=0");
popupWin.focus(); // передаём фокус новому окну

Ликбез закончен, теперь собственно о том, как правильно использовать метод window.open(). Точнее, как нужно ставить ссылки на новые окна, открывающиеся с помощью JavaScript'а.

Казалось бы, нет ничего проще — пишем что-то вроде <a href="javascript:popupWin = window.open('contacts.html', 'contacts', 'location,width=400,height=300,top=0'); popupWin.focus();">Наши координаты</a>.

Часто пишут ещё так: <a href="#" onClick="popupWin = window.open('contacts.html', 'contacts', 'location,width=400,height=300,top=0'); popupWin.focus();">Наши координаты</a>.

На самом деле, более правильный вариант таков:

<a href="contacts.html" target="_blank" onClick="popupWin = window.open(this.href, 'contacts', 'location,width=400,height=300,top=0'); popupWin.focus(); return false;">Наши координаты</a>

Чем же последний вариант хорош? Многим. Во-первых, вы заботитесь о тех пользователях, у которых по той или иной причине не работает JavaScript. У них откроется файл в обычном новом окне браузера, и они смогут-таки узнать ваши координаты. Во-вторых, поисковые машины смогут корректно проиндексировать страницу contacts.html, не спотыкаясь на JavaScript'е. Ну а в-третьих, статусная строка будет выглядеть нормально. Вместо сбивающих с толку знаков типа «#» в статусной строке будет «человекопонятный» URL.

Кстати, обратите внимание на использование ссылки this.href, указывающей на атрибут href тега a. Таким образом мы избавляемся от необходимости повторно указывать адрес открываемой страницы.

Заметьте также, что в обработчике события onClick нужно указать return false. В противном случае, откроется два новых окна — одно из-за действия атрибута target, другое из-за JavaScript'а.

Хитовые статьи про разработку сайтов

Рассылка новостей и новых статей

Сообщения будут приходить пару раз в неделю, не чаще

Объявления

http://slotogroshi.ru/igrat-v-kazino-piraty.html
LiveInternet