随着HTML5的普及，许多现代浏览器都支持pushState()方法，这使得在不刷新页面的情况下改变浏览器URL成为可能。然而，在IE9等一些较老的浏览器中，pushState()方法并不被支持。在本文中，我们将探讨如何在IE9中实现HTML5 pushState()。
如何使用pushState()
HTML5的pushState()方法可以用于更改浏览器的URL，并将新的URL添加到历史记录中，这样用户就可以像点击浏览器的“后退”按钮一样回到之前的页面。下面是一个简单的示例：
---------------------------- --- -------------
上面的代码将把浏览器的URL更改为“example.com/new-page”，同时将新的URL添加到浏览器的历史记录中。
在IE9中的问题
虽然现代浏览器支持HTML5的pushState()方法，但在IE9中使用它时会出现问题。具体来说，当使用pushState()方法更改URL时，IE9会刷新整个页面，而不是只更改URL。这意味着使用pushState()方法时，您无法创建单页应用程序（SPA），也无法使用Ajax加载内容。
解决方案
要在IE9中实现pushState()，我们可以使用一个名为History.js的库。这个库可以在旧版浏览器中模拟HTML5的pushState()方法，使我们能够创建SPA并使用Ajax加载内容。
首先，您需要下载并引入History.js库：
------- ---------------------------------------------------------------------------------------------------------------
接下来，您可以使用以下代码更改URL而不刷新页面：
----------------------- ----- -------------
使用History.js时，您还可以通过监听popstate事件来响应用户点击“后退”按钮：
----------------------------------- --------------- - -- -- --------- ---- ---- --- ---- ------ --- ------ ------ ---
示例代码
下面是一个使用History.js库在IE9中实现单页应用程序的示例代码：
--------- -----
------
------
--------- -----------
------- ---------------------------------------------------------------------------------------------------------------
-------
------
-----
----
------ ------------------ ----------
------ ------------------ ----------
------ ------------------ ----------
-----
------
---- -------------------
--------
--- ---------- - -----------------------------------
-------- ---------------- -
--- --- - --- -----------------
--------------- -----
---------- - ---------- -
-------------------- - -----------------
--
-----------
-
-------- ---------------------- -
-----------------------
--- --- - --------------------------
----------------------- ----- -----
-----------------
-
----------------------------------- --------------- -
--- --- - ------------------
-----------------
---
--- ----- - ------------------------------ ----
--- ---- - - -- - - ------------- ---- -
---------------------------------- -----------------
-
---------
-------
-------上面的代码演示了如何创建一个具有导航菜单和Ajax加载内容的单页应用程序，在IE9中使用History.js库模拟HTML5 pushState()方法。当用户点击菜单链接时，我们使用History.js的pushState()方法更改URL，并使用Ajax加载相应的内容。当用户点击浏览器的“后退”按钮时
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/31382