当前位置:首页 > JavaScript

js 实现后退

2026-01-31 14:44:23JavaScript

使用 window.history.back()

window.history.back() 方法用于返回到浏览器历史记录中的上一页,相当于用户点击浏览器的后退按钮。这是最直接的方式。

window.history.back();

使用 window.history.go()

window.history.go() 方法允许通过传递一个整数参数来导航历史记录。传递 -1 表示后退一页。

js 实现后退

window.history.go(-1);

监听按钮点击事件

在 HTML 中绑定按钮点击事件,触发后退操作。

<button id="backButton">返回</button>
<script>
  document.getElementById('backButton').addEventListener('click', function() {
    window.history.back();
  });
</script>

检查历史记录长度

在调用后退方法前,可以检查历史记录长度,确保有可返回的页面。

js 实现后退

if (window.history.length > 1) {
  window.history.back();
} else {
  console.log('没有可返回的页面');
}

结合路由库(如 React Router)

在使用前端路由库时,后退操作可能需要调用路由提供的方法。例如,在 React Router v6 中:

import { useNavigate } from 'react-router-dom';

function BackButton() {
  const navigate = useNavigate();
  return <button onClick={() => navigate(-1)}>返回</button>;
}

使用 document.referrer

如果需要返回上一页的 URL,可以通过 document.referrer 获取上一页地址,然后手动跳转。

if (document.referrer) {
  window.location.href = document.referrer;
} else {
  console.log('没有可返回的页面');
}

标签: js
分享给朋友:

相关文章

js实现轮播

js实现轮播

实现轮播图的基本思路 轮播图的核心逻辑是通过定时切换展示的图片或内容,通常结合左右滑动按钮和指示器(小圆点)增强交互性。以下是基于原生JavaScript的实现方法。 HTML结构 构建轮播图的HT…

js实现打印

js实现打印

使用window.print()方法实现打印 在JavaScript中,可以通过调用window.print()方法直接触发浏览器的打印功能。这会打开系统的打印对话框,用户可以选择打印机和设置打印选项…

js实现选项卡

js实现选项卡

实现选项卡的基本思路 选项卡通常由一组标签和对应的内容面板组成。点击标签时,显示对应的内容面板,隐藏其他面板。实现这一效果需要结合HTML结构、CSS样式和JavaScript交互逻辑。 HTML结…

js实现图片预览

js实现图片预览

使用FileReader API实现图片预览 通过FileReader对象读取用户选择的图片文件并显示预览: const input = document.getElementById('imag…

js 实现vue

js 实现vue

Vue.js 的基本实现 在 JavaScript 中实现 Vue.js 的核心功能,可以通过数据绑定、响应式系统和虚拟 DOM 来实现。以下是实现 Vue.js 核心功能的简化版本。 数据响应式…

js实现tab选项卡切换

js实现tab选项卡切换

实现Tab选项卡切换的JavaScript方法 使用纯JavaScript实现Tab切换功能,可以通过监听点击事件动态切换内容显示状态。以下是两种常见实现方式: 基础DOM操作实现 // 获取…