JS об'єкт Location

Введення

Об'єкт Location у JavaScript відображає поточний URL документа, дозволяючи нам отримувати, переглядати та змінювати його частини. Цей об'єкт можна використовувати для переадресації на інший URL, перезавантаження сторінки та інших завдань, пов'язаних із роботою URL.

Location надає властивості для доступу до різних частин URL:

• location.href – повний URL.
• location.protocol – протокол (наприклад, "http:" або "https:").
• location.host – ім'я хоста з портом.
• location.hostname – ім'я хоста.
• location.port – порт.
• location.pathname – шлях після імені домену.
• location.search – рядок запиту, починаючи з "?".
• location.hash – частина URL після "#".

Приклад 1: Отримання поточного URL

console.log(location.href);  // може вивести "https://example.com/page.html?query=js#section"

У цьому прикладі ми просто виводимо поточний URL документа.

Приклад 2: Зміна частини URL

location.hash = "newSection";

Після виконання цього коду, URL документа зміниться на "https://example.com/page.html?query=js#newSection", а якщо на сторінці є елемент з ID "newSection", браузер прокрутить сторінку до цього елементу.

Переадресація та перезавантаження сторінки

Методи об'єкта Location дозволяють нам керувати сторінкою:

• location.assign(url): завантажує новий документ.
• location.reload(): перезавантажує поточний документ.
• location.replace(url): завантажує новий документ, замінюючи поточний в історії браузера.

Приклад 3: Переадресація на інший сайт

location.assign("https://www.openai.com");

Цей код перенаправляє користувача на сайт OpenAI.

Приклад 4: Перезавантаження сторінки

location.reload();

Виконуючи цей код, ви примусово перезавантажите поточну сторінку.

Приклад 5: Заміна поточного URL без додавання його в історію браузера

location.replace("https://www.example.com/newPage");

Цей код перенаправляє на "https://www.example.com/newPage", але старий URL не буде збережений в історії браузера, тому користувач не зможе повернутися назад за допомогою кнопки "Назад" у браузері.

Звернення до параметрів запиту

location.search відображає рядок запиту URL, який починається з символу "?". Часто нам потрібно працювати з параметрами запиту.

Приклад 6: Отримання параметрів запиту

Припустимо, URL має такий вигляд: "https://example.com/page.html?user=John&age=30".

let params = new URLSearchParams(location.search);
let user = params.get("user");  // John
let age = params.get("age");    // 30

У цьому прикладі ми створюємо об'єкт URLSearchParams з location.search для легкого доступу до параметрів запиту.

Використання об'єкта Location є ключовим при роботі з веб-сторінками, адже він дозволяє нам керувати URL та взаємодіяти з його компонентами. З його допомогою можна легко реалізувати редирект, працювати з параметрами запиту та багато іншого.

Синтаксис

const loc = document.location;

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

function filterProducts(color, size) {
    let params = new URLSearchParams(location.search);
    params.set('color', color);
    params.set('size', size);
    location.search = params.toString();
}
// Користувач вибирає колір "червоний" і розмір "M", викликається filterProducts('red', 'M')

function redirectToOriginOrDashboard() {
    if (document.referrer) {
        location.href = document.referrer;
    } else {
        location.href = '/dashboard';
    }
}
// Після успішного входу на сайт викликається redirectToOriginOrDashboard()

function setLanguage(lang) {
    location.pathname = '/' + lang + '/homepage';
}
// Користувач вибирає "українська", викликається setLanguage('uk')

Методи

replace()

Замінює поточну сторінку у стеку переходів новою, без можливості повернення назад.

reload()

Перезавантажує поточну веб-сторінку з сервера або кешу браузера.

assign()

Завантажує новий документ за вказаною URL-адресою.

Властивості

host

Визначає ім'я хоста та порт поточної веб-сторінки.

hash

Забезпечує доступ до фрагмента URL, який слідує після символу "#".

protocol

Визначає або повертає протокол поточної веб-сторінки.

port

Визначає порт, на якому працює поточна веб-сторінка.

search

Повертає частину URL, що містить рядок запиту після знака '?'.

origin

Повертає походження URL поточної веб-сторінки, включаючи схему, хост та порт.

hostname

Повертає ім'я домену поточної веб-сторінки без порту.

href

Повертає або встановлює повний URL поточної веб-сторінки.

pathname

Вказує шлях сторінки від кореня сайту до поточної веб-сторінки.