Как открыть все внешние ссылки в новом окне (javascript)

Открыть иль не открыть — вот в чём вопрос…

Вы ведёте блог? Ставите ссылки на другие сайты? Если «да» и «да», то в каком окне/вкладке вы их открываете — в том же или в новом? 99,(9)% вебмастеров открывают внешние ссылки в новом окне (а некоторые открывают в новом даже ссылки на самого себя — что, с моей точки зрения, явный перебор). Ничтожно малое исключение составляют особо принципиальные.

Свернуть

Развернуть

Отступление об особо принципиальных.

Когда я ещё только начинала свою интернет-деятельность, мой первый наставник вполне компетентно объяснял, что открывать гиперссылки в новом окне — дурной тон (о вкладках в те времена ещё и речь не шла). Что пользователь должен сам решить, каким способом ему удобнее открыть страницу. К тому же xhtml1.0 strict, считавшийся на тот момент самой передовой разновидностью html, не признавал (и по сию пору не признаёт) атрибут target, который как раз и предназначен для открытия ссылок в новом окне или вкладке. (Не оправдавший ожиданий xhtml1.1 должен был быть ещё строже, но о нём теперь можно не думать — по миру пошёл html5.)

Когда-то я всему этому безусловно верила, однако сейчас, будучи весьма продвинутым пользователем, ругаюсь, если внешняя ссылка в какой-нибудь статье при клике по ней открывается в этом же окне. Более того, я завела привычку открывать все такие ссылки правой кнопкой мыши: слишком утомительно надеяться на предусмотрительность вебмастера, а потом судорожно жать на Escape, чтобы отменить переход, или на Backspace и ждать, пока первая статья загрузится снова. Нет уж: новый сайт — новое окно. Ну, или вкладка.

Свернуть

Итак, ссылкам, ведущим на другие сайты, традиционно добавляют html-атрибут target со значением «_blank». Однако этот атрибут должен быть у каждой такой ссылки — свой собственный, и забыть его нельзя. Я же решила избавиться от этой необходимости, написав небольшой скрипт, который автоматом открывает в новом окне все ссылки, ведущие на другие домены, и не трогает ссылки, ведущие на другие страницы текущего сайта. (Впрочем, для внутренних ссылок есть одно исключение, но это мой частный случай, и другим его повторять не обязательно.) Преимущество скрипта в том, что он подключён к сайту один раз, и мне не надо ползать по страницам, расставляя target="_blank". Недостаток — если у пользователя отключён javascript, ссылки будут открываться в том же окне. Но я всё-таки надеюсь, что мы во втором десятилетии живём и не на чугунке ездим.

Как это сделать

Для быстроты и красоты используем библиотеку jquery. Можно то же самое написать обычным javascript’ом, но это будет долго и громоздко.

Прежде всего проверяем, подключена ли на сайте эта библиотека. Если вы ведёте блог на Wordpress, то jquery.js, скорее всего, уже есть. Если же нет, вам придётся скачать и подключить последнюю версию. Обратите внимание: файл скрипта, открывающего ссылки, должен подключаться после файла jquery.js, в противном случае скрипт не будет работать.

Создаём собственный файл *.js или добавляем в уже имеющийся вот такой код:

$('a[href^="http"], a[href^="ftp"]').not('a[href^="http://yoursite.ru/"]').click(function(){
  window.open(this.href, "");
  return false;
});

Собственно, этого достаточно. Теперь все внешние ссылки будут открываться новом окне или вкладке.

UPD. Функции, вызываемые событием (click, hover и др.) должны находиться внутри конструкции:

jQuery(document).ready(function(){
//здесь код
});

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

Только для тех, кто хочет понимать, что и зачем делает.

Первым шагом выбираем ссылки, которые обработает скрипт. Внешние ссылки всегда начинаются с протокола, по этому признаку их и выберем, используя селектор префикса атрибута. Конструкция:

$('a[href^="http"], a[href^="ftp"]')

выберет все ссылки, начинающиеся на «http» или «ftp».

Однако внутренние ссылки тоже могут начинаться с префикса http. Значит, надо исключить ссылки ведущие на собственный сайт:

.not('a[href^="http://yoursite.ru/"]')

Далее событием click вызываем функцию, открывающую новое окно (или вкладку) с урлом нашей ссылки (this.href) и пустым именем (это нужно, чтобы каждый раз открывалось ещё одно окно, а не использовалось открытое в прошлый раз):

window.open(this.href, "");

и обязательно говорим:

return false;

в противном случае ссылка откроется дважды: в новом окне и в основном. «Return false» запрещает переход по ссылке после того, как сработал скрипт.

Как видите, принцип простой. Главное — правильно расставить знаки препинания.

Ну, и ещё часто возникает вопрос, как сделать, чтобы скрипт открывал не новую вкладку, а окно (или наоборот). Ответ: никак. Это зависит от пользовательских настроек браузера. Если пользователь предоставил выбор браузеру, то, как правило, окна с заданными размерами открываются как окна, а без размеров — как вкладки; но пользователь может указать браузеру всегда открывать только окна или только вкладки. И да — пользователь-таки имеет право решить это сам.