网页下载文件时需要一段时间,在这期间如何防止用户对网页进行其他操作,将div覆盖在网页上,将网页锁住,具体实现如下

做网页下载文件时,有时候文件过大,生成文件需要一段时间。这个时候要防止用户对网页进行其他操作,有种方法就是使用一个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-streamnContent-Length: %ldn", s.st_size); printf( "Set-Cookie:configDownloadToken=%s; path=/; rn ",configDownloadToken); printf("Content-Disposition: attachment; filename="%s"n", strrchr(filename,'/') + 1); printf("Connection: closenn");

在客户端(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 } 

这样就可以了。

最新资讯
苹果高管解读财报:我们推出5G版iPhone的时机正好

苹果高管解读财报:我们

苹果公司今天发布了2020财年第四财季业绩。报告显示,苹
亚马逊高管解读财报:疫情推高了物流业务的成本

亚马逊高管解读财报:疫

亚马逊今天发布了2020财年第三季度财报。报告显示,亚马
谷歌母公司Alphabet三季度财报超预期 盘后股价涨超6%

谷歌母公司Alphabet三

谷歌母公司Alphabet(Nasdaq:GOOG)今天发布了截至9月30日
谷歌高管解读财报:对硬件的投资将更加深入

谷歌高管解读财报:对硬

Alphabet(谷歌母公司)今天发布了截至9月30日的2020财年
库克:公司对iPhone 12非常有信心

库克:公司对iPhone 12

苹果公司今天发布了2020财年第四财季业绩。报告显示,苹
苹果第四财季大中华区销售额79.5亿美元 同比大降28.5%

苹果第四财季大中华区

苹果公司今天发布了2020财年第四财季业绩。报告显示,苹
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,