Открытие ссылок в новой вкладке. Без повреждения якорей и меню сайта

Все чаще сталкиваюсь с задачами, связанными с открытием ссылок в новой вкладке браузера. Кажется, что нет ни чего проще, допиши target='_blank' и все будет работать. Но как быть в том случае, когда нужно открыть множество ссылок с таким же эффектом?

Как быть если на сайте тысячи материалов в которых нужно изменить способ открытия вкладок? В этом случае на помощь приходит скрипт, который будет добавлять это свойства к определенным ссылкам.

Открытие ссылок в новой вкладке браузера — теория.

Существует множество способов задать нужное поведение для ссылок, но у большинства из них есть существенный недостаток — target="_blank" добавляется ко всем ссылкам, включая меню и якоря (специальные ссылки с помощью которых, создается меню). Чтобы избежать этой проблемы, нам необходимо сделать выборку по классу контейнера в котором хранятся или выводятся наши ссылки.

Для примера создадим простую разметку

надежный хостинг

<a href="https://yandex.ru">456</a>
<div class="s-article">
<a href="https://yandex.ru">123</a>
</div>
<div class="s-article">
<a href="https://yandex.ru">123</a>
</div>
<a href="https://yandex.ru">456</a>

Две ссылки мы размещаем в блоках с классом s-article, а две просто так. Это необходимо для демонстрации работы скрипта.

Открытие ссылок в новой вкладке браузера -скрипт для обработки ссылок.

<script type="text/javascript">
var articles = document.getElementsByClassName('s-article');
for(var i = 0; i < articles.length; i++){
var elements = articles[i].getElementsByTagName('a');
for(var k = 0; k < elements.length; k++){
elements[k].setAttribute('target', '_blank');
}
}
</script>

Скрипт делает две простые вещи:

  • 1. Собирает все блоки с классом s-article
  • 2. Во всех этих блоках находит ссылки и добавляет к ним target="_blank"

Тем самым мы получаем то, что так хотели. Все ссылки, которые будут выводится в определенном блоке, будут открываться в новой вкладке, а меню и другие элементы навигации останутся нетронутыми.

Единственное на, что хочется обратить внимание, что при копировании этого скрипта необходимо заменить класс s-article на ваш. Чтобы узнать на какой именно, достаточно нажать ф12 и найти нужный элемент.

надежный хостинг
Поделиться в социальных сетях: