浏览器 Web History API 的应用

avatar
ZFE @ZFE

浏览器 Web History API 的应用

Web API 的介绍

API 是指应用程序接口（Application Programming Interface），它是一些预先定义的函数接口，允许程序员访问应用程序、操作系统或其他服务的特定功能或数据。Web API 是用于 Web 开发的应用程序接口，它可以用于 Web 浏览器或 Web 服务器。我们可以使用 Java 或 Node 等不同的技术来构建我们自己的 Web API。还有一种 API 叫做第三方 API，它不是内置在浏览器中的。你必须从网上下载代码才能使用它，比如 Youtube API 或 Twitter API。在本文中，主要是介绍关于 Web API 中的 History API 的使用。

History API 的介绍

所有浏览器都支持 History API。在 window.history 对象及其原型上有一些可用的方法，接下来将展示这些方法。它还包含用户访问的所有网站记录。打开浏览器控制台来查看这个对象。请看下面的示例：

显而易见，window.history 对象及其原型上有一些可用的方法，接下来将依次介绍。

History.back() 方法

History.back() 方法可以加载历史记录列表中以前访问过的 URL 。这与在浏览器中单击“后退箭头”相同。再来看下面的例子：

<button onclick="myFunction()">Go Back</button>

<script>
function myFunction() {
  window.history.back();
}
</script>

当用户点击按钮时，它将跳转到浏览器历史记录列表中的上一个链接（URL）。

History.go() 方法

History.go() 方法允许用户在浏览器历史记录列表中加载特定的 URL。再来看下面的例子：

<button onclick="myFunction()">Go Back 2 Pages</button>

<script>
function myFunction() {
  window.history.go(-2);
}
</script>

当用户点击按钮时，将返回到上面示例中指定的第 2 页。

History.forward() 方法

History.forward() 方法加载历史记录列表中的下一个 URL。下面是如何使用它的示例：

<button onclick="myFunction()">Go Back</button>

<script>
function myFunction() {
  window.history.forward();
}
</script>

当用户点击按钮时，将加载浏览器历史记录列表中的下一个 URL。

结论

总而言之，当用户使用网站从一个页面到另一个页面时，History Web API 是非常有用和重要的，所以很有必要掌握它的使用。

如果发现译文存在错误或其他需要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。

avatar
文章
阅读
粉丝