Открытие внешних ссылок в новом окне
Не знаю, кому как, а лично мне очень не нравится, когда при клике на ссылку в тексте статьи меня переслыают на другой сайт. Я же еще не дочитал!
Это очень неудобно и со временем вырабатывается привычка кликать везде средней кнопкой мыши. Однако, есть и более культурный способ, ведь у ссылок давно существует атрибут target="_blank", который открывает эту ссылку в новом окне. Но, его нужно проставлять вручную у каждой ссылки и это быстро недоедает, а юзеры тем временем уходят с сайта не дочитав заметку.
Задачу нужно решить, причем быстро, просто и навсегда. Поэтому я решил переложить выставление аттрибута ссылки на крепкие плечи jQuery — он не подведёт!
Вот мой маленький, симпатичный скриптик:
Таким образом, открываться в текущем окне будут только относительные ссылки, или абсолютные, но на ваш сайт.
Работает на jQuery версии 1.7+. Нагрузки нет, так как замечательная функция «on» срабатывает только при наступлении события (в нашем случае — при клике на ссылку), не развешивая события заранее. Соответственно, вызов не нужно оборачивать в $(document).ready().
Это очень неудобно и со временем вырабатывается привычка кликать везде средней кнопкой мыши. Однако, есть и более культурный способ, ведь у ссылок давно существует атрибут target="_blank", который открывает эту ссылку в новом окне. Но, его нужно проставлять вручную у каждой ссылки и это быстро недоедает, а юзеры тем временем уходят с сайта не дочитав заметку.
Задачу нужно решить, причем быстро, просто и навсегда. Поэтому я решил переложить выставление аттрибута ссылки на крепкие плечи jQuery — он не подведёт!
Вот мой маленький, симпатичный скриптик:
$(document).on('click', 'a', function() {
// Регулярное выражение для определения, ваш ли это сайт? (нужно изменить)
var site = /bezumkin\.ru/;
// Получаем направление ссылки
var href = $(this).attr('href');
// Работаем только если ссылка абсолютная, и ведёт не на наш сайт
if (/^(http|https|ftp)/.test(href) && !site.test(href)) {
$(this).attr('target', '_blank');
}
})
Принцип действия очевиден: проверяем при клике, куда ведет ссылка, и если это не наш сайт — то ставим атрибут target="_blank". И всё, ссылка откроется в новом окне.Таким образом, открываться в текущем окне будут только относительные ссылки, или абсолютные, но на ваш сайт.
Работает на jQuery версии 1.7+. Нагрузки нет, так как замечательная функция «on» срабатывает только при наступлении события (в нашем случае — при клике на ссылку), не развешивая события заранее. Соответственно, вызов не нужно оборачивать в $(document).ready().
Комментарии: 39
Есть замечательный тэг base target='_blank'. Правда при его использовании нужно всем ссылкам, которые должны открываться не в отдельном окне (пункты меню, навигация и т.п.) добавить атрибут target='self'. Но решение Василия, безусловно, гораздо удобнее!
Не знал про такое, спасибо.
Но моей задачи это не решает — всё равно придётся проставлять атрибуты руками, только немного другие.
Но моей задачи это не решает — всё равно придётся проставлять атрибуты руками, только немного другие.
А не проще получать url сайта через javascript?
var site = location.href;
site = site.substring(7, site.indexOf('/', 7));
получается «bezumkin.ru», можете проверить в консоли
var site = location.href;
site = site.substring(7, site.indexOf('/', 7));
получается «bezumkin.ru», можете проверить в консоли
1. Не прокатит с www.bezumkin.ru. У меня нельзя открывать сайт по разным адресам, но ведь не у всех так.
2. bezumkin.ru это не регулярное выражение /bezumkin\.ru/. Как его превратить в регулярку, автоматически?
Или парсить ссылку и вычленять у нее base url, а потом сверять с текущим адресом? Не спорю, можно и так, но это ненужное усложнение, как по мне.
2. bezumkin.ru это не регулярное выражение /bezumkin\.ru/. Как его превратить в регулярку, автоматически?
Или парсить ссылку и вычленять у нее base url, а потом сверять с текущим адресом? Не спорю, можно и так, но это ненужное усложнение, как по мне.
Ну тогда пусть лежит для тех кто захочет чтото универсальное, на самом деле можно и «www.» убирать и регулярку из строки делать.
А еще в регулярку можно забить и другие адреса, которые не нужно открывать в новом окне. Тоже полезно.
Кстати насчет target="_blank" — после прочтения этой статьи — www.xiper.net/collect/html-and-css-tricks/content/target-blank.html больше его не ставлю.
Расскажите это, например, Яндексу и Гуглу — а то они не в курсе.
А они тут причем? Открытие страницы в новом окне сделано для удобства пользователя, а поисковик всё равно проиндексирует ссылку, независимо от этого параметра.
Они так открывают результаты поиска.
Ну тогда да, если уже они используют, то почему нам, «простым смертным» не использовать…
Кстати, Гугл так не открывает, только Яндекс :)
Прикольно, а я попробовал во всех браузерах нигде нет у гугла _blank ))
А у Яндекса есть.
Могу тоже скриншотом или видео подтвердить если кто-то не верит мне
А у Яндекса есть.
Могу тоже скриншотом или видео подтвердить если кто-то не верит мне
Похоже, где то есть настройки, как открывать, но найти не могу.
Если я не авторизовываюсь — то открывает в текущем окне. Прикол =)
Если я не авторизовываюсь — то открывает в текущем окне. Прикол =)
Это наверное настройка в профайле Google+
В настройках аккаунта указывается как открывать внешние ссылки (в свое время мне надоело держать shift нажатым)
Для валидности уже давным-давно (года четыре-пять назад, минимум) в англоязычных интернетах писали «используйте jquery для простановки _blank» — так и код валиден, и пользователь доволен. Так что решение Василия удачно попало в нужную нишу «и вашим и нашим».
бредовая статья, всем неугодишь.
меня например бесит когда читаешь статью и в ней же открываются демо или еще что там.
хотя уже выработалась привычке колесиком щелкать, но бывает попадаю.
кому то наоборот, нет каких либо конкретных правил.
меня например бесит когда читаешь статью и в ней же открываются демо или еще что там.
хотя уже выработалась привычке колесиком щелкать, но бывает попадаю.
кому то наоборот, нет каких либо конкретных правил.
Бредовый комментарий, всем не угодишь.
я про
Кстати насчет target="_blank" — после прочтения этой статьи — www.xiper.net/collect/html-and-css-tricks/content/target-blank.html больше его не ставлю.к статье опубликованной здесь претензий не имею
здесь которая тут,
ахах, забей короче
ахах, забей короче
А, туплю.
Очень не хватает индикации уровня комментария и пролистывания на тот, которому ответили =(
Сделаю, когда-нибудь.
Очень не хватает индикации уровня комментария и пролистывания на тот, которому ответили =(
Сделаю, когда-нибудь.
на jquery можно также сделать:
вроде работает…
$(".asdf").live("click", function(){
var url = $(this).parents("li").eq(1).find(".ticket-comment-link a:first").attr("href")
$(this).attr({"href": url});
})
где .asdf = к ответувроде работает…
<a class="asdf">#к ответу</a>
или как это называется к источнику))
аххах чето я седня тоже туплю неподецки
аххах чето я седня тоже туплю неподецки
Сразу говорю я знаю как написать на javascripte, но мне кажется было бы хорошо учесть это с плагином BannerY потому что он там не работает и щаче такой код понадобиться там (наверно), так как при наведении на баннер показывается другая ссылка. Хотел бы тебя попросить Василий можно ли сделать крассивые ссылки в плагине BannerY? Если нет времяни, то ничего страшного, но было бы прикольно это сделать. При многом благодарен за твои плагины.
P.S. Сайт который я сейчас делаю там 7 твоих плагинов используется))) Спасибо!!!
P.S. Сайт который я сейчас делаю там 7 твоих плагинов используется))) Спасибо!!!
Там выводятся относительные ссылки, типа /bannerclick/11, которые не обрабатываются этим плагином.
Цитата из дефолтного чанка:
Такие ссылки нужны исключительно для сбора статистики. Если она вам не интересна — используйте плейсхолдер [[+url]], тогда у ссылки будет сразу конечный url.
Цитата из дефолтного чанка:
<a href="bannerclick/[[+adposition]]"><img src="[[+image]]" title="[[+description]]"/></a>
Такие ссылки нужны исключительно для сбора статистики. Если она вам не интересна — используйте плейсхолдер [[+url]], тогда у ссылки будет сразу конечный url.
спасибо, я это знал )))
Очень рад.
Может, тогда поясните, что это за «красивые ссылки» в вашем понимании, которых нет сейчас в BannerY?
Может, тогда поясните, что это за «красивые ссылки» в вашем понимании, которых нет сейчас в BannerY?
в оригинале у BannerY ссылка показывается «bannerclick/123» а было бы супер если бы показывал настоящую ссылку типа на сайт «test.ru» тогда бы и Ваш скрипт работал у плагина. Есть ещё вариант проста создать в BannerY дополнительное поле где выбираешь как открыть ссылку в новом окне или в этом же, мелочь но приятно)))
Такие ссылки нужны исключительно для сбора статистики. Если она вам не интересна — используйте плейсхолдер [[+url]], тогда у ссылки будет сразу конечный url.
Не очень хорошее решение — ненавижу, когда меня заставляют открыть новое окно без моего ведома. Об этой проблеме написано очень много. Поведение машины должно быть максимально предсказуемым для юзера. Вернее, по-моему, по умолчанию открыть все ссылки в том же самом окне и дать юзеру понять, какие ссылки ссылаются на внешнюю страницу. А юзер сам решить, что ему нужно: открыть в новой складке или нет. Для этого не нужен js, стоит просто использовать css селекторы. К примеру:
a[href^="http"] {background-image:url("../images/external-link.png"); background-repeat:no-repeat; background-position-y:5px; padding-left:10px}
Между прочим, так и делается на блоге modx.
Всегда считал, что это дело создателя сайта, как ему работать.
Не будем холиворить, но на моём сайте все ссылки открываются так с момента создания — просто скриптик был тупее, и стыдно было показать. Претензий к такому поведению не было.
Ну а ваш способ не прокатит для абсолютных ссылок на мой же сайт — а я люблю копипастить их с url. Подумаю про иконку, но мне не нравится как это выглядит в блоге MODX.
Не будем холиворить, но на моём сайте все ссылки открываются так с момента создания — просто скриптик был тупее, и стыдно было показать. Претензий к такому поведению не было.
Ну а ваш способ не прокатит для абсолютных ссылок на мой же сайт — а я люблю копипастить их с url. Подумаю про иконку, но мне не нравится как это выглядит в блоге MODX.
Василий, вы правы, конечно, дело создателя, и нет повода спорить. Да, для абсолютных ссылок на Ваш же сайт один лишь css селектор не поможет. Между прочим, мои контент-менеджеры же в основном просто копируют целиком ссылки и не задумываются, что можно ссылаться через [[id]]. Но и тут есть элегантное решение через css. Стоит только использовать каскадирующее свойство css и написать:
Это Ваша постановка вопроса меня удивила. Ведь Вы пишите:
Еще раз: спорить не хочу. И ваш js код краток и элегантен.
a[href^="http"] {background-image:url("../images/external-link.png"); background-repeat:no-repeat; background-position-y:5px; padding-left:10px}
a[href^="http://bezumkin.ru/"] {background:none}
И уже все нормально!Это Ваша постановка вопроса меня удивила. Ведь Вы пишите:
мне очень не нравится, когда при клике на ссылку в тексте статьи меня переслыают на другой сайт. Я же еще не дочитал!Если Вам лично неудобно, то почему не просто поменять поведение Вашего личного навигатора? Зачем заставить всех юзеров применить такое же поведение? Хода мышления не понимаю. Вы ведь можете просто заставить FF всегда открыть ссылкы вне настоящей страницы (в новом окне или складке).
Еще раз: спорить не хочу. И ваш js код краток и элегантен.
Очевидно, что у меня дома должно быть так, как нравится лично мне.
Так и делаю.
Так и делаю.
лебедев, вроде залупался) что должны быть картинки для определения вида ссылок,
в чем то может он и прав.
но интернет слишком быстро развивается, чтобы все под одну гребенку)… ээх
в чем то может он и прав.
но интернет слишком быстро развивается, чтобы все под одну гребенку)… ээх
Полезно, спасибо! А для себя, уже привык все ссылки открывать колесиком сразу в новой вкладке независимо от атрибута.
Хороший скриптик, благодарю!
А вот такая задача бывает ставится перед проектом (в виде например подобного сообщества). Что бы все внешние ссылки открывались в новом окне, но через внутренний редирект. Цель — не разбазаривать «вес» сайта (nofollow не рассматривается). Пример реализации — vk.com
Возможно ли реализовать подобное в Tikets? Или нужно «допиливать» например этот скрипт…
А вот такая задача бывает ставится перед проектом (в виде например подобного сообщества). Что бы все внешние ссылки открывались в новом окне, но через внутренний редирект. Цель — не разбазаривать «вес» сайта (nofollow не рассматривается). Пример реализации — vk.com
Возможно ли реализовать подобное в Tikets? Или нужно «допиливать» например этот скрипт…
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.