Оглавление
Ниже перечислены несколько способов открытия нового окна, а также указаны их достоинства и недостатки.
href=\"javascript:…\"
<a href=\"javascript:window.open(\'popup.html\',\'\',\'…\')\">Новое окно</a>
Это самый старый (известный мне) способ. Его минусы:
- при отключении JS ссылка не работает;
- не индексируется поисковиками;
- в статусной строке вместо ссылке отображается JavaScript-код;
- „грязный“ код.
onclick=\"…\"
<a href=\"popup.html\" onclick=\"window.open(\'popup.html\',\'…\',\'…\'); return false\">Новое окно</a> <a href=\"popup.html\" onclick=\"window.open(this.href,\'…\',\'…\'); return false\">Новое окно</a>
Именно этот способ чаще всего используется на сайтах. Он лишён первых двух минусов предыдущего способа, и если на сайте открытие новых окон не является частым действием (например, на этом сайте я нашёл только одну такую ссылку), то этот способ является оптимальным.
Если же на сайте приходиться открывать много новых однотипных окон (например увеличенное изображение товаров в интернет-магазине), то этот способ выливается в большое количество лишнего кода. Возможно, в этом случае лучше еще раз продумать как следует интерфейс. Владимир Палант[досье]
Идея проста, обозначим каким-либо образом ссылки, которые нужно открывать в новом окне (в данном случае присвоив им класс), а после загрузки документа присвоим этим ссылкам обработчик события onclick.
<a href=\"popup.html\" class=\"popup\">Новое окно</a>
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 = handlePopupClick; }
В данном примере параметры нового окна (размеры, имя окна и т.д.) будут одинаковыми у всех ссылок, но при желании это можно изменить — к примеру, определить стандартные параметры, и отклонения от них указывать атрибутами ссылки. Основной же минус в том, что эти ссылки будут открывать новые окна только после полной загрузки документа, а до этого они будут работать как обычные ссылки. Кроме того, если на странице много ссылок, то на их проверку уйдет некоторое время, что выражается в \"подвисании\" браузера при окончании загрузки страницы.
Вспомним, что события всплывают, и отловить их можно на самом верхнем уровне. Поэтому будем перехватывать все клики в документе, и если это клик по ссылке с class=\"popup\", то будем открывать новое окно.
<a href=\"popup.html\" class=\"popup\">Новое окно</a>
document.onclick = function(e) { e = e || event; var t = e.target || e.srcElement; if (t.tagName.toLowerCase() == \'a\' && /\\bpopup\\b/.test(t.className)) { window.open(t.href,\'…\',\'…\'); return false; } return true; }
Здесь отсутствуют минусы предыдущего способа. При сложной разметке сайта следует, однако, учитывать, что клик может произойти не на самой ссылке, а на одном из его дочерних элементов (на картинке, к примеру). В этом случае нужно переходить от t к родительским элементам по цепочке, пока не будет найдена ссылка:
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 ссылки.