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

Опубликовано: 11 Декабря, 2021

Метод 1. Замена текущего состояния на replaceState () Метод. Интерфейс истории браузера управляет историей сеанса браузера. Он включает посещенную страницу во вкладке или фрейме, где находится текущая страница. Управление этим состоянием можно использовать для изменения URL-адреса браузера без перезагрузки страницы.

Метод replaceState () используется для изменения текущей записи истории и замены свойств состояния на свойства в переданных параметрах.

Параметры этого метода состоят из 3 частей: объект состояния, который представляет собой сериализуемый объект о состоянии, заголовок, который является заголовком нового состояния, и URL-адрес, который является новым URL-адресом состояния.

URL-адрес можно изменить, передав в этот метод требуемый URL-адрес в виде строки. Это изменит URL-адрес страницы без перезагрузки страницы.

Пример:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to modify URL without reloading
        the page using JavaScript?
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksForGeeks
    </h1>
      
    <b>
        How to modify URL without reloading
        the page using JavaScript?
    </b>
      
    <p>
        Click on the button below to modify
        the current history state
    </p>
      
    <button onclick="modifyState()">
        Modify history state
    </button>
      
    <script>
        function modifyState() {
            let stateObj = { id: "100" };
            window.history.replaceState(stateObj,
                        "Page 3", "/page3.html");
        }
    </script>
</body>
  
</html>

Выход:

Перед нажатием кнопки:
После нажатия кнопки:

Метод 2: Добавление нового состояния с помощью pushState () Метод: Метод pushState () используется для добавления новой записи в историю со свойствами, переданными в качестве параметров. Это изменит текущий URL-адрес на новое, указанное без перезагрузки страницы.

Параметры этого метода состоят из трех частей: объект состояния, который представляет собой сериализуемый объект о состоянии, заголовок, который является новым заголовком состояния, и URL-адрес, который является новым URL-адресом состояния.
URL-адрес можно изменить, передав в этот метод требуемый URL-адрес в виде строки. Это изменит URL-адрес страницы без перезагрузки страницы.

Пример:

 <!DOCTYPE html>
 < html >
 
< head >
    < title >
        How to modify URL without reloading
        the page using JavaScript?
    </ title >
 </ head >
 
< body >
    < h1 style = "color: green" >
        GeeksForGeeks
    </ h1 >
     
    < b >
        How to modify URL without reloading
        the page using JavaScript?
    </ b >
     
    < p >
        Click on the button below to add
        a new history state
    </ p >
     
    < button onclick = "addState()" >
        Add history state
    </ button >
     
    < script >
        function addState() {
            let stateObj = { id: "100" };
             
            window.history.pushState(stateObj,
                     "Page 2", "/page2.html");
        }
    </ script >
 </ body >
 
</ html > 

Выход:

Перед нажатием кнопки:
После нажатия кнопки:

JavaScript Вопросы о Web технологиях Picked JavaScript-Misc

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

РЕКОМЕНДУЕМЫЕ СТАТЬИ