Sal*_*ter 18 javascript php jquery
我有一个Web应用程序,用户可以在其中生成PDF和PowerPoint文件.这些文件可能需要一些时间才能生成,因此我希望能够在生成时显示加载动画.这里的问题是我无意知道下载何时开始.动画永远不会消失.
我知道可以生成文件"在侧面"并在文件准备好使用AJAX下载时提醒用户,但我更喜欢在用户等待下载开始时"锁定"用户.
Sal*_*ter 47
要了解这里需要做什么,让我们看看这种请求通常会发生什么.
用户单击该按钮以请求该文件.
该文件需要时间来生成(用户没有反馈).
文件已完成并开始发送给用户.
我们想要添加的是反馈,让用户知道我们在做什么......在第1步和第2步之间,我们需要对点击作出反应,我们需要找到一种方法来检测何时发生第3步以删除视觉反馈.我们不会让用户知道下载状态,他们的浏览器会像其他任何下载一样通知我们,我们只想告诉用户我们正在处理他们的请求.
为了使文件生成脚本与我们的请求者页面的脚本进行通信,我们将使用cookie,这将确保我们不依赖于事件,iframe等浏览器.在测试了多个解决方案后,从IE7到最新的移动设备,这似乎是最稳定的.
我们将使用javascript在屏幕上显示通知.我在整个页面上选择了一个简单的透明黑色覆盖,以防止用户与页面的其他元素进行交互,因为以下链接可能会使他失去接收文件的可能性.
$('#downloadLink').click(function() {
$('#fader').css('display', 'block');
});#fader {
opacity: 0.5;
background: black;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="fader"></div>
<a href="#path-to-file-generator" id="downloadLink">Click me to receive file!</a>
</body>简单的部分已经完成,现在我们需要通知javascript文件正在下载.当文件发送到浏览器时,它会与通常的HTTP标头一起发送,这允许我们更新客户端cookie.我们将利用此功能提供适当的视觉反馈.让我们修改上面的代码,我们需要设置cookie的起始值,并听取它的修改.
var setCookie = function(name, value, expiracy) {
var exdate = new Date();
exdate.setTime(exdate.getTime() + expiracy * 1000);
var c_value = escape(value) + ((expiracy == null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = name + "=" + c_value + '; path=/';
};
var getCookie = function(name) {
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++) {
x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g, "");
if (x == name) {
return y ? decodeURI(unescape(y.replace(/\+/g, ' '))) : y; //;//unescape(decodeURI(y));
}
}
};
$('#downloadLink').click(function() {
$('#fader').css('display', 'block');
setCookie('downloadStarted', 0, 100); //Expiration could be anything... As long as we reset the value
setTimeout(checkDownloadCookie, 1000); //Initiate the loop to check the cookie.
});
var downloadTimeout;
var checkDownloadCookie = function() {
if (getCookie("downloadStarted") == 1) {
setCookie("downloadStarted", "false", 100); //Expiration could be anything... As long as we reset the value
$('#fader').css('display', 'none');
} else {
downloadTimeout = setTimeout(checkDownloadCookie, 1000); //Re-run this function in 1 second.
}
};#fader {
opacity: 0.5;
background: black;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="fader"></div>
<a href="#path-to-file-generator" id="downloadLink">Click me to receive file!</a>
</body>好的,我们在这里添加了什么.我已经使用了我使用的set/getCookie函数,我不知道它们是否是最好的,但是它们的效果非常好.我们在启动下载时将cookie值设置为0,这将确保任何其他过去的执行都不会干扰.我们还启动"超时循环"来每秒检查cookie的值.这是代码中最有争议的部分,使用超时循环函数调用等待cookie更改发生可能不是最好的,但它是在所有浏览器上实现此功能的最简单方法.因此,我们每秒检查一次cookie值,如果值设置为1,我们会隐藏褪色的视觉效果.
在PHP中,人们会这样做:
setCookie("downloadStarted", 1, time() + 20, '/', "", false, false);
在ASP.Net中
Response.Cookies.Add(new HttpCookie("downloadStarted", "1") { Expires = DateTime.Now.AddSeconds(20) });
cookie的名称是downloadStarted,它的值是1,它到期NOW + 20seconds(我们检查每秒,所以20对于那个来说足够了,如果你改变javascript中的超时值就改变这个值),它的路径在整个域上(改变这是你喜欢的,它没有安全,因为它不包含敏感数据,它不仅仅是HTTP,所以我们的javascript可以看到它.
瞧!总结一下.请注意,所提供的代码完全适用于我正在使用的生产应用程序,但可能不符合您的确切需求,根据您的口味进行更正.
这是Salketer出色答案的简化版本。它只是检查cookie的存在，而不考虑其值。
提交表单后，它将每秒轮询一次Cookie的存在。如果cookie存在，则下载仍在处理中。如果不是，则下载完成。有2分钟的超时时间。
HTML / JS页面：
var downloadTimer; // reference to timer object
function startDownloadChecker(buttonId, imageId, timeout) {
var cookieName = "DownloadCompleteChecker";
var downloadTimerAttempts = timeout; // seconds
setCookie(cookieName, 0, downloadTimerAttempts);
// set timer to check for cookie every second
downloadTimer = window.setInterval(function () {
var cookie = getCookie(cookieName);
// if cookie doesn't exist, or attempts have expired, re-enable form
if ((typeof cookie === 'undefined') || (downloadTimerAttempts == 0)) {
$("#" + buttonId).removeAttr("disabled");
$("#" + imageId).hide();
window.clearInterval(downloadTimer);
expireCookie(cookieName);
}
downloadTimerAttempts--;
}, 1000);
}
// form submit event
$("#btnSubmit").click(function () {
$(this).attr("disabled", "disabled"); // disable form submit button
$("#imgLoading").show(); // show loading animation
startDownloadChecker("btnSubmit", "imgLoading", 120);
});
<form method="post">
...fields...
<button id="btnSubmit">Submit</button>
<img id="imgLoading" src="spinner.gif" style="display:none" />
</form>
支持Java设置/获取/删除Cookie的方法：
function setCookie(name, value, expiresInSeconds) {
var exdate = new Date();
exdate.setTime(exdate.getTime() + expiresInSeconds * 1000);
var c_value = escape(value) + ((expiresInSeconds == null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = name + "=" + c_value + '; path=/';
};
function getCookie(name) {
var parts = document.cookie.split(name + "=");
if (parts.length == 2) return parts.pop().split(";").shift();
}
function expireCookie(name) {
document.cookie = encodeURIComponent(name) + "=; path=/; expires=" + new Date(0).toUTCString();
}
ASP.Net中的服务器端代码：
...generate big document...
// attach expired cookie to response to signal download is complete
var cookie = new HttpCookie("DownloadCompleteChecker"); // same cookie name as above!
cookie.Expires = DateTime.Now.AddDays(-1d); // expires yesterday
HttpContext.Current.Response.Cookies.Add(cookie); // Add cookie to response headers
HttpContext.Current.Response.Flush(); // send response
希望有帮助！:)
| 归档时间： |
|
| 查看次数： |
33482 次 |
| 最近记录： |