实现的原理:在父页面加一个div,div里面可以放一张正在加载的动态图,然后子页面下载文件的时候弹出父页面的div的内容,从而达到不能操作的目的。
1、父页面加个div,里面放了一张加载的动态图。
<div id="loadingDiv">
<img alt="请稍后..." src="image/loading.gif" class="img_cla"/>
</div>
div及其动态图的样式。
<style type="text/css">
#loadingDiv {
background-color:grey;
filter: alpha(opacity=50);
opacity: 0.1;
position: absolute;
margin: auto;
width: 100%;
height: 100%;
z-index: 100;
display:none;
}
.img_cla {
margin : auto;
position : absolute;
top : 0;
left : 0;
bottom : 0;
right : 0;
}
</style>
2、子页面下载的时候弹出这个div的内容。
//弹出遮盖层
window.parent.$("#loadingDiv").fadeTo(200,0.5);
var xhh = new XMLHttpRequest();
page_url = url;//下载的url
xhh.open("post", page_url);
xhh.responseType = 'blob';
xhh.onload = function () {
var name = xhh.getResponseHeader("Content-disposition");
var filename_ = name.substring(name.lastIndexOf("="));
var reg = new RegExp('"','g');
var filename = filename_.replace(reg,'').replace('=','');
var blob = new Blob([xhh.response], {type: 'text/zip'});
var csvUrl = URL.createObjectURL(blob);
var link = document.createElement('a');
link.href = csvUrl;
link.download = filename;
link.click();
alert("文件下载完成");
window.parent.$("#loadingDiv").fadeOut(200);//文件下载完成关闭弹出窗
};
xhh.send();