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'); // Завантажує новий документ
| Нотатка: | Використання властивості |
| Порада: | Зміна властивості |
| Порада: | Для розбору URL рекомендується використовувати властивості, які |
| Порада: | Важливо пам'ятати, що зміна властивості |
Синтаксис
Window.locationЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1 |
3 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей приклад демонструє базове використання Window.location для перегляду та маніпуляції URL сторінки. Важливо зазначити, що зміна деяких частин URL, наприклад, домену, призведе до перезавантаження сторінки.
У цьому прикладі ми використовуємо властивість href об'єкта location, щоб отримати поточний URL-адрес сторінки. Вона містить повну адресу, включаючи протокол (http або https), доменне ім'я, порт і шлях до сторінки. Це корисно, коли потрібно отримати і відобразити URL-адресу для взаємодії з користувачем або для логування.
// Використовуємо властивість location для отримання поточного URL-адреси сторінки
const currentURL = window.location.href;
// Виводимо отриманий URL на консоль
console.log(`Поточний URL-адрес сторінки: ${currentURL}`);
У цьому прикладі ми використовуємо метод assign() об'єкта location, щоб перенаправити користувача на іншу сторінку. Ми передаємо URL нової сторінки в якості аргументу методу assign(). Цей прийом може бути корисним, коли потрібно здійснити перенаправлення після певної дії користувача або в реакції на певну подію на сторінці.
// Використовуємо метод location.assign() для перенаправлення користувача на іншу сторінку
function redirectToNewPage() {
const newPageURL = 'https://www.example.com/new-page'; // URL нової сторінки
window.location.assign(newPageURL);
}
// Викликаємо функцію для перенаправлення користувача
redirectToNewPage();