h5原生state如何传递？popstate/pushstate/replacestate

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

本文描述浏览器原生的popstate()、pushstate()、replacestate()中的state。它和以前文章里面描述的和react相关的各种state是不一样的，即使是react router中的使用各种Link传递的state，和本文中描述的原生state也不一样。那么，原生的state是怎样创建和传递的呢？

苏南大叔的“程序如此灵动”博客，记录苏南大叔的代码经验感想文章。本文测试环境：win10，chrome@131.0.6778.86。

创建state

在h5原生方案中，这些state的传播，都是靠window.history对象进行传播的，链接a是无法创建传播state的。这是基本前提，所以，popstate()、pushstate()、replacestate()中的state，使用范例如下：

window.history.pushState( {su:"nan"},"title","/sunan.html" );

window.history.replaceState( {su:"南"},"title2","/sunan2.html" );

参考文章：

• https://newsn.net/say/history-pushstate.html

操作历史记录

没有history.popstate()函数！都是通过浏览器的历史前进和历史后退动作，触发popstate事件的！

window.history.go(-1);

window.history.back();  // 后退

window.history.forward();  // 前进

参考文章：

• https://newsn.net/say/history-popstate.html

查看state

使用window.history.state来查看，注意，这里尽量使用全路径window.history进行查看，因为react router@v5里面也有个history，两者可能会弄混淆。

推荐使用这个查看state:

window.history.state

或者在在下面的事件监听里面，也可以通过event对象获得state。但是由于popstate是原生的事件，可以直接获得event.state，具有更大的自由度。pushstate和replacestate是两个自定义事件，state数据是放在event.detail.里面的。

("state" in event)?event.state:event.detail?.state

慎用isNaN()判断，貌似浏览器环境下的isNaN()经常不按常理出牌...待议...

监听事件

浏览器默认情况下，是可以监听popState事件的，但是不能监听pushState和replaceState事件，为了对这两个事件进行监听，可以给系统打个补丁。参考代码：

(function (history) {
  var pushState = history.pushState;
  history.pushState = function (state, title, url) {
    var result = pushState.apply(history, arguments);
    var event = new CustomEvent("pushstate", {
      detail: { state: state, title: title, url: url },
    });
    window.dispatchEvent(event);
    return result;
  };
})(window.history);
(function (history) {
  var replaceState = history.replaceState;
  history.replaceState = function (state, title, url) {
    var result = replaceState.apply(history, arguments);
    var event = new CustomEvent("replacestate", {
      detail: { state: state, title: title, url: url },
    });
    window.dispatchEvent(event);
    return result;
  };
})(window.history);

打完补丁后，就可以更方便的查看当前的state了。

const navHandle = (event) => {
    console.log( window.location.pathname )
    console.log( ("state" in event)?event.state:event.detail?.state );
    console.log( window.history.state);
};
window.addEventListener("pushstate", navHandle);
window.addEventListener("popstate", navHandle);
window.addEventListener("replacestate", navHandle);

参考文章：

• https://newsn.net/say/history-event-listen.html

结语

更多h5事件文章，请参考苏南大叔的系列文章：

• https://newsn.net/tag/h5/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。