正文

学会JS轻松返回上一级页面：掌握三种实用方法及实战案例

/0 浏览量
0719

在网页开发中，返回上一级页面是一个常见的操作。JavaScript（JS）提供了多种方法来实现这一功能。本文将详细介绍三种实用的JS方法，并通过实战案例帮助读者更好地理解和应用。

方法一：使用window.history.back()方法

这是最简单直接的方法。window.history.back()方法可以直接返回上一页。下面是一个简单的例子：

// HTML部分
<button onclick="goBack()">返回上一页</button>

// JavaScript部分
function goBack() {
  window.history.back();
}

在这个例子中，当用户点击按钮时，会调用goBack函数，该函数执行window.history.back()，从而返回上一页。

方法二：使用window.history.go(-1)方法

window.history.go()方法可以用来向前或向后浏览历史记录。参数为正数时，会向前移动指定的页数；参数为负数时，会向后移动指定的页数。以下是使用window.history.go(-1)的例子：

// JavaScript部分
function goBack() {
  window.history.go(-1);
}

这个方法与第一种方法的效果相同，都是返回上一页。

方法三：使用window.location.href属性

通过修改window.location.href属性，可以将页面跳转到指定的URL。以下是使用window.location.href的例子：

// JavaScript部分
function goBack() {
  window.location.href = window.history.back();
}

在这个例子中，我们使用window.history.back()获取上一页的URL，然后将其赋值给window.location.href，实现返回上一页的效果。

实战案例：创建一个包含返回按钮的网页

以下是一个简单的实战案例，展示如何在前端页面中添加一个返回按钮，并使用上述三种方法之一来实现返回上一页的功能。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>返回上一页示例</title>
  <script>
    // 使用window.history.back()方法
    function goBack() {
      window.history.back();
    }

    // 使用window.history.go(-1)方法
    function goBack2() {
      window.history.go(-1);
    }

    // 使用window.location.href属性
    function goBack3() {
      window.location.href = window.history.back();
    }
  </script>
</head>
<body>
  <h1>返回上一页示例</h1>
  <button onclick="goBack()">返回上一页（方法一）</button>
  <button onclick="goBack2()">返回上一页（方法二）</button>
  <button onclick="goBack3()">返回上一页（方法三）</button>
</body>
</html>

在这个例子中，我们创建了三个按钮，分别对应三种方法。用户点击任意一个按钮，都会返回上一页。

通过本文的介绍，相信读者已经掌握了三种实用的JS方法来实现返回上一级页面的功能。在实际开发中，可以根据需求和场景选择合适的方法。

-- 展开阅读全文 --