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


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中delegate与on的用法与区别示例介绍
Dec 20 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
JavaScript Date对象详解
Mar 01 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
Angularjs之filter过滤器(推荐)
Nov 27 Javascript
微信小程序 监听手势滑动切换页面实例详解
Jun 15 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
Vue中的$set的使用实例代码
Oct 08 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
PHPMailer邮件发送的实现代码
2013/05/04 PHP
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
JavaScript类属性的访问方式详解
2014/02/11 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
物业保安主管岗位职责
2013/12/25 职场文书
生日寿宴答谢词
2014/01/19 职场文书
《唯一的听众》教学反思
2014/02/20 职场文书
医疗纠纷协议书
2014/04/16 职场文书
年终考核实施方案
2014/05/26 职场文书
武当山导游词
2015/02/03 职场文书
单位考核聘任报告
2015/03/02 职场文书
感恩教师节主题班会
2015/08/12 职场文书
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏