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

15 октября 2012. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.

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

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

Свернуть

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

Развернуть

Итак, ссылкам, ведущим на другие сайты, традиционно добавляют 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» запрещает переход по ссылке после того, как сработал скрипт.

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

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

Отзывы (76) на «Как открыть все внешние ссылки в новом окне (javascript)»
  1. Sherif (5 комментариев)

    Спасибо за подсказку, воспользуюсь!

    Ответить на этот комментарий
  2. botan1986 (1 комментарий)

    А разве есть разница в каком окне открывать? Все делают по разному. У меня сделано в новом, так как я считаю что пользователю так будет удобнее.

    Ответить на этот комментарий
  3. Zed (1 комментарий)

    Мне тоже кажется, что в новом удобнее, но у меня на сайте они сделаны в том же, но менять не хочу ничего.

    Ответить на этот комментарий
    • Княгиня (648 комментариев)

      Мой рецепт позволяет сделать открывашку в новом окне без изменения сайта в целом. Один короткий скриптик. Но это, конечно, для тех, кто хочет.

      Ответить на этот комментарий
  4. Владимир_1987 (1 комментарий)

    Новое окно еще хорошо тем что это с моей точки зрения увеличит ПФ. Ведь пока пользователь читает новую страницу, старую он может не закрыть, тем самым увеличивается время просмотра.

    Ответить на этот комментарий
    • Княгиня (648 комментариев)

      Яндекс.Метрика отличает время просмотра от времени, проведённого в другом окне. Так что это насчёт ПФ тут бабушка надвое сказала.

      Ответить на этот комментарий
    • Александр (1 комментарий)

      Согласен с вами, только иногда посетители начинают открывать по 5-6 окон и через 3-4 сек. закрывают, так как компьютер начинает зависать..

      Ответить на этот комментарий
  5. Ann (1 комментарий)

    удобная штука и полезная к тому же. =) многие вещи намного удобнее, если открывать в новом окне, потому как у пользователя остается 2 выхода вернуться на начальный сайт: бэк в браузере и старая вкладка. Вот представьте, как порой мучаются люди, если открыли нужный сайт, поймали неожиданно гаву и пошли гульть с раззинутым ртом по внешней ссылке, а потом вдруг «Ой, а мне надо было….». Представьте сколько раз ему надо бэкнуть

    Ответить на этот комментарий
  6. sportfan (1 комментарий)

    Не пойму о чём спор, в новом окне однозначно полезней, всегда есть шанс что пользователь закрывши новое окно, продолжит юзать ваш сайт.

    Ответить на этот комментарий
  7. Россиянин (1 комментарий)

    Скрипт конечно имеет определенную ценность, но мне больше по-душе target=»_blank». Так надежней, да и не займет много времени. Не думаю что у вас так уж много внешних ссылок стаиться на сайте в тексте. *NO*

    Ответить на этот комментарий
    • Княгиня (648 комментариев)

      В тексте… в комментариях… в боковых колонках… в подвале… Достаточно.

      Ответить на этот комментарий

Есть что сказать? Не молчим!

Используйте теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" code=""> <ul> <li> <ol> .

Комментарии короче 200 символов публикуются без активной ссылки. Пробелы не учитываются.

Ссылки с комментариев dofollow. Ознакомьтесь, пожалуйста, с правилами dofollow-комментирования. Кто не читает, тот сам себе враг.