JS метод Location.assign()

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

Метод assign() об'єкта Location є ключовим елементом у взаємодії з URL веб-сторінки в мові програмування JavaScript. Цей метод дозволяє програмно перенаправляти користувача на нову веб-сторінку, змінюючи поточний URL. Завдяки assign(), розробники мають можливість контролювати навігацію в межах веб-додатку, що є особливо важливим у створенні інтерактивних, динамічних веб-сайтів та односторінкових додатків (SPA).

Метод assign() приймає один аргумент — URL-адресу, на яку потрібно перенаправити користувача. Використання цього методу ефективне у ситуаціях, коли необхідно перенаправити користувача на іншу сторінку, наприклад, після успішного виконання дій у формі, або для переходу до іншої частини веб-сайту на підставі певних дій користувача.

Простий приклад використання методу assign() може виглядати так:

function redirectToHomepage() {
    window.location.assign('https://www.example.com');
}

У цьому коді функція redirectToHomepage() викликає assign() на об'єкті location глобального об'єкта window, перенаправляючи користувача на заданий URL-адресу.

У більш розгорнутих сценаріях, метод assign() може бути інтегрований у логіку додатку для створення умовних навігаційних потоків. Наприклад, можна використовувати цей метод для перенаправлення користувача на різні сторінки в залежності від відповіді сервера або результатів обробки даних на клієнтській стороні.

Наприклад:

function login(userCredentials) {
    authenticateUser(userCredentials).then(response => {
        if (response.isAuthenticated) {
            window.location.assign('https://www.userdashboard.com');
        } else {
            window.location.assign('https://www.loginerror.com');
        }
    });
}

У цьому випадку, після спроби входу в систему, користувач перенаправляється на сторінку панелі керування, якщо аутентифікація пройшла успішно, або на сторінку з помилкою у вході в протилежному випадку.

Важливо зазначити, що assign() додає нову сторінку у стек історії браузера, тому користувач зможе повернутися до попередньої сторінки за допомогою кнопки "Назад" браузера. Це робить assign() відмінним варіантом для сценаріїв, де така поведінка є бажаною.

Загалом, метод assign() є невід'ємною частиною інтерфейсу управління URL та навігацією в JavaScript. Його правильне використання дозволяє розробникам створювати більш динамічні та інтерактивні веб-додатки, забезпечуючи плавні та зрозумілі переходи для користувачів.

Синтаксис

assign(url)

Параметри

url

Рядок, що містить URL-адресу сторінки для переходу, наприклад, абсолютний URL типу https://example.com, або відносний URL — такий як "/Web" (лише шлях для навігації до іншого документа на тому ж походженні) або "#specifications" (лише фрагмент рядка для навігації до певної частини тієї ж сторінки) тощо.

Return

none

Повертає undefined.

Переглядачі

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

Приклади

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

function redirectToHomePage() {
  window.location.assign('https://example.com/home');
}

function redirectToLocalizedPage(userCountry) {
  if (userCountry === 'UA') {
    window.location.assign('https://example.com/ua');
  } else {
    window.location.assign('https://example.com/international');
  }
}