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


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 树形结构的选择器
Feb 15 Javascript
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
Jun 13 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 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
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
wxpython 学习笔记 第一天
2009/02/09 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
python list转矩阵的实例讲解
2018/08/04 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
python爬虫中多线程的使用详解
2019/09/23 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
本科生个人求职自荐信
2013/09/26 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
《红军不怕远征难》教学反思
2014/04/14 职场文书
小学爱国卫生月活动总结
2014/06/30 职场文书
异地年检委托书范本
2014/09/24 职场文书
公司放假通知范文
2015/04/14 职场文书
让生命充满爱观后感
2015/06/08 职场文书
企业安全生产检查制度
2015/08/06 职场文书
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP