Ссылки в новой вкладке — jQuery

Ссылки в новой вкладке — jQuery

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

Самый простой способ сделать это - присвоить ссылке атрибут target="_blank", таким образом ссылка будет выглядеть вот так: <a href="http://site.ru" target="_blank">link</a>. Этот способ позволяет безошибочно определить внешнюю ссылку и назначить ей определенные свойства.

Но что делать, когда надо массиву или даже всем ссылкам на внешние ресурсы присвоить это свойство? Руками делать это долго и неудобно. На помощь нам приходит библиотека jquery, с помощью которой мы решим нашу задачу. Для этого напишем простой код:

$(document).ready(function(){
$("a[href^='http://']").attr("target","_blank");
});

Теперь все будет работать. Обратите внимание, что мы подразумеваем: если url ссылки начинается с http://, то ссылка ведет на сторонний ресурс и страница должна открыться в новой вкладке (для этого мы присваиваем ссылке свойство target="_blank"). Будьте внимательны, ссылки на свой ресурс прописывайте относительные: не http://site.ru/page/, а /page/. Также можно назначить выполнение этого скрипта не на весь сайт, а на какой-нибудь блок. Для этого надо изменить a[href^='http://'] на .block a[href^='http://'] - в таком варианте только ссылки внутри элемента с классом block у которых url начинается с http:// будут открываться в новой вкладке.

24.11.19
Для просмотра сайта обновите браузер.