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

Abid Ullah 2023年1月30日 2022年5月31日
  1. HTML 中的返回按钮
  2. 使用 JavaScript 在 HTML 中创建后退按钮
  3. 使用 history.back() 方法在 JavaScript 中创建后退按钮
  4. 使用 history.go() 方法在 JavaScript 中创建后退按钮
使用 JavaScript 在网页中创建返回按钮

在这篇 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.back() 方法创建返回按钮

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

使用 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.go() 方法创建返回按钮

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

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

Author: Abid Ullah
Abid Ullah avatar Abid Ullah avatar

My name is Abid Ullah, and I am a software engineer. I love writing articles on programming, and my favorite topics are Python, PHP, JavaScript, and Linux. I tend to provide solutions to people in programming problems through my articles. I believe that I can bring a lot to you with my skills, experience, and qualification in technical writing.

LinkedIn

相关文章 - JavaScript Button