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

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

Содержание
  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».

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

Пример

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

С помощью 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 содержит значение хоста из ссылки. Хост включает в себя название текущего домена и порта.

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 .

Источник

Читайте также:  Install updated java version
Оцените статью
© 2024 Программирование