使用 JavaScript 在网页中创建返回按钮
- HTML 中的返回按钮
- 使用 JavaScript 在 HTML 中创建后退按钮
-
使用
history.back()方法在 JavaScript 中创建后退按钮 -
使用
history.go()方法在 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>
输出：
-method.webp)
如果用户单击该按钮，用户将返回浏览器中的上一页。
使用 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>
输出：
-method.webp)
从上图中的结果来看，我们有两个按钮。当用户单击第一个按钮时，浏览器会返回浏览器历史记录中的一页，如果用户单击第二个按钮，浏览器将返回浏览器用户历史记录中的两页。
history.back() 和 history.go() 方法的主要区别在于 back() 只返回一页，但 go() 前后返回我们的页数作为相对于我们当前网页的括号中的参数传递。
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