前台js的定时跳转效果在Nodejs环境下不能被触发？

前台js的定时跳转效果在Nodejs环境下不能被触发？

我想专门实现一个输出错误的页面，这个页面在输出错误后5秒后跳转至’/’。但是经由正常的出错路径访问这个页面时，跳转始终不能被触发。。。而手动访问127.0.0.1/err时，跳转就正常出现了。。。求解。。。 代码如下： 前台页面的跳转代码：

<script>
setTimeout(function(){
        window.location.href="/";
},5000);
</script>

后台的相关代码：

function cheakNotLogin(req,res,next){
        if(req.session.user){
                req.session.err = '您已经登录啦';
                return res.redirect('/err');
        }
        next();
}

router.get('/err',function(req,res){

    res.render('err',{title:'出错啦',err_info:req.session.err});

});


6 回复

要解决前台JS的定时跳转效果在Node.js环境下无法正常触发的问题，我们需要确保前后端的逻辑能够正确地配合工作。从你提供的信息来看，问题可能出现在页面渲染或请求处理的过程中。

问题分析

  1. 页面渲染：/err 路径下的页面需要正确渲染，并且包含定时跳转的前端代码。
  2. Session管理：确保 req.session 正确设置了错误信息，并且在页面中可以正确获取到。

解决方案

前端代码

前端代码看起来没有问题，但确保它在页面中正确加载：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>出错啦</title>
</head>
<body>
    <h1>出错啦</h1>
    <p id="error-info">您已经登录啦</p>
    <script>
        setTimeout(function(){
            window.location.href = "/";
        }, 5000);
    </script>
</body>
</html>

后端代码

确保后端正确处理错误信息并传递给前端：

const express = require('express');
const session = require('express-session');

const app = express();

// 使用session中间件
app.use(session({
    secret: 'your_secret_key',
    resave: false,
    saveUninitialized: true
}));

// 检查用户是否已登录
function checkNotLogin(req, res, next) {
    if (req.session.user) {
        req.session.err = '您已经登录啦';
        return res.redirect('/err');
    }
    next();
}

// 错误处理路由
app.get('/err', (req, res) => {
    // 确保错误信息已设置
    const errInfo = req.session.err || '未知错误';
    res.render('err', { title: '出错啦', err_info: errInfo });
});

// 渲染错误页面
app.set('views', './views'); // 设置视图目录
app.set('view engine', 'ejs'); // 设置模板引擎

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

关键点

  1. Session管理：确保 req.session 正确设置了错误信息，并且在 /err 路径下可以正确获取到。
  2. 模板引擎：使用模板引擎（如 EJS）来渲染页面，确保错误信息能够正确传递到前端。
  3. 静态文件服务：确保前端资源（如HTML、CSS、JS）能够正确访问。

通过以上步骤，你应该能够解决前台JS定时跳转效果在Node.js环境下无法正常触发的问题。


没有知道的大神吗？

res.writeHead(304, { ‘Refresh’ : ‘5;url=/’ }); res.end(); 只要设置http信息头就可以了， 不需要前端.

玩框架者，必被框架所误

nodejs的作者让开发者如此贴近c语言和操作系统的底层库， 可是有些开发者为什么又要弄些框架把自己跟这些宝贝隔离呢

网站开发本来就需要站在一个高的层面来看待和解决问题，框架是好东西。

前台JavaScript的定时跳转功能本身并不依赖于Node.js环境，而是依赖于浏览器环境。因此，如果你在Node.js环境下运行这段代码，它不会自动执行。你需要确保这段代码在浏览器中被执行。

根据你的描述，错误页面可以正常显示，但定时跳转没有生效。这可能是因为错误页面在某些情况下没有正确加载或者加载过快，导致定时器没有机会执行。为了解决这个问题，你可以尝试以下方法：

方法一：确保页面完全加载后再执行跳转逻辑

可以在<body>标签结束前添加跳转脚本，以确保页面完全加载后再执行跳转逻辑：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
</head>
<body>
    <h1>{{ err_info }}</h1>
    <script>
        setTimeout(function() {
            window.location.href = "/";
        }, 5000);
    </script>
</body>
</html>

方法二：使用DOMContentLoaded事件

你也可以使用DOMContentLoaded事件来确保文档完全加载后再执行跳转逻辑：

document.addEventListener("DOMContentLoaded", function() {
    setTimeout(function() {
        window.location.href = "/";
    }, 5000);
});

将这段脚本放在HTML文件的底部或使用上述方法直接嵌入到HTML文件中。

方法三：检查错误页面是否正确渲染

确保res.render('err', { title: '出错啦', err_info: req.session.err });中的模板文件err正确渲染，并且包含上述的跳转逻辑。

总结

定时跳转功能本身是前端的功能，不需要在Node.js环境中特别处理。确保跳转逻辑在页面完全加载后执行即可解决问题。通过以上方法，你可以确保跳转逻辑在所有情况下都能正常工作。

回到顶部