Как получить уведомление об изменении истории с помощью метода history.pushState ()?

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

Задача состоит в том, чтобы обнаруживать изменения в истории браузера при каждом вызове метода history.pushState (). Чтобы обнаруживать изменения в истории браузера всякий раз, когда вызывается метод history.pushState () , нам нужно обезьяно-патчить (изменить поведение существующей функции, аналогично переопределению) объект с именем window.history . Затем мы вставим часть нашей собственной логики, которая будет выполняться всякий раз, когда история браузера изменяется в функции history.pushState .

Синтаксис:

 window.onpopstate = history.onpushstate = функция (e) 
    {
      // Код для срабатывания при изменении истории
    };

Примеры ниже иллюстрируют вышеуказанный подход:

Пример 1: Здесь мы вызываем history.pushState нажатием кнопки и обнаруживаем его. Нажав кнопку изменения, мы видим в консоли, что история была изменена и новое состояние было добавлено. Мы также видим, что URL-адрес браузера был изменен, и теперь он указывает на test.html вместо index.html.

 <!DOCTYPE html>
 < html >
 
< body >
    < center >
        < h1 id = "Geeks" style = "color: green;" >
         GeeksforGeeks
        </ h1 >
 
        <!-- Button to modify history of browser -->
        < button id = "mod" >Modify History</ button >
    </ center >
    < script src =
 " https://code.jquery.com/jquery-3.4.1.min.js " >
    </ script >
    < script type = "text/javascript" >
 
        // Monkey patching window.history
        (function(history) {
            var pushState = history.pushState;
            history.pushState = function(state) {
                if (typeof history.onpushstate == "function")
                {
                    history.onpushstate({
                        state: state
                    });
                }
                return pushState.apply(history, arguments);
            }
        })(window.history);
        window.onpopstate = history.onpushstate = function(e)
        {
            console.log('History has been modified!')
            console.log(e)
        };
        $('#mod').click(function() {
 
            // Adds a gfg state to history and pushes
            // to test.html
            window.history.pushState({
                    gfg: 'Geeks'
                },
                "page 2",
                "test.html");
        });
    </ script >
 </ body >
 
</ html > 

Выход:

History has been modified!
{state: {gfg: "Geeks"}}

Пример 2: В этом примере мы изменим историю браузера, как только страница загрузится, и обнаружим ее. По мере загрузки страницы мы видим в консоли, что история была изменена и было добавлено новое состояние. Мы также видим, что URL-адрес браузера был изменен, и теперь он указывает на test.html вместо index.html.

 <!DOCTYPE html>
 < html >
 
< body >
    < center >
        < h1 id = "Geeks" style = "color: green;" >
          GeeksforGeeks
        </ h1 >
    </ center >
    < script src =
 " https://code.jquery.com/jquery-3.4.1.min.js " >
    </ script >
    < script type = "text/javascript" >
 
        // Monkey patching window.history
        (function(history) {
            var pushState = history.pushState;
            history.pushState = function(state) {
                if (typeof history.onpushstate == "function")
                {
                    history.onpushstate({
                        state: state
                    });
                }
                return pushState.apply(history, arguments);
            }
        })(window.history);
        window.onpopstate = history.onpushstate = function(e)
        {
            console.log('History has been modified!')
            console.log(e)
        };
        $(document).ready(function() {
 
            // Adds a gfg state to history and pushes
            // to test.html
            window.history.pushState({
                    gfg: 'Geeks'
                },
                "page 2",
                "test.html");
        });
    </ script >
 </ body >
 
</ html > 

Выход:

История изменена!
{состояние: {gfg: "Компьютерщики"}}

Примечание. По соображениям безопасности window.history.pushState может не работать в изолированном документе без сервера.

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

Как получить уведомление об изменении истории с помощью метода history.pushState ()?

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