Получаем всю информацию о текущем 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:80/category/page.html?search=true#anchor

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 свойств вы сможете сделать, например, подсветку активного пункта меню в зависимости от страницы, на которой находится пользователь, или воплотить другие интересные решения.