使用 JavaScript 在网页中创建返回按钮

在这篇 JavaScript 文章中，我们将学习如何使用 JavaScript 创建后退按钮以及 HTML 中后退按钮的需求和使用。我们将看到如何使用 JavaScript 的内置方法获取上一页。

我们使用的浏览器已经有返回按钮，因此你必须有更好的理由需要在页面上放置返回按钮。我们可以使用 HTML 或 JavaScript 代码在网页上添加一个后退按钮。

该网页将有一个按钮或一个链接，通过单击它，浏览器将返回上一页。这可以在客户端使用 HTML 代码和一点 JavaScript 来完成。

创建 HTML 后退按钮 的代码可以放在页面内的任何位置。我们创建的后退按钮将像浏览器工具栏中的后退按钮一样工作。

请记住，如果用户没有浏览历史记录，此后退按钮将不起作用。如果用户打开网页并单击后退按钮，则不会发生任何事情。

我们在 Web 浏览器中有一个名为 history 的内置 JavaScript 对象，它包含用户在当前浏览器窗口中访问过的所有 URL。我们可以使用这个 history.back() 方法告诉网络浏览器返回到用户的上一页。使用这个内置的 JavaScript 对象是将它添加到按钮的 onclick 事件属性中。我们使用 元素创建按钮，该元素包含按钮类型的 元素，如下面的代码所示。

代码 - HTML：

输出：

如果用户单击该按钮，用户将返回浏览器中的上一页。

如果我们想返回浏览器中的特定页面，我们使用 history.go() 方法。这个内置的 JavaScript 方法告诉浏览器转到浏览历史记录中的特定页面。

我们可以通过在括号内放一个数字来给出任何特定的历史记录，我们在编程中称之为参数。例如，通过在括号中给出数字 -1 作为参数，浏览器将返回浏览器历史记录中的一页。

在下面的代码中，我们使用了 history.go(-1) 方法而不是 history.back() 方法。我们甚至可以要求浏览器后退或前进超过 1 步，方法是在括号中给出数字 -2 作为参数，例如 history.go(-2)。

代码 - HTML：

输出：

从上图中的结果来看，我们有两个按钮。当用户单击第一个按钮时，浏览器会返回浏览器历史记录中的一页，如果用户单击第二个按钮，浏览器将返回浏览器用户历史记录中的两页。

history.back() 和 history.go() 方法的主要区别在于 back() 只返回一页，但 go() 前后返回我们的页数作为相对于我们当前网页的括号中的参数传递。