JS властивість Location.href
Загальний опис
Властивість href в об'єкті Location в JavaScript відіграє ключову роль у взаємодії з поточним URL веб-сторінки. Ця властивість надає повний URL адресу, який включає схему протоколу, хост, порт (якщо він вказаний), шлях, пошуковий запит (query string) та якір (fragment). Використання href є фундаментальним для розробки веб-додатків, оскільки воно дозволяє не тільки отримувати доступ до цілісної інформації URL, але й маніпулювати нею, що є особливо корисним для реалізації перенаправлень, змін у навігації тощо.
location.href можна використовувати як для читання, так і для запису, що робить його універсальним інструментом для роботи з URL адресами в браузері. При записі нового значення у href, відбувається перенаправлення браузера на нову адресу.
Приклади використання:
Отримання поточного URL: Для отримання повного URL поточної сторінки можна використовувати наступний код:
let currentUrl = window.location.href; console.log(currentUrl);Цей код виведе на консоль повний URL адресу поточної сторінки.
Перенаправлення на іншу сторінку: Властивість
hrefможе використовуватися для перенаправлення користувача на інший URL:window.location.href = 'https://www.example.com';Цей код призведе до перезавантаження сторінки та перенаправлення користувача на вказаний URL.
Динамічна зміна URL без перезавантаження сторінки: Хоча пряме присвоєння
hrefпризводить до перенаправлення, існують сучасні методи (наприклад,history.pushState) для динамічної зміни URL без перезавантаження сторінки:history.pushState({}, '', '/new-page');Цей метод змінює URL, але не викликає перезавантаження сторінки, зберігаючи при цьому поточний стан.
location.href є потужним інструментом у розробці веб-додатків, який надає значні можливості для маніпулювання навігацією та адресацією в браузері. Його гнучке використання відіграє ключову роль у створенні інтерактивних та динамічних веб-сторінок.
| Порада: | Використання властивості |
| Порада: | Щоб перенаправити користувача на іншу сторінку, можна присвоїти нове значення властивості |
| Порада: | Перед зміною |
| Порада: | Важливо розуміти, що зміна |
Синтаксис
location.hrefЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
1.7 |
Приклади
У цьому прикладі, ми створили дві кнопки: одна для відображення поточного URL ("showCurrentUrl") і інша для перенаправлення на Google ("redirectToGoogle"). Натискання на першу кнопку виводить поточний URL на екран, використовуючи window.location.href. Друга кнопка змінює поточний URL на "https://www.google.com", також використовуючи window.location.href, що демонструє як ця властивість може бути використана для перенаправлення користувача на іншу сторінку.
У цьому прикладі ми демонструємо базове використання властивості location.href для отримання повного URL поточної веб-сторінки. Це корисно для отримання інформації про поточний адресу сторінки, яку можна використовувати для різних цілей, наприклад, для логування, перенаправлення або аналітики.
// Отримання повного URL поточної сторінки
let currentURL = window.location.href;
console.log(currentURL);
У цьому складнішому прикладі ми використовуємо location.href для динамічного перенаправлення користувача на іншу сторінку. Це може бути корисним для реалізації функціоналу перенаправлення в залежності від певних умов, наприклад, перенаправлення на мобільну версію сайту або на спеціальну лендінг-сторінку.
// Перенаправлення на іншу сторінку в залежності від умови
function redirectToPage() {
let condition = /* якась логіка для визначення умови */;
if (condition) {
// Перенаправлення на вказаний URL
window.location.href = "https://www.example.com/special-page";
}
}
redirectToPage();