How to prevent users from performing other operations on the web page while the web page is downloading files

How to prevent users from performing other operations on the web page while the web page is downloading files_jquery

WBOY

Release： 2016-05-16 16:43:05

Original

1649 people have browsed it

When downloading files from web pages, sometimes the files are too large and it takes a while to generate the files. At this time, to prevent users from performing other operations on the web page, one method is to use a div to cover the web page and lock the web page.

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); 
}

Copy after login

Use the above function to lock the page to prevent multiple operations until the download box appears to cancel the lock screen.

Set cookies in server side (cgi):

<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");

Copy after login

Import the plug-in jquery.cookie.js on the client side (html, js), include this plug-in in the html file, and obtain cookies regularly in the js file

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 
}

Copy after login

That’s it.