window.location в JavaScript — адреса сторінки

Введення

Об'єкт 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 та взаємодіяти з його компонентами. З його допомогою можна легко реалізувати редирект, працювати з параметрами запиту та багато іншого.

правити

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

правити

Порада

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

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

Нотатка

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

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

Нотатка

Метод location.replace() не лише перенаправляє на новий URL, але й видаляє поточний URL з історії браузера. Це може бути корисно в певних ситуаціях, але також може викликати незручності для користувачів, які сподіваються повернутися на попередню сторінку.

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

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

Синтаксис

const loc = document.location;

методи

властивості

Переглядачі

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

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

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

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

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

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

Переглядач
	1.7*

Приклади

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

// URL має ті самі властивості, що й location, — зручно показувати на сталому рядку
const url = new URL('https://css.in.ua/js/object/Location?page=2&sort=new#top');
console.log('protocol:', url.protocol);   // https:
console.log('hostname:', url.hostname);   // css.in.ua
console.log('pathname:', url.pathname);   // /js/object/Location
console.log('search:', url.search);       // ?page=2&sort=new
console.log('hash:', url.hash);           // #top

// параметри руками не розбирають
const params = new URLSearchParams(url.search);
console.log('page:', params.get('page'));        // 2
console.log('якого немає:', params.get('id'));   // null — а не порожній рядок

params.set('page', '3');
console.log('новий рядок запиту:', params.toString());   // page=3&sort=new

// адреса самої сторінки живе в location (тут це службова адреса рамки прикладу)
console.log('адреса самої рамки:', location.href);
console.log('location.pathname:', location.pathname);

// перехід: location.href = url або location.assign(url);
// location.replace(url) — те саме, але без запису в історії

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

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()