Главная » Языки программирования

Javascript определить текущую страницу

На чтение 8 мин
Содержание
  1. Как получить url страницы js
  2. Как получить url текущей страницы на JavaScript
  3. Получение значений GET параметров
  4. Разбор URL из строки
  5. Location – URL текущей страницы
  6. Location.href
  7. Результат:
  8. Location.protocol
  9. Результат:
  10. Location.port
  11. Location.host
  12. Результат:
  13. window . location
  14. Пример
  15. Как понять
  16. Как пишется
  17. Свойства
  18. Методы

Как получить url страницы js

Можно заметить, также, что изменение свойства href в объекте window.location приведет к переходу по новой указанный ссылке.

// Перейдем на страницу личного кабинета window.location.href = 'https://ru.hexlet.io/my/';

Чтобы получить url страницы, можно воспользоваться глобальным объектом window.location . Этот объект содержит свойство href , которое содержит адрес текущей страницы.

const currentUrl = window.location.href; console.log(currentUrl); // => https://ru.hexlet.io/qna

Некоторые другие свойства объекта window.location :

  • href — весь URL
  • protocol — протокол URL
  • host — имя хоста и порт URL
  • hostname — имя хоста URL
  • port — номер порта
  • pathname — путь в URL (та часть, которая идёт после первого слэша / )
  • search — часть запроса URL (та часть, которая идёт после знака вопроса ? )
  • hash — часть URL (та часть, которая идёт после знака решётки # )

Источник

Как получить url текущей страницы на JavaScript

Рассмотрим как получить URL текущей страницы в JS целиком, а также по отдельности — протокол, доменное имя сайта, GET параметры и значение после решётки (хеша). Полная информация об адресе содержится в объекте « document.location ». Доступ к отдельным элементам получаем через его свойства.

Разберём адрес: https://realadmin.ru/saytostroy/?page=4#top

Получение значений GET параметров

Javascript предоставляет специальный объект для работы с GET параметрами. С его помощью можно проверить существование параметра по названию и получить значение.

Для примера возьмем адрес:

https://realadmin.ru/saytostroy/?page=4&limit=10&sortby=desc

Извлечём значения «page» и «sortby»:

var paramsString = document.location.search; // ?page=4&limit=10&sortby=desc var searchParams = new URLSearchParams(paramsString); searchParams.get("page"); // 4 searchParams.get("sortby"); // desc

URLSearchParams — объект не доступен в устаревших версиях браузеров, например во всех версиях IE.

Для проверки существования параметров, воспользуйтесь методом «has».

searchParams.has("limit"); // true searchParams.has("sortby"); // true searchParams.has("orderby"); // false

Для перебора всех пар ключ/значение используем метод «entries».

Читайте также:  Install latest java runtime environment

for(var pair of searchParams.entries())

Разбор URL из строки

Кроме всех вышеприведённых примеров, можно воспользоваться объектом URL.

var addr = new URL('https://realadmin.ru/saytostroy/?page=4&limit=10&sortby=desc#top');

Интересно, что этот объект содержит свойство «searchParams» типа «URLSearchParams», который можно использовать для извлечения GET параметров.

var addr = new URL('https://realadmin.ru/saytostroy/?page=4&limit=10&sortby=desc#top'); if (addr.searchParams.has('limit')) < let limit = addr.searchParams.get('limit'); // 10 >

Обновил статью, добавил новый способ работы с параметрами через объект URLSearchParams. Пользуйтесь 🙂

а где данные https://realadmin.ru/saytostroy/?page=4#top
которые нах. между / и ?page…?
как определить адрес конкретного файла\страницы?

Может кому пригодится
append(name, value) – добавить параметр по имени,
delete(name) – удалить параметр по имени,
get(name) – получить параметр по имени,
getAll(name) – получить все параметры с одинаковым именем name (такое возможно, например: ?user=John&user=Pete),
has(name) – проверить наличие параметра по имени,
set(name, value) – задать/заменить параметр,
sort() – отсортировать параметры по имени, используется редко

Источник

Location – URL текущей страницы

Объект Location связан с адресной строкой браузера, в его свойствах содержатся все компоненты URL доступные для чтения и записи.

Доступ к Location обычно осуществляется через объекты Document.location или Window.location . Если скрипт запускается из iframe (в одном домене), доступ к родительскому окну доступен через window.parent.location .

Рассмотрим какие будут значения при следующим URL:

Location.href

Вернет полный URL страницы.

console.log(window.location.href);

Результат:

http://www.example.com/pages/contats?page=1&sort=2#marker

Объекту location можно присвоить новый URL, браузер сразу перейдет на новую страницу.

window.location.href = 'https//snipp.ru';

Так же для редиректа можно использовать методы location.assign() и location.replace() . Отличие последнего в том, что пользователь не сможет использовать кнопку «назад».

window.location.assign('https//snipp.ru');
window.location.replace('https//snipp.ru');

Location.protocol

Возвращает используемый протокол, включая : .

console.log(window.location.protocol);

Результат:

Location.port

Номер порта, если его нет в URL, то ни чего не выведется.

console.log(window.location.port);

Location.host

Содержит домен и порт (если есть).

console.log(window.location.host);

Результат:

Источник

window . location

location — это объект хранящийся в window , который позволяет получать информацию о текущем адресе страницы и менять его с помощью функций или обновления полей объекта.

Читайте также:  Перенос таблицы word html

Пример

Скопировать ссылку «Пример» Скопировано

С помощью location мы можем получить текущий адрес:

 // если выполнить этот скрипт на текущей странице доки в консолиconsole.log(window.location.href)// 'https://doka.guide/js/window-location/' // если выполнить этот скрипт на текущей странице доки в консоли console.log(window.location.href) // 'https://doka.guide/js/window-location/'

Обновление текущей страницы можно произвести с помощью reload ( ) . Этот метод делает то же самое, что и кнопка «Обновить» в браузере:

 window.location.reload() window.location.reload()

С помощью replace ( ) можно сделать клиентский редирект, это приведёт к мгновенному переходу по адресу, указанному при вызове метода:

 window.location.replace('https://doka.guide/') window.location.replace('https://doka.guide/')

Как понять

Скопировать ссылку «Как понять» Скопировано

Для навигации по сайту мы используем адреса и параметры страницы. window . location содержит набор свойств и методов, чтобы удобно получать адрес и управлять им.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Свойства

Скопировать ссылку «Свойства» Скопировано

Ссылка, на которой обозначены все свойства window.location

href – полное представление адреса. Можно сказать, что это зеркало того, что находится в адресной строке браузера в данный момент. Если записать значение в это свойство, то произойдёт обновление адреса и редирект на новый адрес.

Остальные свойства — это кусочки location . href . Они нужны, чтобы удобно получать каждый из них отдельно, а не вытаскивать их руками из полной строки адреса.

 console.log(window.location.href)// отобразит текущий адресwindow.location.href = 'https://example.com'// сделает переход по указанному адресу console.log(window.location.href) // отобразит текущий адрес window.location.href = 'https://example.com' // сделает переход по указанному адресу

protocol содержит текущий протокол по которому открыта страница. Чаще всего там будет https и http .

host содержит значение хоста из ссылки. Хост включает в себя название текущего домена и порта.

Читайте также:  Java lang nullpointerexception ошибка android

hostname — частичка с доменом из свойства host , не включает в себя порт.

port — вторая составляющая значения host , содержит только номер порта. Если порт не указан в явном виде, то значением свойства будет пустая строка » .

origin включает в себя путь, начиная с protocol и заканчивая port .

search содержит параметры в формате ключ = значение разделённые & . Если параметров нет, то значением будет пустая строка.

hash — якорная ссылка включая символ # . Она находится в самом конце пути и отвечает за навигацию между размеченными на странице элементами с помощью установки атрибута id на тегах. Эта часть URL не передаётся на сервер. Если параметров нет, то значением будет пустая строка.

 window.location.hash = 'в-работе'// проскролит страницу до элемента с `id="в-работе"` если такой присутствует на страницеconsole.log(window.location.hash)// напечатает якорь window.location.hash = 'в-работе' // проскролит страницу до элемента с `id="в-работе"` если такой присутствует на странице console.log(window.location.hash) // напечатает якорь

pathname – репрезентация текущего пути на сайте. Если текущий урл не содержит путь, то значением будет корневой путь » / » .

Например, значения window . location . pathname в зависимости от адреса:

  • https : / / doka . guide / js / window — location / → /js / window — location / .
  • https : / / doka . guide → / .

Методы

Скопировать ссылку «Методы» Скопировано

assign ( новый _ путь ) – метод вызывает переход на страницу, переданную в аргументах. После перехода на страницу пользователь может вернуться на страницу, с которой произошёл переход, с помощью браузерной кнопки назад.

replace ( новый _ путь ) аналогичен методу assign ( ) , но адрес страницы с которой был вызван этот метод не будет сохранён в истории браузера. При попытке вернуться назад пользователь будет отправлен на страницу предшествующую той, с которой произошёл переход.

reload ( ) перезагружает текущую страницу.

to String ( ) приводит адрес страницы к строке. Возвращает то же самое значение, что и location . href .

Источник

Оцените статью
© 2023 Программирование