Как изменить URL без перезагрузки страницы?

Вы также можете использовать HTML5 replaceState, если хотите изменить URL, но не хотите добавлять запись в историю браузера:

if (window.history.replaceState) {
   // предотвращает сохранение истории браузера с каждым изменением:
   window.history.replaceState(statedata, title, url);
}

Это может «сломать» функциональность кнопки «Назад». Однако в некоторых случаях это может быть необходимо, например, в галерее изображений, где вы хотите, чтобы кнопка «Назад» возвращала вас на страницу индекса галереи, а не перемещала по каждому изображению, которое вы просматривали, при этом предоставляя каждому изображению уникальный URL.

Вы можете воспользоваться следующим кодом для замены текущего URL на новый:

// Заменяем текущий URL на newURL
history.pushState({}, null, newURL);

В этом примере используется метод pushState объекта history, который добавляет новую запись в историю браузера. Первый параметр — это состояние (в данном случае пустой объект), второй — название (который мы оставляем как null), а третий — это новый URL, который вы хотите установить. Обратите внимание, что использование pushState не перезагружает страницу, а просто обновляет адрес в адресной строке.

В JavaScript, если вы хотите изменить фрагмент идентификатора URL (hash) родительского окна (в случае, если ваш скрипт работает внутри iframe), вы можете использовать следующий код:

parent.location.hash = "hello";

Этот код устанавливает hash родительского окна на строку "hello". Важно отметить, что изменение hash приведёт к добавлению этой строки в URL после символа #, но не будет перезагружать страницу. Также убедитесь, что у вас есть разрешение на доступ к родительскому окну, так как это может привести к ошибке безопасности (например, если страницы загружены с разных доменов).

До появления HTML5 мы могли использовать:

parent.location.hash = "hello";

и:

window.location.replace("http://www.example.com");

Эти методы перезагрузят вашу страницу, но HTML5 представил history.pushState(page, caption, replace_url), который не должен перезагружать вашу страницу.

Если вы хотите позволить пользователям добавлять страницы в закладки или делиться ими, и вам не требуется, чтобы URL был совсем точным, и вы не используете хеш-якоря для чего-то еще, то вы можете сделать это в два этапа. Вам нужно использовать location.hash, а затем реализовать проверку на главной странице, чтобы увидеть, есть ли в URL хеш-якорь, и перенаправить пользователя на соответствующий результат.

Например:

1. Пользователь находится на www.site.com/section/page/4.
2. Пользователь выполняет какое-то действие, которое изменяет URL на www.site.com/#/section/page/6 (с хешем). Допустим, вы загрузили правильный контент для страницы 6 на страницу, так что, помимо хеша, пользователь не слишком беспокоится.
3. Пользователь передает этот URL кому-то или добавляет его в закладки.
4. Кто-то другой или тот же пользователь в последующий раз переходит на www.site.com/#/section/page/6.
5. Код на www.site.com/ перенаправляет пользователя на www.site.com/section/page/6, используя что-то вроде этого:

if (window.location.hash.length > 0){ 
   window.location = window.location.hash.substring(1);
}

Надеюсь, это имеет смысл! Это полезный подход для некоторых ситуаций.