html 如何检测history.pushState和history.replaceState何时被使用?[duplicate]

kb5ga3dv  于 2022-12-16  发布在  其他
关注(0)|答案(2)|浏览(115)

此问题在此处已有答案

How to get notified about changes of the history via history.pushState?(16个答案)
七年前就关门了。
当修改历史记录状态时,是否有可以订阅的事件?如何订阅?

3zwjbxry

3zwjbxry1#

我曾经使用此命令来通知何时调用pushStatereplaceState

// Add this:
var _wr = function(type) {
    var orig = history[type];
    return function() {
        var rv = orig.apply(this, arguments);
        var e = new Event(type);
        e.arguments = arguments;
        window.dispatchEvent(e);
        return rv;
    };
};
history.pushState = _wr('pushState'), history.replaceState = _wr('replaceState');

// Use it like this:
window.addEventListener('replaceState', function(e) {
    console.warn('THEY DID IT AGAIN!');
});

不过这通常有点过头了,而且可能不是在所有浏览器上都能用(我只关心我的浏览器版本)。

**NB.**它在Google Chrome扩展内容脚本中也不起作用,因为它不允许改变网站的JS环境。你可以通过插入一个带有上述代码的<script>来解决这个问题,但这更是大材小用。

njthzxwz

njthzxwz2#

警告:此答案是错误的,即使它已标记为已接受

onpopstate事件应该在历史记录更改时触发,您可以在代码中绑定到它,如下所示:

window.onpopstate = function (event) {
  // do stuff here
}

此事件也可能在页面加载时激发,您可以确定此事件是否是从页面加载激发的,也可以使用pushState/replaceState通过检查状态属性的事件对象来确定,如果此事件是由页面加载引起的,则将不定义此事件

window.onpopstate = function (event) {
  if (event.state) {
    // history changed because of pushState/replaceState
  } else {
    // history changed because of a page load
  }
}

不幸的是,目前还没有onpushstate事件,要解决这个问题,您需要 Package pushState和replaceState方法来实现您自己的onpushstate事件。
我有一个库,可以使使用pushState变得更容易,它可能值得一试,名为Davis.js,它提供了一个简单的API,用于基于pushState进行路由。

相关问题