java文件下载时页面不能操作实现

实现的原理：在父页面加一个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();