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


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实现表格数据的动态添加与统计的代码
Jan 31 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
解决Angular.Js与Django标签冲突的方案
Dec 20 Javascript
node使用promise替代回调函数
May 07 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
vue实现页面切换滑动效果
Jun 29 Javascript
JavaScript实现简易计算器小功能
Oct 22 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
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
2016/08/20 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
python 弹窗提示警告框MessageBox的实例
2019/06/18 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
python opencv调用笔记本摄像头
2019/08/28 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
python关闭占用端口方式
2019/12/17 Python
如何一键升级Python所有包
2020/11/05 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
如何在Shell脚本中使用函数
2015/09/06 面试题
有针对性的求职自荐信
2013/11/14 职场文书
人事部主管岗位职责
2013/12/26 职场文书
家长会学生家长演讲稿
2013/12/29 职场文书
采购部长岗位职责
2014/06/13 职场文书
青年标兵事迹材料
2014/08/16 职场文书
2014年团支部工作总结
2014/11/17 职场文书
劳动保障事务所个人工作总结
2015/08/12 职场文书
民事纠纷协议书
2016/03/23 职场文书
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers