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 так и вовсе не признает.
Весёлый случай02.02.2023, 04:43#
Спасибо! Это именно то, что искал. :)
Весёлый случай02.02.2023, 04:46#
Осталось только поудалять "таргет бланк" через .removeAttr
Дубр24.02.2023, 06:39#
CRage, "таргет=бланк в коде" - это хорошо, но найти все места, где его надо дописать - это убиться можно, если сайт большой и старый :) Можно парсить буферизированный вывод, но это нагрузка на сервер. Во втором варианте JS грузит браузер только в момент клика, сколько займет обработка - боюсь даже померить не получится, очень мало.
ТЫ ЛОХ11.03.2023, 11:11#
Я вот позавчера ночью на фейсбуке обозвал всех мудаками и ушел спать.Покажи куни красивое

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

 

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

02.10.2012 · 94 каммента · рейтинг 13.21
27.06.2012 · 37 камментов · рейтинг 8.19
23.01.2013 · 21 каммент · рейтинг 6.34
19.01.2008 · 20 камментов · рейтинг 5.08
30.01.2013 · 13 камментов · рейтинг 4.99

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

Статсы