使用 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