在 Web 应用程序中，我们经常需要管理历史记录，并且希望能够在前端实现路由。对于这些需求，HTML5 提供了 pushState() API 来处理浏览器历史记录，但是并不是所有浏览器都支持该特性。因此，我们需要使用仿真技术或者 polyfill 来解决兼容性问题。
什么是 pushState()？
在 HTML5 标准发布之前，Web 应用程序通过 URL 的 hash 部分来实现前端路由。例如，http://example.com/#/page1 可以指向一个名为 page1 的前端页面。但是，这种方法有一些缺点：
- 历史记录只能记录 hash 部分的变化，不能记录整个 URL 的变化。
- hash 部分的变化不会触发页面重新加载，而是会触发一个
hashchange事件，这可能会导致一些问题。
HTML5 引入了 pushState() API 来解决这些问题。通过该 API，我们可以向浏览器历史记录中添加新的记录，并且可以修改当前页面的 URL，从而实现前端路由和浏览器历史记录的管理。
pushState() API 的基本用法如下：
------------------------------- ------ -----
其中，
state：一个 JavaScript 对象，保存当前页面的状态。title：新页面的标题，现在大多数浏览器都忽略了这个参数。url：新页面的 URL。
仿真 pushState()
有一些旧版的浏览器（如 IE9、IE8 等）不支持 pushState() API，而且即使是支持该 API 的浏览器也存在不同的实现方式。为了解决这些兼容性问题，我们可以使用仿真 pushState() 技术。
仿真 pushState() 技术的基本思路如下：
- 监听链接点击事件，阻止默认事件。
- 使用 pushState() API 修改 URL。
- 手动更新页面内容和状态，以保持与 URL 的对应关系。
以下是一个简单的仿真 pushState() 实现示例代码：
-------- ---------------------- -
----------------------- ----- -----
-----------------------
-
-------- ---------------------- -
-- -- --- ---------
-Polyfill pushState()
另一种解决兼容性问题的方法是使用 polyfill。Polyfill 是指通过 JavaScript 代码来模拟某些浏览器原生提供的特性，以达到在旧浏览器上能够使用新特性的目的。
有一些开源的 polyfill 实现了 pushState() API，例如 History.js。使用 History.js 可以在不支持 pushState() API 的浏览器上实现仿真 pushState()，并且在支持 pushState() API 的浏览器上也可以正常运行。
以下是一个使用 History.js 实现的 polyfill pushState() 的示例代码：
-- --------------------------- -
-------------------- - ----
---------------------------- -------------- ---------- -
--- ----- - -------------------
-----------------------------
---
-
-------- ---------------------- -
----------------------- ----- -----
-----------------------
-
-------- ---------------------- -
-- -- --- ---------
-总结
在本文中，我们介绍了 pushState() API，它可以使前端路由和浏览器历史记录的管理更加方便。为了解决 pushState() 不兼容的问题，我们可以使用仿真技术或者
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/24702