Home Web Front-end JS Tutorial How to prevent users from performing other operations on the web page while the web page is downloading files_jquery

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

May 16, 2016 pm 04:43 PM
download file

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.

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1664
14
PHP Tutorial
1269
29
C# Tutorial
1249
24
Where are the files downloaded by vivo browser? Where are the files downloaded by vivo browser? Feb 23, 2024 pm 08:55 PM

Where are the files downloaded by the vivo browser? The files downloaded by the vivo browser will be stored in a dedicated location, but most friends do not know where the files downloaded by the vivo browser are. Next, the editor will bring it to users Graphic tutorial on how to open files downloaded from vivo browser, interested users come and take a look! Vivo mobile phone usage tutorial Where are the files downloaded by vivo browser? 1. First open the browser APP, then enter the bottom of the browser main interface and click [Menu]; 2. Then expand the function bar below and click the [Download Record] option; 3 , then in the download record interface, select [Download Complete]; 4. Select the location where you want to view the downloaded file, and click the [Open] button at the back; 5

How to download files from Thunder ed2k? Thunder ed2k usage tutorial How to download files from Thunder ed2k? Thunder ed2k usage tutorial Mar 14, 2024 am 10:50 AM

How to download files from Thunder ed2k? As a common shared file, many users will encounter situations where downloading is not supported when downloading ed2k. So how do you download it through Thunder? Let this site introduce to users the tutorial on how to use Thunder ed2k. Thunder ed2k usage tutorial 1. Copy the ed2k link. 2. Open "Thunder" and click "+" in the upper left corner. 3. Copy the link and click "Download Now".

How to set a save disk for downloaded files in Windows 11 How to set a save disk for downloaded files in Windows 11 Apr 20, 2024 pm 06:32 PM

For users who are new to the Windows 11 system, usually the file download path will follow the system default settings, and the files are often saved in the system disk. In the long run, it may affect the overall performance of the computer by occupying too much system disk space. In order to manage and allocate storage space more rationally, it is important to learn how to customize the save disk for downloaded files in Windows 11 system. This article will explain in detail how to flexibly set the target disk for downloaded files in Windows 11 to meet users' personalized storage needs. If this is what you need, you may wish to continue reading and we will introduce you to the steps of this practical function in detail. Operation method 1. Double-click to open "This PC" on the desktop. 2. Then find the new interface in the left column

Where are the files downloaded from Apple QQ? Where are the files downloaded from Apple QQ? Mar 08, 2024 pm 02:50 PM

QQ is a popular instant messaging software, and almost everyone has a QQ number. When using an Apple phone, you may encounter difficulties in storing and retrieving files. Generally, these files are stored in the Documents folder in the corresponding application directory. Where are the files downloaded from QQ on iPhone? 1. First open the QQ application on iPhone and click on the personal avatar to enter the personal page. 2. In the menu at the bottom of the personal page, select [My Files] and click Open. 3. Then enter [Local Files] to view the files saved by QQ on the mobile phone. 4. In the local file, click the View button to view the downloaded file information.

Where are the downloaded files from Little Red Car Creative Workshop? Where are the downloaded files from Little Red Car Creative Workshop? Mar 20, 2024 am 09:47 AM

Users can use Xiaohongche Creative Workshop to download various wallpapers. Many users do not know where the files downloaded by Xiaohongche Creative Workshop are. Users can find a folder with a number under content. The downloaded files are all here. . Where are the files downloaded from Little Red Car Creative Workshop? Answer: It is in the local folder-steamapps-workshop-content. 1. Open steam and find WallpaperEngine: wallpaper engine. 2. Right-click Manage, and then click Browse local files. 3. Open the folder and click steamapps. 4. Click workshop. 5. Click content. 6. Find the folder with the number. 7. All downloaded wallpapers are there

Download file via AJAX call in PHP Download file via AJAX call in PHP Sep 05, 2023 am 11:33 AM

Using Ajax to download files is considered a bad idea. Instead, use window.location= or document.location. 'window.location' has the following characteristics - Requires JavaScript to be enabled No PHP required. It helps to display the content website and redirect the user after few seconds. Redirects can depend on any condition, for example - $success=1if($success){ window.location.href='http://example.com';} named

Share the solution to the problem that the path is lost after Python downloads the file Share the solution to the problem that the path is lost after Python downloads the file Apr 04, 2024 am 08:39 AM

Use the pathlib module to solve the problem of path loss after downloading files in Python: create a Path object of pathlib and specify the path of the file to be downloaded. Use the requests library to download the file and save it to the specified path. Use the Path.resolve() method to get the absolute path of the file. Use absolute paths to access or process downloaded files.

How does Aisi Assistant find the downloaded files - How does Aisi Assistant find the downloaded files How does Aisi Assistant find the downloaded files - How does Aisi Assistant find the downloaded files Mar 05, 2024 am 10:20 AM

I think many users here like the editor and like to use the AISI Assistant software, but do you know how AISI Assistant finds the downloaded files? The following is the method that the editor brings to you to find the downloaded files in AISI Assistant. Interested users can take a look below. We double-click the program and go directly to the main page of Aisi Assistant. I will do a test first. First, download a program and click on the software resource option above. I downloaded a mobile Baidu program and clicked the install button to start the installation. We need to wait a moment for the download speed to be determined by our home computer network speed. After the download is completed, we click the open directory tab above to go directly to the directory where the local download has been completed. Then we can directly see the files we downloaded.

See all articles