JS властивість Object.location

Загальний опис

Властивість location в об'єкті Window є однією з ключових властивостей у мові програмування JavaScript, відіграючи важливу роль у взаємодії з URL поточної веб-сторінки. Ця властивість надає можливість отримати або змінити URL, а також взаємодіяти з різними його компонентами, такими як шлях (pathname), запит (query string), хеш (hash) та інші. Використання location відіграє ключову роль у навігації між сторінками, редиректах, отриманні інформації про поточний URL та динамічному його зміненні без перезавантаження сторінки.

Отримання інформації про URL

Один з найпростіших випадків використання location - це отримання інформації про поточний URL. Властивість href повертає повний URL. Наприклад:

console.log(window.location.href); // Повертає повний URL сторінки

Інші корисні властивості включають protocol (протокол, наприклад, 'http:'), hostname (ім'я хоста), port (порт), pathname (шлях до ресурсу), search (рядок запиту), та hash (фрагмент URL після символу #).

Зміна URL

location також може використовуватися для зміни URL. Просто присвоєння рядка location.href спричинить перенаправлення браузера на нову адресу:

window.location.href = 'https://example.com'; // Редирект на новий URL

Для додавання чи зміни параметрів запиту, хеша, шляху тощо, можна змінювати відповідні властивості location, наприклад location.search або location.hash.

Робота з хешем

Хеш URL часто використовується для навігації в рамках однієї сторінки. Для цього можна читати та змінювати властивість location.hash:

window.location.hash = 'section1'; // Перейти до якоря #section1 на сторінці
console.log(window.location.hash);  // Виводить поточний хеш

Використання методів об'єкту location

Об'єкт location також має методи, наприклад, reload(), який використовується для перезавантаження поточної сторінки:

window.location.reload(); // Перезавантажує поточну сторінку

Метод assign() може використовуватися для завантаження нового документа:

window.location.assign('https://example.com'); // Завантажує новий документ

правити

Порада

Зміна властивості location може бути використана для перенаправлення користувача на іншу веб-сторінку. Це ефективний спосіб реалізації переходів у веб-додатках. Наприклад, ви можете перенаправити користувача на сторінку логіну, якщо він не авторизований: if (!user.isAuthenticated) { window.location.href = '/login'; }.

автор: Bond правити

Порада

Для розбору URL рекомендується використовувати властивості, які location надає, такі як hostname, pathname, search та hash. Це дозволяє легко отримати частини URL без необхідності використання регулярних виразів або інших складних методів розбору. Наприклад, const query = new URLSearchParams(window.location.search); дозволить легко працювати з параметрами запиту.

автор: Bond правити

Порада

Важливо пам'ятати, що зміна властивості location спричиняє перезавантаження сторінки. Це може бути неочікувано для користувача. Тому перед зміною location слід забезпечити збереження необхідних даних та інформувати користувача про перехід на іншу сторінку, якщо це потрібно.

автор: Bond правити

Нотатка

Використання властивості location для отримання поточної URL-адреси дозволяє розробникам здійснювати аналіз та маніпуляції зі складовими URL. Це може бути корисним для реалізації функціональності, заснованої на адресі сторінки, наприклад, для визначення активного пункту навігації. Одним із простих способів використання є перевірка шляху в URL: if (window.location.pathname === '/home') { /* код для домашньої сторінки */ }.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Window.location

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	3	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

<button id="go">Перейти на css.in.ua</button>

function redirectToNewPage() {
    // assign() додає запис в історію — кнопка «Назад» повертає
    window.location.assign('https://css.in.ua');
}

document.getElementById('go').addEventListener('click', redirectToNewPage);

// Використовуємо властивість location для отримання поточного URL-адреси сторінки
const currentURL = window.location.href;

// Виводимо отриманий URL на консоль
console.log(`Поточний URL-адрес сторінки: ${currentURL}`);