Перенаправлення на іншу веб-сторінку за допомогою JavaScript/jQuery

У цьому пості ми обговоримо, як перенаправити на іншу веб-сторінку JavaScript і jQuery.

Існує кілька способів перенаправлення сторінки в JavaScript, кожен з яких включає використання майна window.location. Він повертає Location об'єкт, що представляє місце розташування (URL) поточного документа.

1. Використання location.href

Коли ви призначаєте URL для window.location.href, зв'язаний документ переходить на нову сторінку з того ж чи іншого джерела.

З window є глобальним об'єктом, його можна скоротити до:

Зверніть увагу, що location є синонімом location.href . Таким чином, ви можете безпосередньо присвоїти значення location об'єкт.

2. Використання location.assign() функція

Ви також можете перейти до нової URL-адреси, використовуючи метод location.assign(). Якщо вказана URL-адреса має інше походження, це може призвести до збою через політику CORS.

Зверніть увагу, що assign() метод збереже поточну сторінку історія сеансу, тобто. Користувач може повернутися назад за допомогою кнопки «Назад».

3. Використання location.replace() функція

Існує ще один метод об'єкта розташування, який називається replace() , який замінює поточний документ документом за вказаною URL-адресою. на відміну від assign() метод, це замінює запис історії сеансу, і користувач не може повернутися на вихідну сторінку за допомогою кнопки "Назад".

Як у JS реалізується перехід на іншу сторінку

У цій статті я розповім, як у JS реалізується перехід на іншу сторінку. А також наведу кілька простих прикладів JavaScript редиректу.

Ви можете перенаправляти користувача з однієї веб-сторінки на будь-яку іншу кількома способами.У тому числі за допомогою оновлення мета-даних HTML, перенаправлення на стороні сервера. Наприклад, використовуючи файл .htaccess , PHP і за допомогою перенаправлення на стороні клієнта через JavaScript .

Але врахуйте, що несподівані перенаправлення, що відбуваються в середині іншої дії, дратують відвідувачів. Тому використовувати редирект потрібно тільки, якщо це дійсно необхідно і в тому випадку, якщо це матиме сенс з погляду користувача.

Давайте розглянемо, як можна використовувати JavaScript для перенаправлення користувача на іншу сторінку.

Оновлено: 2024-10-11 17:46:06 Вадим Дворніков автор матеріалу

Автоматичний JavaScript-перенаправлення на іншу сторінку

Якщо потрібно автоматично перенаправити користувача з однієї сторінки (URL1) на іншу сторінку (URL2), можна використовувати наступний код:

window.location.href = 'URL2';

Використання void 0 в JavaScript дозволяє генерувати значення undefined у виразах.

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

ПОРАДА: Якщо ви використовуєте вбудований JavaScript (тобто без зовнішнього файла .js), не забудьте помістити код JavaScript у теги .

Перенаправлення через X секунд

У цьому прикладі ми будемо здійснювати js редирект на іншу сторінку через деякий час після завантаження сторінки. Наприклад, якщо потрібно перенаправити відвідувача на головну сторінку після відображення сторінки привітання протягом 5 секунд:

setTimeout(function()< window.location.href = 'homepage-url'; >, 5 * 1000);

Необхідно вставити JavaScript на сторінці привітання.Не забудьте замінити homepage-url на URL-адресу домашньої сторінки.

Ми використовували метод setTimeout, щоб вказати скрипту виконати перенаправлення через 5 секунд (множимо 5 на 1000, щоб перетворити секунди на мілісекунди).

ПОРАДА: У JavaScript значення часу завжди розраховуються в мілісекундах.

Подія change JS активується, коли значення елемента форми було змінено.

Перенаправлення , виходячи з умови

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

Використовуйте наступний код для перенаправлення відвідувачів, які задовольняють певну умову:

Наприклад, цей код перенаправляє відвідувачів на іншу сторінку, якщо ширина їх екрана менше 600 пікселів:

Перенаправлення на основі дій користувача

Останній приклад демонструє, як перенаправити відвідувача, ґрунтуючись на його діях. Ви можете прив'язати js редирект до будь-якого типу дії користувача. У цьому прикладі для простоти ми будемо обробляти натискання кнопки.

Наступний код буде перенаправляти відвідувача на цільову сторінку після натискання на #mybutton:

document.getElementById('mybutton').onclick = function() < window.location.href = 'redirect-url'; >;

Можна зробити те саме, використовуючи наступний код:

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

Я спробував розглянути всі можливі випадки js редиректу на іншу сторінку. Якщо я коли-небудь зіткнуся з іншими сценаріями, я додам їх до цієї статті.

Як відстежити зміну стану під час переходу з однієї сторінки на іншу?

Є дві сторінки Questions та Home. На сторінці Questions є форма, яка надсилає дані на сервер.Також по submit ми переходимо зі сторінки Questions на сторінку Home.

function setAnswers(answers) < store.dispatch('setAnswers', answers);

async setAnswers(< dispatch, commit >, answers)

SET_ANSWERS(state, answers) < state.answers = answers >, SET_PAST(state, past) < state.past = past; next = next;

При цьому на сторінці Home past і next відстежуються через computed та передаються іншому компоненту.

В консолі я бачу, що ці значення встановлюються, але в Home дані не оновлюються.