如何通过 history.pushState() 方法获取历史更改通知？

任务是在调用history.pushState() 方法时检测浏览器历史记录中的更改。为了在调用history.pushState() 方法时检测浏览器历史记录的变化，我们必须对一个名为window.history的对象进行猴子补丁(改变现有函数的行为类似于覆盖)。然后，我们将在函数history.pushState 中插入一些我们自己的逻辑，以便在浏览器的历史记录发生变化时执行。

句法：

window.onpopstate = history.onpushstate = function(e) 
    {
      // Code to trigger when the history changes
    };

下面的例子说明了上述方法：

示例 1：这里我们从按钮单击调用 history.pushState 并检测它。单击我们在控制台中看到的修改按钮，历史记录已被修改，新状态已添加。我们还看到浏览器 URL 已更改，它现在指向 test.html 而不是 index.html

  

    
        
         GeeksforGeeks
        
  
        
        Modify History
    
    
    
    
  
        // 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");
        });
    

  

输出：

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

示例 2：在此示例中，我们将在页面加载并检测到它后立即更改浏览器的历史记录。随着页面加载，我们在控制台中看到历史记录已被修改并添加了新状态。我们还看到浏览器 URL 已更改，它现在指向 test.html 而不是 index.html

  

    
        
          GeeksforGeeks
        
    
    
    
    
  
        // 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");
        });
    

  

输出：

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

注意：出于安全原因，window.history.pushState 可能无法在没有服务器的沙盒文档中工作。