什么是history.js?
history.js是一个JavaScript库，它提供了一种跨浏览器的方式来处理HTML5历史API的降级。这意味着您可以在不支持HTML5历史API的旧版浏览器中使用pushState和replaceState方法，以及监听popstate事件。
安装
通过NPM安装history.js：
--- ------- -------
或者通过CDN引用：
------- ----------------------------------------------------------------------------------------------------
使用
初始化
要使用history.js，请首先初始化它：
--- ------- - --------------- -- ------------------ - -- ---------------------------- ------ ------ -
页面导航
当用户单击链接并且您想要使用pushState方法将其添加到浏览器历史记录中时，请使用以下代码：
---------------------------- -------- ------------
当用户点击后退按钮时，您可以使用以下代码获取上一个状态：
---------------------------- -------------- ---------- - --- ----- - ------------------- ------------------- ---
状态管理
您可以使用以下方法手动添加状态：
---------------------------- ------ --- ------------
您还可以使用以下方法替换当前状态：
------------------------------- ------ --- ------------
示例代码
以下是一个简单的示例，演示如何使用history.js：
--------- -----
----- ----------
------
----- ----------------
----------------- ---------------
-------
------
-----
----
------ -------- -----------------------
------ -------- -------------------------
------ -------- -----------------------------
-----
------
------- ----------------------------------------------------------------------------------------------------
--------
--- ------- - ---------------
-- ------------------ -
------ ------
-
-- -----
---------------------------- -------------- ---------- -
--- ----- - -------------------
-------------------
---
-- -----
---------------------------- -
-------------------
-------------------------------- ------- --------------
---
-- -----------
----------------------------- -
-------------------
--------------------------------- ------ ---- ---------------
---
-- -------
------------------------------- -
-------------------
----------------------------------- -------- ---- -----------------
---
---------
-------
-------总结
历史API允许Web开发人员更改浏览器的URL，而无需重新加载页面。如果您希望您的网站在旧版浏览器中也具有此功能，可以使用history.js。本教程介绍了如何安装、初始化和使用history.js，并提供了一个基本示例来演示这个库的用法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/32515