如何在复杂的HTML5和JavaScript应用程序中修改浏览器历史记录

你不喜欢活泼的标题吗？ 考虑一个复杂的应用程序，例如WebMail客户端。从本质上讲，这是一个在单个HTML页面上运行的复杂JavaScript程序。用户加载URL，并提供电子邮件列表。他们单击标题，并使用Ajax检索电子邮件内容并显示。他们现在想返回电子邮件列表；他们做什么？… …单击浏览器的后面按钮。 砰。该应用程序关闭并返回到访问应用程序之前查看的页面。或者，如果它是一个新的浏览器选项卡，则禁用了后按钮，无法单击。 所以我们有问题。我们的WebMail客户端不支持大多数用户了解的一个浏览器控制。有解决方案。有些涉及更改URL中的哈希标记（#name），以便保留状态。它不是完美的，但是在所有浏览器中都可以使用。 幸运的是，问题已通过HTML5 History.pushstate解决了 和history.replacestate方法与窗口。 尝试history.pushstate（）演示页面… 该技术简单令人耳目一新：

1. 当状态发生变化时，例如用户打开电子邮件，history.pushstate（）已传递状态信息并执行。这启用了返回按钮，但是 - 重要的是 - 不会将用户从页面上移动。
>
2. >您可以根据需要运行历史多次，或使用history.replacestate（）。
>用户单击（或向前）时，窗口。处理程序功能可以检索关联的状态并显示适当的屏幕。
3. 缺点？忘记兼容性，直到V10到达。如果您需要支持IE9及以下，则有许多垫片，包括histry.js和html5历史上的api 。 让我们写一些代码。假设您刚刚显示了AJAX请求的结果：
在哪里：

// Ajax request
...
// display result
...

// modify history
history.pushState(obj, title, url);

obj是任何JavaScript对象。您可以使用它来保留状态信息，例如{“ view”：“ emailcontent”，“ item”：123};

标题是一个可选标题

URL是可选的URL。 URL可以是任何东西 - 浏览器不会跳到该页面，但是如果用户重新加载页面或重新启动其浏览器，则>可以>。在大多数情况下，您需要使用参数或哈希名称，例如？view = emailContent＆item = 123;您的应用程序可以在启动时分析这些价值，然后返回同一地点。

> history.replacestate（）具有相同的参数，仅当您想用新状态替换当前状态时才使用。 现在，您需要一个处理程序功能，该功能在窗口popState事件启动后，浏览器的背面或下一个按钮要单击时运行：

// Ajax request
...
// display result
...

// modify history
history.pushState(obj, title, url);

可以使用document.location（document.location.search and document.location.location.hash）确定URL位置 分别返回参数和哈希名称）。 由PUSHSTATE（）或替换为（）设置的历史态对象是从事件对象的状态属性中获得的。您可以使用信息显示适当的屏幕。 尝试history.pushstate（）演示页面… 单击“历史记录”按钮几次，然后返回以查看日志中会发生什么。 非常有用。您是否在Web应用程序中遇到了后退和下一个按钮问题？

经常询问有关JavaScript历史PUSHSTATE

的问题（常见问题解答）

> JavaScript历史记录PushState的主要功能是什么？它是历史API的一部分，它使您可以添加历史记录条目。当您要创建一个可以更改URL而不重新加载页面的单页应用程序时，这特别有用。即使用户在浏览器的前后和后部按钮中导航时，它也有助于维护用户体验和应用程序的状态。

JavaScript历史记录如何工作？

JavaScript历史记录PUSHSTATE PUSHSTATE PUSHSTATE Works Works Works Works Works Works Works Works Works Works Works Works Works通过使用三个参数：状态对象，标题（当前大多数浏览器忽略）和一个URL。调用PushState方法时，它将在浏览器的历史记录堆栈中创建一个新的历史记录。此新条目与指定的状态对象和URL关联。当用户导航到此新条目时，POPSTATE事件将触发，并且状态对象将传递回应用程序。

>

我可以在所有浏览器中使用JavaScript历史记录pushstate吗？所有现代浏览器都得到了历史PUSHSTATE的支持。但是，Internet Explorer 9和更早版本中不支持它。因此，如果您正在开发较旧浏览器的应用程序，则可能需要使用基于哈希的URL的多填充或后备。>

> javaScript中的PushState和替换方法之间有什么区别？它们之间的主要区别在于，PushState创建了一个新的历史记录条目并将其添加到历史记录堆栈中，而替换为当前的历史记录条目而无需在堆栈中添加一个新的历史记录。

>我如何处理POPSTATE事件在JavaScript？

中，每当活动历史记录条目更改时，POPSTATE事件就会触发。如果历史记录条目是由Pushstate创建的，则将与该条目关联的状态对象传递回该应用程序。您可以通过将事件侦听器添加到窗口对象中并定义当事件启动时将执行的函数来处理POPSTATE事件。

>

> javascript历史记录pushstate中的状态对象是什么？ >状态对象是与历史记录条目关联的JavaScript对象。该对象可以包含您要与历史记录条目相关联的任何类型的数据。当用户导航到历史记录条目时，状态对象会传递回该应用程序，允许您恢复应用程序的状态。

>

我可以更改URL而不使用JavaScript历史记录pushstate重新加载页面？

> JavaScript历史记录PushState在单页应用程序中的作用是什么？ >

在单页应用程序中，JavaScript历史记录PushState在维持用户体验中起着至关重要的作用。它允许您更改URL以反映应用程序的当前状态而无需重新加载页面。这意味着用户可以使用浏览器的前后按钮在不丢失应用程序状态的情况下浏览应用程序。

>

>我如何使用JavaScript历史记录pushState创建导航系统？使用JavaScript历史记录PushState通过为每个导航操作添加历史记录条目来创建导航系统。当用户导航到历史记录条目时，您可以使用与该条目关联的状态对象来还原应用程序的状态。这使您可以在不重新加载页面的情况下创建无缝的导航体验。

>使用JavaScript历史记录PushState有什么局限性？它有一些局限性。例如，Internet Explorer 9和更早版本中不支持它。另外，它只能为相同的来源添加历史记录条目，这意味着您不能使用它来为不同域中添加历史记录条目。

以上是如何在复杂的HTML5和JavaScript应用程序中修改浏览器历史记录的详细内容。更多信息请关注PHP中文网其他相关文章！