网页下载文件期间如何防止用户对网页进行其他操作


Posted in Javascript onJune 27, 2014

做网页下载文件时,有时候文件过大,生成文件需要一段时间。这个时候要防止用户对网页进行其他操作,有种方法就是使用一个div覆盖在网页上,将网页锁住。

function lockScreen() 
{ 
sWidth=$(window).width(); 
sHeight=$(window).height(); 
var bgObj=document.createElement("div"); 
bgObj.setAttribute('id','bgDiv'); 
bgObj.style.position="absolute"; 
bgObj.style.top="0"; 
bgObj.style.background="#CCCCCC"; 
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75"; 
bgObj.style.opacity="0.6"; 
bgObj.style.left="0"; 
bgObj.style.width=sWidth + "px"; 
bgObj.style.height=sHeight + "px"; 
if(sWidth < 860) 
{ 
bgObj.style.width="860px"; 
} 
bgObj.style.zIndex = "10000"; 
document.body.appendChild(bgObj); 
}

使用如上函数可以锁住页面防止多次操作,要直到下载框出现时取消锁屏。

在服务器端(cgi)中设置cookie:

<pre name="code" class="cpp">char *configDownloadToken = "finishedDownloadFile"; 
printf("Content-Type: application/octet-stream\nContent-Length: %ld\n", s.st_size); 
printf( "Set-Cookie:configDownloadToken=%s; path=/; \r\n ",configDownloadToken); 
printf("Content-Disposition: attachment; filename=\"%s\"\n", strrchr(filename,'/') + 1); 
printf("Connection: close\n\n");

在客户端(html、js)导入插件jquery.cookie.js,在html文件中要包含此插件,js文件中定时获取cookie

var configDownloadCheckTimer; 
$(document).ready(function () { 
configDownloadCheckTimer = window.setInterval(function() { 
var cookieValue = $.cookie('configDownloadToken'); 
if (cookieValue === "finishedDownloadFile") 
{ 
refreshPage(); 
finishDownload(); 
} 
}, 1000); 
}); 

function finishDownload() { 
window.clearInterval(configDownloadCheckTimer); 
$.removeCookie('configDownloadToken'); //clears this cookie value 
}

这样就可以了。

Javascript 相关文章推荐
Jquery cookie操作代码
Mar 14 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
javascript中比较字符串是否相等的方法
Jul 23 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
JS组件Bootstrap Table布局详解
May 27 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 Javascript
微信小程序模板template简单用法示例
Dec 04 Javascript
一篇文章,教你学会Vue CLI 插件开发
Apr 17 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 #Javascript
node.js实现逐行读取文件内容的代码
Jun 27 #Javascript
javascript实现的HashMap类代码
Jun 27 #Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
Jun 26 #Javascript
Javascript字符串对象的常用方法简明版
Jun 26 #Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 #Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 #Javascript
You might like
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
php cli 小技巧
2013/06/03 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
php实现对象克隆的方法
2015/06/20 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
JavaScript多态与封装实例分析
2018/07/27 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
微信小程序实现自定义底部导航
2020/11/18 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
python主线程捕获子线程的方法
2018/06/17 Python
详解Python中打乱列表顺序random.shuffle()的使用方法
2019/11/11 Python
Python post请求实现代码实例
2020/02/28 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
室内趣味活动方案
2014/08/24 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
2014年路政工作总结
2014/12/10 职场文书
合作意向协议书
2015/01/29 职场文书
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python