Question

我想刷新网页，直到下载完成。下载完成后，我不想刷新页面。如何实现这一目标？任何人都可以帮助我...

我的代码：

<body onload="timedRefresh(10000);">

<script type="text/javaScript">
    function timedRefresh(timeoutPeriod) {
     setTimeout("window.location.reload(true);",timeoutPeriod);
    }
</script>

我的app.js：

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var fs = require('fs');
var request = require('request');
var progress = require('request-progress');
var targz = require('tar.gz');

var DOWNLOAD_DIR = '/usr/local/';
var file_name = 'googlenew.png' 


var routes = require('./routes/index');
var users = require('./routes/users');


var app = express ();
var http = require('http').createServer(app);
var io = require('socket.io')(http);


http.listen(8085, function(){
    console.log('listening on *:8085');
});

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);

app.get('/get', function (req, res) {
 res.sendfile('views/index.html');

});



var callback = function(state){
    console.log('received size in bytes', state.received);
    console.log('total size in bytes', state.total);
    console.log('percent', state.percent);
    io.of('/socket_issue').on('connection', function (socket) {
    console.log("Socket connected :"+socket.id);
 socket.emit('message', JSON.stringify({size: state.total, received: state.received, percent: state.percent, fileName: file_name}));
});

} 

progress(request('https://nodejs.org/dist/v0.12.7/node-v0.12.7.tar.gz'), {
    throttle:0,   
    delay: 0       
})
.on('progress', callback) 

.pipe(fs.createWriteStream(DOWNLOAD_DIR + file_name))
.on('error', function (err) {
 console.log("error");  
})
.on('close', function (err){
console.log("Download Complete"); 
})


// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});


module.exports = app;

我的index.html：

<html>
<head>

<style>
    #progressbar {
        width: 400px;
        height: 22px;
        border: 1px solid #111;
        background-color: #292929;
    }
    #progressbar div {
        height: 100%;
        color: #fff;
        text-align: right;
        line-height: 22px; /* same as #progressBar height if we want text middle aligned */
        width: 0;
        background-color: #0099ff;

    }
</style>
</head>

<body onload="timedRefresh(10000);">

<script type="text/javaScript">
    function timedRefresh(timeoutPeriod) {
     setTimeout("window.location.reload(true);",timeoutPeriod);
    }
</script>
<script src="http://localhost:8085/javascripts/socket.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://localhost:8085/javascripts/bootstrap.js"></script>
<script src="http://localhost:8085/javascripts/bootstrap-progressbar.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://localhost:8085/stylesheets/bootstrap.css" />

    <div id="progressbar"><div></div></div>

<script type="text/javascript">
var socket = io('http://localhost:8085/socket_issue');
  socket.on('connect', function(){ console.log('connected to socket'); });
  socket.on('error', function(e){ console.log('error' + e); });
  socket.on('message', function(data){
   console.log(data);


       function progress(percent, $element) {
        var progressBarWidth = percent * $element.width() / 100;
        $element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "% ");
    }
    progress(JSON.parse(data).percent, $('#progressbar'));


  });
  socket.on('disconnect', function(){});
</script>
</body>
</html>

此处，即使下载完成，页面也会刷新。下载完成后，我不想刷新页面。我试图在浏览器中显示进度条。

Answer 1

只需检查进度是否为100％，然后停止计时器。

<body>
<script type="text/javaScript">
var myVar;

function startTimer() {
    myVar = setTimeout(function(){ window.location.reload(true); }, 10000);
}
startTimer();
function myStopFunction() {
    clearTimeout(myVar);
}
</script>


<script type="text/javascript">
var socket = io('http://localhost:8085/socket_issue');
  socket.on('connect', function(){ console.log('connected to socket'); });
  socket.on('error', function(e){ console.log('error' + e); });
  socket.on('message', function(data){
   console.log(data);


       function progress(percent, $element) {
        if(percent==100)//Donwload complete
           myStopFunction();
        var progressBarWidth = percent * $element.width() / 100;
        $element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "% ");
    }
    progress(JSON.parse(data).percent, $('#progressbar'));


  });
  socket.on('disconnect', function(){});
</script>

正确发射事件。我不确定这段代码是否有效，可能存在范围问题，只需尝试。

io.of('/socket_issue').on('connection', function (socket) {
        console.log("Socket connected :"+socket.id);
    });
var callback = function(state){
    console.log('received size in bytes', state.received);
    console.log('total size in bytes', state.total);
    console.log('percent', state.percent);

     io.of('/socket_issue').emit('message', JSON.stringify({size: state.total, received: state.received, percent: state.percent, fileName: file_name}));

}

如何刷新页面几秒钟，直到下载完成

1 个答案: