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

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

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

作者：迹忆客最近更新：2024/03/18 浏览次数：

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

HTML 中的返回按钮

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

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

使用 JavaScript 在 HTML 中创建后退按钮

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

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

使用 `history.back()` 方法在 JavaScript 中创建后退按钮

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

代码 - HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>Back Button</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
      <h3 class="title">Creating Back Button </h3>
     <form>
 <input type="button" value="Go back!" onclick="history.back()">
     </form>
  </body>
</html>

输出：

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

使用 `history.go()` 方法在 JavaScript 中创建后退按钮

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

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

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

代码 - HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>Back Button</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
      <h3 class="title">Creating Back Button </h3>
     <form>
     <INPUT TYPE="button" VALUE="Go one step back" onClick="history.go(-1);">
     </form>
         <br>
     <form>
     <INPUT TYPE="button" VALUE="Go two steps back" onClick="history.go(-2);">
     </form>
  </body>
</html>

输出：

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

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

上一篇：JavaScript 禁用按钮单击

下一篇：JavaScript 更改按钮文本

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享