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


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 相关文章推荐
新鲜出炉的js tips提示效果
Apr 03 Javascript
js 实现css风格选择器(压缩后2KB)
Jan 12 Javascript
js检测输入内容全为空格的方法
May 03 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
Javascript中引用类型传递的知识点小结
Mar 06 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
bootstrap 路径导航 分页 进度条的实例代码
Aug 06 Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 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
php环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
php新建文件的方法实例
2019/09/26 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
JavaScript去掉空格的方法集合
2010/12/28 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
[03:39]这就是刀塔,我们是冠军!燃情短片讲述我们的DOTA故事
2019/07/02 DOTA
Python中操作mysql的pymysql模块详解
2016/09/13 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
Django中url的反向查询的方法
2018/03/14 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
如何启动时不需输入用户名与密码
2014/05/09 面试题
房地产还款计划书
2014/01/10 职场文书
办公室主任先进事迹
2014/01/18 职场文书
中考冲刺决心书
2014/03/11 职场文书
社区文艺活动方案
2014/08/19 职场文书
长城导游词
2015/01/30 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
李强感恩观后感
2015/06/17 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL