js 返回按钮怎么写

一、使用window.history.back()

window.history.back()是最常见的实现返回按钮的方法之一。这个方法通过使用浏览器的历史记录来实现返回上一页的功能。详细方法如下：

<button onclick="window.history.back()">返回</button>

当用户点击这个按钮时，JavaScript将调用window.history.back()方法，使浏览器返回到上一页。

<a href="javascript:history.back()">返回</a>

这种方式与window.history.back()的原理类似，但它使用的是HTML标签。

三、自定义返回按钮

在某些情况下，你可能希望设计一个更具个性化的返回按钮。这时可以结合CSS和JavaScript来实现。

1、HTML部分

<button id="customBackButton">返回</button>

2、CSS部分

#customBackButton {

    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
#customBackButton:hover {
    background-color: #45a049;
}

3、JavaScript部分

document.getElementById('customBackButton').onclick = function() {

    window.history.back();
};

通过这种方式，你可以设计一个看起来更加美观的返回按钮，同时具备相同的功能。

四、结合JavaScript框架

在使用现代JavaScript框架如React、Vue或Angular时，实现返回按钮的方法可能会略有不同。以下是React的一个简单示例：

1、React组件

import React from 'react';

import { useHistory } from 'react-router-dom';
const BackButton = () => {
    let history = useHistory();
    return (
        <button onClick={() => history.goBack()}>返回</button>
    );
};
export default BackButton;

五、在多页应用中的应用

对于多页应用（MPA），返回按钮的实现可以结合服务器端渲染和前端路由来实现更复杂的导航逻辑。

1、服务器端的实现

假设你在一个Express.js服务器上运行你的多页应用：

app.get('/previous-page', (req, res) => {

    res.redirect('back');
});

2、前端的实现

<a href="/previous-page">返回</a>

这种方式结合了服务器端的逻辑，可以更灵活地处理返回按钮的功能。

六、在移动端的应用

在移动端应用中，返回按钮的实现通常依赖于原生功能或混合开发框架提供的API。例如，在React Native中，可以使用以下代码实现返回按钮：

import React from 'react';

import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';
const BackButton = () => {
    const navigation = useNavigation();
    return (
        <Button title="返回" onPress={() => navigation.goBack()} />
    );
};
export default BackButton;