Генератор устойчивых к взлому паролей   •   Online-инструменты
751 просм
2 комм
Поделиться:

Получаем всю информацию о текущем URL на JavaScript

Для написания своих модулей или реализации интересных идей вам могут потребоваться информация о текущем URL и способы получения отдельных его частей.

Сделать это можно с помощью объекта window.location на JavaScript.

В качестве примера рассмотрим ссылку:

https://www.pandoge.com:80/category/page.html?search=true#anchor

А теперь подробно рассмотрим все свойства объекта.

1. window.location.href будет содержать в себе полный URL. В нашем случае:

https://www.pandoge.com/category/page.html?search=true 

2. window.location.protocol будет содержать в себе используемый протокол сайта (https или http). В нашем случае:

https: 

3. window.location.search будет содержать в себе GET параметры (От символа ? включительно до #). В нашем случае:

?search=true 

4. window.location.host будет содержать в себе хост (имя домена) и порт. В нашем случае:

www.pandoge.com:80

5. window.location.pathname будет содержать в себе относительный адрес страницы. В нашем случае:

/category/page.html 

6. window.location.hostname будет содержать в себе хост (имя домена) без порта. В нашем случае:

www.pandoge.com 

7. window.location.port будет содержать в себе номер порта. В нашем случае:

80 

8. window.location.hash будет содержать в себе указание на конкретный элемент на странице (якорь). В нашем случае:

#anchor 

Пример использования window.location.*

Для примера выведем сообщение, если пользователь находится на главной странице вашего сайта:

<script>
	if(window.location.pathname == "/" || window.location.pathname == "/index.html" || window.location.pathname == "/index.php") { 
		alert('Вы находитесь на главной странице!'); 
	}
</script>

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

2
комментария
DarkShin
29.04 в 16:04
Очень полезный скрипт. И идея с меню.
А можете в свободное время объединить его с этим модулем или похожим https://www.pandoge.com/moduli_i_skripty/vydelyaem-aktivnyy-punkt-menyu-na-jquery
Я как раз в этой теме писал про подсветку пунктов при нахождении в новостях.
Но ответа так и не получил, как и на другие вопросы на сайте (
  • 0
DarkShin, скрипт который находится по указанной ссылке и так содержит в себе часть методов описанных в статье.
  • 0
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Ваше Имя
Ваш E-mail
Текст комментария