Dubrowsky
Хроники одного дупла
Блогово  →  WebDev  → 

Открываем внешние ссылки в новом окне: target="_blank" на JS/jQuery

04 Февраля 2013 года

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

В связи с этим я считаю, что внешние ссылки надо открывать в новом окне. В общем такое поведение стало стандартом де-факто, и открытие внешних ссылок в том же окне идет в разрез с пользовательскими привычками, а это всегда плохо.

Далее - пара вариантов реализации такого поведения. Делаем на JS, поскольку так проще всего подключать. 

Вариант первый, тупой и без jQuery:

var c_host = document.location.host.replace(/www\./, '');
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
	var cl = links[i];
	if (cl.href && cl.href.indexOf(c_host) == -1) {
		cl.setAttribute('target', '_blank');
	}
}

Это должно выполниться, когда DOM-дерево, в котором мы хотим пофиксить ссылки, уже загружено - например, можно вставить код в самый конец html-документа.

Вариант более умный и с jQuery:

$(document).ready( function() {
	var c_host = document.location.host.replace(/www\./, '');
	$(document.body).on('click', 'a', function() {
		if (this.href && this.href.indexOf(c_host) == -1) {
			$(this).attr('target', '_blank');
		}
	});
});

Этот вариант использует магию обработчика on - навешивание target="_blank" происходит не в момент загрузки документа, а непосредственно перед кликом. Во-первых, это позволяет ускорить загрузку документа (весьма незначительно, но все же). Во-вторых, работает для частей документа, загруженных аяксом, которые еще не существовали на момент отработки $(document).ready().

При желании тут же можно добавить триггер для цели Яндекс.Метрики, чтоб смотреть в статистике, куда деваются пользователи :)

Не надейтесь, что этот финт позволит увеличить глубину просмотра радикально, но какой-то эффект будет. Например, на одном многострадальном сайте-визитке, откуда люди уходили на аффилированный магазин, добавление target="_blank" ко внешним ссылкам увеличило среднемесячную глубину просмотра с 2.1 до 2.9 - уже кое что.

Ко мне все чаще приходят люди, желающие накрутить лайки в вконтакте онлайн, вчера один даже в окошко онлайн-консультанта стучался и я его долго консультировал. Так вот, помимо описанного в давешнем посте сервиса, существует замечательный Ботовод от Viking Studio, со своими преимуществами. При случае обязательно напишу обзор.

Камменты

CRage04.02.2013, 18:43#
Боже, зачем это, если можно таргет=бланк в коде? О_о JS грузит браузер и при крит массе скриптов будет лагать (аки ВКонтакт с жестко прокрученной вниз стеной).
Дуброн самый04.02.2013, 19:35#
CRage, "таргет=бланк в коде" - это хорошо, но найти все места, где его надо дописать - это убиться можно, если сайт большой и старый :) Можно парсить буферизированный вывод, но это нагрузка на сервер. Во втором варианте JS грузит браузер только в момент клика, сколько займет обработка - боюсь даже померить не получится, очень мало.
CRage04.02.2013, 23:27#
Сложно сказать, что проще. То есть JS, конечно, проще. С другой стороны - html правильнее...
Кофеман17.02.2013, 00:32#
главное чтоб работало, а то на некоторых сайтах народ уходит и забывает откуда пришел
Сергей12.10.2014, 21:23#
Дело даже не в том, что HTML проще, а в том, последние его спецификации осуждают "таргет=бланк в коде", а XHTML так и вовсе не признает.

Написать коммент: памятка постеру

 

Крутые посты wtf??? →

27.06.2012 · 37 камментов · рейтинг 11.82
28.04.2008 · 44 каммента · рейтинг 9.62
30.01.2013 · 13 камментов · рейтинг 7.44
28.03.2008 · 23 каммента · рейтинг 6.93
19.01.2008 · 20 камментов · рейтинг 6.4

Последне камменты

22.07.2017  СергейПочему не работает form.submit(): Также столкнулся с неработающим .submit() при отпр...
20.07.2017  СергейСвязь: Здравствуйте. Хочу предложить Вам тройной обмен п...
17.07.2017  Илья АрхипкинСколько журналистов в России?: Мне рассказывали как журналисты освещали акцию в К...
21.05.2017  Vadim GukОбработка кликов и цели в Яндекс.Метрике, улучшенный вариант: Большое спасибо за решение задачи.
20.05.2017  ДмитрийТестовое задание для PHP-программиста (Junior): А джуны ещё нужны у вас в компании?

Статсы