什么是history.js?
history.js是一个JavaScript库，它提供了一种跨浏览器的方式来处理HTML5历史API的降级。这意味着您可以在不支持HTML5历史API的旧版浏览器中使用pushState和replaceState方法，以及监听popstate事件。
安装
通过NPM安装history.js：
npm install history
或者通过CDN引用：
<script src="https://cdn.jsdelivr.net/npm/historyjs/scripts/bundled/html4+html5/jquery.history.js"></script>
使用
初始化
要使用history.js，请首先初始化它：
var History = window.History;
if (!History.enabled) {
// 如果History不可用，则回退到普通的URL更改事件。
return false;
}页面导航
当用户单击链接并且您想要使用pushState方法将其添加到浏览器历史记录中时，请使用以下代码：
History.pushState({state:1}, "Title", "?state=1");当用户点击后退按钮时，您可以使用以下代码获取上一个状态：
History.Adapter.bind(window, 'statechange', function() {
var state = History.getState();
console.log(state);
});状态管理
您可以使用以下方法手动添加状态：
History.pushState({state:2}, "Title 2", "?state=2");您还可以使用以下方法替换当前状态：
History.replaceState({state:3}, "Title 3", "?state=3");示例代码
以下是一个简单的示例，演示如何使用history.js：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------- ---------------
-------
------
-----
----
------ -------- -----------------------
------ -------- -------------------------
------ -------- -----------------------------
-----
------
------- ----------------------------------------------------------------------------------------------------
--------
--- ------- - ---------------
-- ------------------ -
------ ------
-
-- -----
---------------------------- -------------- ---------- -
--- ----- - -------------------
-------------------
---
-- -----
---------------------------- -
-------------------
-------------------------------- ------- --------------
---
-- -----------
----------------------------- -
-------------------
--------------------------------- ------ ---- ---------------
---
-- -------
------------------------------- -
-------------------
----------------------------------- -------- ---- -----------------
---
---------
-------
-------总结
历史API允许Web开发人员更改浏览器的URL，而无需重新加载页面。如果您希望您的网站在旧版浏览器中也具有此功能，可以使用history.js。本教程介绍了如何安装、初始化和使用history.js，并提供了一个基本示例来演示这个库的用法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32515