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'); // Завантажує новий документ
- Порада
-
Зміна властивості
автор: Bondlocationможе бути використана для перенаправлення користувача на іншу веб-сторінку. Це ефективний спосіб реалізації переходів у веб-додатках. Наприклад, ви можете перенаправити користувача на сторінку логіну, якщо він не авторизований:if (!user.isAuthenticated) { window.location.href = '/login'; }. - Порада
-
Для розбору URL рекомендується використовувати властивості, які
автор: Bondlocationнадає, такі якhostname,pathname,searchтаhash. Це дозволяє легко отримати частини URL без необхідності використання регулярних виразів або інших складних методів розбору. Наприклад,const query = new URLSearchParams(window.location.search);дозволить легко працювати з параметрами запиту. - Порада
-
Важливо пам'ятати, що зміна властивості
автор: Bondlocationспричиняє перезавантаження сторінки. Це може бути неочікувано для користувача. Тому перед зміноюlocationслід забезпечити збереження необхідних даних та інформувати користувача про перехід на іншу сторінку, якщо це потрібно. - Нотатка
-
Використання властивості
автор: Bondlocationдля отримання поточної URL-адреси дозволяє розробникам здійснювати аналіз та маніпуляції зі складовими URL. Це може бути корисним для реалізації функціональності, заснованої на адресі сторінки, наприклад, для визначення активного пункту навігації. Одним із простих способів використання є перевірка шляху в URL:if (window.location.pathname === '/home') { /* код для домашньої сторінки */ }.
Синтаксис
Window.locationПереглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3 | 12 | 4 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
| Переглядач |  |
|---|---|
| 1.7 |
Приклади
+ запропонувати свій приклад у пісочниці
У цьому прикладі ми використовуємо метод assign() об'єкта location, щоб перенаправити користувача на іншу сторінку. Ми передаємо URL нової сторінки в якості аргументу методу assign(). Цей прийом може бути корисним, коли потрібно здійснити перенаправлення після певної дії користувача або в реакції на певну подію на сторінці.
HTML
<button id="go">Перейти на css.in.ua</button>JS
function redirectToNewPage() {
// assign() додає запис в історію — кнопка «Назад» повертає
window.location.assign('https://css.in.ua');
}
document.getElementById('go').addEventListener('click', redirectToNewPage);У цьому прикладі ми використовуємо властивість href об'єкта location, щоб отримати поточний URL-адрес сторінки. Вона містить повну адресу, включаючи протокол (http або https), доменне ім'я, порт і шлях до сторінки. Це корисно, коли потрібно отримати і відобразити URL-адресу для взаємодії з користувачем або для логування.
// Використовуємо властивість location для отримання поточного URL-адреси сторінки
const currentURL = window.location.href;
// Виводимо отриманий URL на консоль
console.log(`Поточний URL-адрес сторінки: ${currentURL}`);
Цей приклад демонструє базове використання Window.location для перегляду та маніпуляції URL сторінки. Важливо зазначити, що зміна деяких частин URL, наприклад, домену, призведе до перезавантаження сторінки.
Коментарі
Коментарів ще немає — будьте першим!