JS - автоматизация сокрытия всех внешних ссылок на странице

JS - автоматизация сокрытия всех внешних ссылок на странице


Задача: автоматически находить все ссылки на сайте при этом исключая внутренние и те, у которых имеется метка. Ко всем остальным добавлять префикс, который превращает их во внутренние ссылки. Перенаправлять таки ссылки на страницу- заглушку!


Продолжаю прокачивать свои скиллы в области JavaScript и наконец-то добрался до задачи, которая грызла меня очень давно. Буквально вчера решал такую же задачу по скрытию внешних ссылок на PHP, но там ссылки необходимо скрывать вручную.

Скрипт полностью реализован на нативном JavaScript, что исключает необходимость использовать сторонние библиотеки, такие, как jQuery.

Скрипт поиска внешних ссылок



Создаем файл в формате *.js, например, стандартное script.js и подключаем его в самом низу страницы перед закрывающим тегом BODY следующей строкой.

<script src="script.js"></script>

window.onload = function(){

	var all_links = document.querySelectorAll('a[href]');

	// Получаем домен текущего сайта
	var c_prot = window.location.protocol,
	//класс метка, для ислючения подмены
		classname = 'in';

	for(let i = 0; i < all_links.length; i++){

		// Первые четыре символа в ссылке 
		var str = all_links[i].getAttribute('href').substring(0,4);

		// получаем домен внешнего урл
		var l_prot = all_links[i].origin;

		// Сразу отсеиваем ссылки без HTTP — внутренние ссылки href="/news"
		if(str == 'http'){
			// Сверяем домен ссылки с доменом сайта и наличие метки
			if(all_links[i].href != c_prot && !all_links[i].classList.contains(classname)){

				// Добавляем в ссылку префикс
				 all_links[i].href = '/go.php?go=' + all_links[i].href;
			}
		}
		
	}
}


Более красивое оформление в виде картинки

JS - автоматизация сокрытия всех внешних ссылок на странице


Для того, чтобы ссылка не шифровалась, ей необходимо добавить класс in. Данный класс вынесен в отдельную переменную и при необходимости его можно заменить на любой другой.

Логика



В комментариях, в принципе, все подробно расписано, но логику все же опишу.

1. Мы получаем все ссылки на странице у которых имеется атрибут href и формируем из них массив;

2. Создаем переменные с именем класса и нашим локальным доменом;

3. Далее пробегаем по данному массиву при помощи обычного цикла for и проверяем в ссылках наличие http, что уже говорит о том, что ссылка внешняя или же записана с ненужным указанием локального домена;

4. Проверяем, что домен ссылки не является доменом сайта и у данной ссылки отсутствует класс-метка для запрета шифрования;

5. Если все условия выполнились исправляем ссылку, добавляя ей префикс;


Страница заглушка для внешних ссылок



Данная страница уже описана в другой статье здесь.

Для не знающих: просьба не пугаться т.к. в той статье вместо go используется r и это не имеет никакого значения. Выберите то слово, которое вам больше нравится (r гораздо короче), например:

go.php?r=
go.php?go=
r.php?go=
r.php?r=
blabalbla.php?rerere=


Соответственно, принимаем мы не название файла, а ключ массива, идущий после знака вопроса — $_GET['rerere']


Понравилась статья "JS - автоматизация сокрытия всех внешних ссылок на странице" из раздела Веб разработка » JavaScript? Подпишись на RSS. Будь в курсе всего происходящего на сайте
Комментариев: 0 •  Просмотров: 689   Дата: 29-мая-2017, 23:51

Похожие статьи

Комментарии

b
i
u
s
|
left
center
right
|
emo
color
|
hide
quote
translit

© 2010-2017 devarts.pro v 7.0: flexyflat tpl Designed by devarts
Карта сайта HTMLКарта сайта XMLПравообладателям
Яндекс.Метрика