Xpoint
   [напомнить пароль]

Способы открытия нового окна с помощью JS: История

Внимание! Данный интерфейс находится в стадии глубокой переделки. Наберитесь терпения.

Последнее изменение

10 лет назад Владимир Палант[досье] изменил текст:
Текст:
Несмотря на заявления юзабилистов о том, что новые окна браузера должен открывать только пользователь, в реальности довольно часто возникает необходимость открыть новое окно, например для того, что бы показать увеличенную версию картинки или форму обратной связи. Даже на этом сайте [[http://xpoint.ru/forums/map.xhtml карта форумов]] открывается в новом окне.¶

Ниже перечислены несколько способов открытия нового окна и , а также указаны их достоинства и недостатки. !!вот завернул :)!!

= href="javascript:…"¶

>>>¶
Это самый старый (известный мне) способ. Его минусы:¶
* при отключении JS ссылка не работает;¶
* не индексируется поисковиками; !!это так?!!
* в статусной строке вместо ссылке отображается ~JavaScript-код;

* „грязный“ код.¶


>>>¶
Именно этот способ чаще всего используется на сайтах. Он лишён первых двух минусов предыдущего способа, и если на сайте открытие новых окон не является частым действием (например, на этом сайте я нашёл только одну такую ссылку), то этот способ является оптимальным.¶

Если же на сайте приходиться открывать много новых однотипных окон (например увеличенное изображение товаров в интернет-магазине), то этот способ выливается в большое количество лишнего кода. !!Возможно, в этом случае лучше еще раз продумать как следует интерфейс. [[xpointUser280]]!!

= сlass="popup", window.onload¶

<a href="popup.html" class="popup">Новое окно</a>¶
>>>¶
<<<(js)¶
function handlePopupClick() {¶
window.open(this.href,'…','…');¶
return false;¶


window.
onload = function() {¶
var lnks = document.getElementsByTagName('A')¶
for(var i = 0; i < lnks.length; i++) {
if(/\bpopup\b/.test(lnks[i].className)) {
lnks[i].onclick = function() {¶
window.open(this.href,'…','…')¶
return false¶



handlePopupClick;¶

>>>¶
Минус этого способа в том, что В данном примере параметры нового окна (размеры, имя окна и т.д.) будут одинаковыми у всех ссылок. Ещё одним , но при желании это можно изменить -- к примеру, определить стандартные параметры, и отклонения от них указывать атрибутами ссылки. Основной же минус в том, что эти ссылки будут открывать новые окна только после полной загрузки документа, а до этого они будут работать как обычные ссылки. Кроме того, если на странице много ссылок, то на их проверку уйдет некоторое время, что выражается в "подвисании" браузера при окончании загрузки страницы.

= сlass="popup", document.onclick¶
Вспомним, что события всплывают, и отловить их можно на самом верхнем уровне (почти © [[xpointUser280]]). Поэтому будем перехватывать все клики в документе, и если это клик по ссылке с =#class="popup"#=, то будем открывать новое окно.¶
<<<(html)¶
<a href="popup.html" class="popup">Новое окно</a>¶

if (t.tagName.toLowerCase() == 'a' && /\bpopup\b/.test(t.className)) {¶
window.open(t.href,'…','…');¶
return false;¶

return true;¶
} ¶
>>>¶
Здесь отсутствует второй минус предыдущего способа.¶

Разумеется, в двух последних способах не обязательно определять ссылки, которые должны открывать новыет окна, с помощью класса. Вариантов может быть много. Например, если на вашем сайте все попапы открваются по адресу =#/popup/что-то…#=, то можно определять проверять наличие этого пути в атрибуте =#href#= ссылки.¶

отсутствуют минусы предыдущего способа. При сложной разметке сайта следует, однако, учитывать, что клик может произойти не на самой ссылке, а на одном из его дочерних элементов (на картинке, к примеру). В этом случае нужно переходить от t к родительским элементам по цепочке, пока не будет найдена ссылка:¶
<<<(js)¶
document.onclick = function(e) {¶
e = e || event;¶
var t = e.target || e.srcElement;¶
while (t && t.nodeType == 1 && t.tagName.toLowerCase() != 'a')¶
t = t.parentNode;¶

if (t && t.nodeType == 1 && /\bpopup\b/.test(t.className)) {¶
window.open(t.href,'…','…');¶
return false;¶

return true;¶
} ¶
>>>¶

Разумеется, в двух последних способах не обязательно определять ссылки, которые должны открывать новые окна, с помощью класса. Вариантов может быть много. Например, если на вашем сайте все попапы открываются по адресу =#/popup/что-то…#=, то можно определять проверять наличие этого пути в атрибуте =#href#= ссылки.¶

Идея последнего способа взята из [[http://xpoint.ru/forums/programming/javascript/misc/thread/37836.xhtml ! этой темы]].¶
{{thread 37836 notext}}¶

!!Поправки и отзывы приветствуются :)!!

История предыдущих изменений

изменения дата автор
текст 2007-01-26 18:05:39 (10 лет назад) Владимир Палант[досье]
текст, заголовок 2007-01-26 17:22:40 (10 лет назад) Lynn «Кофеман»[досье]
RSS
Powered by POEM™ Engine Copyright © 2002-2005