Змінення URL-адреси в JavaScript без перезавантаження сторінки

Динамічне змінення URL-адреси за допомогою JavaScript

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

У цьому посібнику ми розглянемо способи зміни частини URL-адреси після домену, включаючи методи, які дозволяють отримати доступ до частини перед символом решетки (#). Це забезпечує дотримання міждоменних політик, одночасно досягаючи бажаної модифікації URL-адреси.

Детальне пояснення зміни URL-адреси в JavaScript

Перший сценарій використовує history.pushState() метод, який є частиною API історії. Ця команда дозволяє розробникам додавати новий запис до стека історії сеансів браузера, фактично змінюючи URL-адресу, що відображається в адресному рядку, без перезавантаження сторінки. У сценарії const newURL = "/page2.php"; встановлює новий шлях і history.pushState(null, "", newURL); змінює URL на цей новий шлях. Шляхом обгортання history.pushState у функції, як function changeURL(newPath), ми можемо динамічно оновлювати URL-адресу за потреби. Ця техніка особливо корисна для односторінкових програм (SPA), де вміст змінюється динамічно без перезавантаження всієї сторінки.

Другий сценарій стосується зміни хешу URL-адреси за допомогою window.location.hash. Ця властивість отримує або встановлює частину прив’язки URL-адреси, що слідує за символом решітки (#). За установкою const hashValue = "newSection"; і window.location.hash = hashValue;, хеш URL-адреси змінюється на #newSection без перезавантаження сторінки. Цей підхід корисний для навігації всередині однієї сторінки або створення посилань на певні розділи документа. Крім того, функція function updateHash(newHash) інкапсулює цю функцію, полегшуючи динамічну зміну хеш-частини URL-адреси. Обидва сценарії забезпечують зручні способи зміни URL-адреси та покращення взаємодії з користувачем, уникаючи непотрібних перезавантажень сторінки.

const newURL = "/page2.php";
history.pushState(null, "", newURL);
// This changes the URL to /page2.php without reloading the page

function changeURL(newPath) {
    window.history.pushState({}, "", newPath);
}
// Example usage
changeURL("/page2.php");

const hashValue = "newSection";
window.location.hash = hashValue;
// This changes the URL hash to #newSection

function updateHash(newHash) {
    window.location.hash = newHash;
}
// Example usage
updateHash("newSection");

Вивчення додаткових методів зміни URL-адреси без перезавантаження

Ще один аспект зміни URL-адреси без перезавантаження сторінки передбачає використання replaceState() метод з API історії. Поки pushState() додає новий запис історії, replaceState() змінює поточний запис історії. Це може бути особливо корисним, коли ви хочете змінити URL-адресу, не захаращуючи історію користувача кількома станами. Наприклад, якщо у вас є односторінкова програма, вміст якої часто змінюється, ви можете оновити URL-адресу, щоб відобразити поточний стан, не додаючи кожну зміну до історії. Завдяки цьому функція кнопки «Назад» стає чистою та зручною для користувача.

Використовувати replaceState(), ви можете написати функцію, подібну до changeURL() але замість цього подзвонити history.replaceState() всередині нього. Наприклад, function replaceURL(newPath) могли б використати history.replaceState(null, "", newPath); щоб оновити URL-адресу. Ця техніка є цінною для покращення взаємодії з користувачем, зберігаючи URL-адресу в синхронізації зі станом програми без створення непотрібних записів історії. Крім того, він пропонує більш ефективний спосіб керування історією браузера, особливо в динамічних веб-додатках.