Javascript history.pushState() 方法

每当历史记录发生变化时，挑战在于如何发现它。调用了 pushState() 方法。它用于监控浏览器历史记录的更改。当使用 pushState() 方法时，会“猴子补丁” window.history。

然后，history 函数将包含我们添加的所有逻辑，这些逻辑将在浏览器历史记录每次修改时运行。

换句话说，我们可以使用 history.pushState() 方法将一条记录添加到 Web 浏览器的会话历史堆栈中。

语法

pushState() 方法的语法如下：

pushState() 方法接受三个参数：

1) state

一个可序列化的对象就是 state。每当您导航到不同的状态时，都会触发一个 popstate 事件。此外，popstate 事件有一个 state 属性，该属性指向历史条目的状态对象。

2) title

如今，大多数浏览器都会忽略此 title 属性。如果我们想更新文档的标题，请改用 document.title 属性。在实际应用中，title 参数通常传递一个空字符串。

3) url

我们可以使用可选的 url 指定新历史条目的 URL。如果 URL 的源与当前 URL 的源不同，该方法将抛出异常。

当我们设置 URL 时，Web 浏览器不会加载新地址。如果用户未提供 url，则默认使用当前 URL。

示例

以下示例通过 history.pushstate() 方法描述了不同的信息。

示例 1:

下面的示例显示了 history.pushstate() 方法的基本功能。在这里，我们可以使用 windows location url 来获取当前链接。使用当前 url 来获取方法的 [数据](https://tutorialspoint.org.cn/javascript/javascript_history_pushstate_method.htm#)。

输出

该图像显示了 history url 的输出数据。

示例 2

下面的示例显示了 history.pushstate() 方法的功能。我们可以使用 null 状态、当前 url 和空参数。

输出

该图像显示了 history url 的输出数据。

示例 3

下面的示例显示了 history.pushstate() 方法的功能。我们可以获取所需 id 的 url 路径。如果网页有可用的 id，则将其用作 url 的一部分或选项卡。

输出

该图像显示了 history url 的输出数据。

PushState() 历史记录在 JavaScript 中的演示

我们将创建一个简单的应用程序，该应用程序显示 React、Vue 和 Angular 选项卡。

当您单击选项卡时，将显示指定项的内容。URL 也会使用 history.pushState() 函数进行更新，其步骤如下：

• 如果您复制包含哈希标记的 URL 并在 Web 浏览器中加载它，该应用程序将加载关联的内容。

• 首先，使用 querySelector() 函数选择选项卡和内容元素。

• 其次，创建一个 map 对象，将每个选项卡的 id 与其对应的 URL 哈希关联起来。

• 第三，创建一个名为 data 的新 map，用于将对象的 tab id 与其关联。Url 和 content 是对象中的两个属性。

• 第四，每次单击选项卡（或 li 元素）时，都会发生 click 事件。我们将利用事件委托来提高效率。
  • 因此，我们将处理每个选项卡的父项上的单击事件，而不是单独处理每个选项卡。
  • if 子句确保当 click 事件发生在每个单独的选项卡上时，event handler 会修改文本和 url。当我们单击选项卡的 [内容](https://tutorialspoint.org.cn/javascript/javascript_history_pushstate_method.htm#)区域时，什么都不会发生。
• 第五，update() 函数在移除活动选项卡的 active 类后，将 CSS 类分配给选定的用户选项卡。我们在事件处理程序中运行 update() 方法，并将 tab id 传递给它。

• 此外，根据 tab id，它从 data 中检索 url 和内容。它使用 history.pushState() 函数修改 URL。

示例

以下示例在单个容器中显示了具有不同 URL 选项卡的 history.pushState() 方法。在这里，我们创建了三个带有其信息的选项卡。如果我们单击选项卡，URL 将显示选项卡数据。

输出

该图像显示了带有多个 url 历史记录链接的选项卡。

结论

使用 history.pushState() 方法将记录添加到 Web 浏览器的会话历史堆栈中。