Для чего скрывать ссылки?
Первый вариант: чтобы скрыть их от индексирования в поисковых системах / чтобы они не передавали вес.
Второй вариант: я скрываю ссылки которые имеют не 200-й ответ (биты ссылки — но они в тоже время рабочие). Часто анализируя сайты видишь внешние ссылки с ответами отличными от 200, например с 403 ответом, чтобы они не сыпались в ошибки аудитора я их скрываю в JS.
Как скрыть ссылку при помощи jQuery
В сети полно способов закрыть ссылки средствами jQuery, рассмотрим самые действенные.
Чтобы приведенные ниже способы работали, у вас должна быть подключена библиотека jQuery.
Без использования структуры <a href=""></a>
Код ссылки на странице:
<span class="my-link" data-link="http://goo.gl">внешняя ссылка</span>Скрипт, который будет обрабатывать ссылку и открывать ее:
<script>$('.my-link').click(function(){window.open($(this).data('link'));return false;});</script>В данном случае в коде будет кусок текста (он же анкор) выделенный <span> и отображаться такая «ссылка» будет как обычный текст на странице. Поэтому чтобы такая ссылка была похожа на обычную, придется немного добавить в свой css примерно такие стили:
span.my-link {
color: #00ff00; /*-цвет ссылки-*/
text-decoration: underline; /*-подчеркивание-*/
cursor: pointer; /*-указатель в виде пальца-*/
}Альтернативный вариант
Код ссылки на странице:
<span class="my-link" data-link="http://goo.gl">внешняя ссылка</span>Скрипт, который будет обрабатывать ссылку и открывать ее:
<script>$('.my-link').replaceWith(function(){return'<a href="'+$(this).data('link')+'">'+$(this).text()+'</a>';})</script>Отличие этого способа от вышеуказанного в том, что js-скрипт меняет на странице html-код «якобы» ссылки на нормальную ссылку после полной загрузки документа. Поэтому никаких правок в css вносить не придется, а ссылка будет открываться как и обычная.
Скрытие ссылок при помощи чистого JS (без jQuery)
Код ссылки на странице:
<span class="my-link" data-url="http://goo.gl">внешняя ссылка</span>Скрипт, который будет обрабатывать ссылку и открывать ее:
<script>
let links = document.querySelectorAll('.my-link');
links.forEach(function(link) {
link.onclick = function() {
window.open(link.dataset.url);
};
});
</script>Если хотите чтобы ссылка открывалась в этой же вкладке (а не в новой). Замените window.open(link.dataset.url); на location.href = link.dataset.url;
В коде страницы получается просто текст, но если вы кликните на него то переход по ссылке произойдет. Чтобы скрытая ссылка была похожа на обычную ссылку, вам нужно добавить немного CSS, например:
span.my-link {
color: #00ff00; /*-цвет ссылки-*/
text-decoration: underline; /*-подчеркивание-*/
cursor: pointer; /*-указатель в виде пальца-*/
}Скрытие ссылок от индексации поисковыми роботами
Чтобы скрыть ссылки от индексации поисковыми роботами:
- выносим скрипт замены ссылок во внешний файл;
- запрещаем индексацию этого файла в robot.txt;
- в контенте используем функцию нашего скрипта, которая будет рисовать нам необходимую ссылку.
Теперь вы знаете как спрятать ссылку в JS. Если вдруг возникли вопросы или один из способов перестал работать, пожалуйся напишите об этом в комментариях.
