历史推送状态不在独立的 location.hash 或 location.href 中，而是在 Location 对象本身中

Question

谁能解释一下这种行为？我使用 history.pushState(null, null, '#test'); 推送历史状态。然后，当尝试使用 console.log(window.location.hash) 在侦听器函数中获取状态 URL（没有找到更好的方法来侦听 pushState 更改）时，它 returns 空字符串，#test 哈希。 console.log(window.location.href) returns 整个 URL 也没有散列 #test 但是 console.log(window.location) returns Location 散列在两者中的对象 href 和 hash 属性。为什么会这样，我怎样才能得到推送状态的 URL？

        (function(history){
            var pushState = history.pushState;
            history.pushState = function(state) {
                if (typeof history.onpushstate == "function") {
                    history.onpushstate({state: state});
                }
                console.log(window.location.hash);
                console.log(window.location.href);
                console.log(window.location);
                return pushState.apply(history, arguments);
            }
        })(window.history);

        history.pushState(null, null, '#test');

Answer 1

这是因为您在实际设置新状态之前记录变量。您之所以可以在对象中看到更新的属性，是因为它记录了对对象的引用，而不是记录时对象的副本。你的猴子补丁直到这一行才调用原来的 pushState 函数。

return pushState.apply(history, arguments);

要解决此问题，您可以在记录之前简单地调用该函数，然后 return 然后响应。

(function(history){
    var pushState = history.pushState;
    history.pushState = function(state) {
        if (typeof history.onpushstate == "function") {
            history.onpushstate({state: state});
        }
        var r = pushState.apply(history, arguments);
        console.log(window.location.hash);
        console.log(window.location.href);
        console.log(window.location);
        return r;
    }
})(window.history);

history.pushState(null, null, '#test');

历史推送状态不在独立的 location.hash 或 location.href 中，而是在 Location 对象本身中

History pushed state is not in standalone location.hash or location.href but is in Location object itself

javascript

html

pushstate

html5-history