如何刷新页面几秒钟，直到下载完成
我想刷新一个网页，直到下载完成。下载完成后，我不想刷新页面，我可以如何实现这一目标？ 任何人都可以请帮我…
我的代码：
<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>
在这里，即使下载完成，页面也会刷新。下载完成后，我不想刷新页面。 我试图在浏览器中显示进度条。
只要检查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})); }