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