網(wǎng)頁下載文件期間如何防止用戶對(duì)網(wǎng)頁進(jìn)行其他操作
更新時(shí)間：2014年06月27日 17:36:35 投稿：whsnow
網(wǎng)頁下載文件時(shí)需要一段時(shí)間，在這期間如何防止用戶對(duì)網(wǎng)頁進(jìn)行其他操作，將div覆蓋在網(wǎng)頁上，將網(wǎng)頁鎖住，具體實(shí)現(xiàn)如下
做網(wǎng)頁下載文件時(shí)，有時(shí)候文件過大，生成文件需要一段時(shí)間。這個(gè)時(shí)候要防止用戶對(duì)網(wǎng)頁進(jìn)行其他操作，有種方法就是使用一個(gè)div覆蓋在網(wǎng)頁上，將網(wǎng)頁鎖住。
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);
}
使用如上函數(shù)可以鎖住頁面防止多次操作,要直到下載框出現(xiàn)時(shí)取消鎖屏。
在服務(wù)器端（cgi）中設(shè)置cookie：
<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");
在客戶端（html、js）導(dǎo)入插件jquery.cookie.js，在html文件中要包含此插件，js文件中定時(shí)獲取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
}
這樣就可以了。
相關(guān)文章
這篇文章主要介紹了jQuery中size()方法用法,實(shí)例分析了size()方法返回對(duì)象集合中元素?cái)?shù)目的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
下拉列表選擇項(xiàng)的選中在不同瀏覽器中的兼容性問題探討
使用jquery做了一個(gè)項(xiàng)目，下拉列表選擇項(xiàng)變化時(shí)，獲取選中項(xiàng)的文本在不同瀏覽器中的兼容性問題在本文將為大家介紹下2013-09-09
jquery.simple.tree插件 更簡(jiǎn)單，兼容性更好的無限樹插件
在這里介紹一款小巧，功能強(qiáng)大，能拖拽，支持異步，且兼容性更高的jquery Tree插件2010-09-09
jQuery簡(jiǎn)單實(shí)現(xiàn)圖片預(yù)加載
我們?cè)谧鼍W(wǎng)站的時(shí)候經(jīng)常會(huì)遇到這樣的問題：一個(gè)頁面有大量的圖片導(dǎo)致頁面加載速度緩慢，經(jīng)常會(huì)出現(xiàn)一個(gè)白頁用戶體驗(yàn)很不好。那么如何解決這個(gè)問題呢？下面我來介紹一種在實(shí)際應(yīng)用中經(jīng)常會(huì)使用到的js預(yù)加載的方法。2015-04-04
使用JQuery實(shí)現(xiàn)智能表單驗(yàn)證功能
表單驗(yàn)證功能在項(xiàng)目中經(jīng)常會(huì)用得到，接下來給大家介紹使用jquery實(shí)現(xiàn)智能表單驗(yàn)證功能實(shí)例代碼，對(duì)jquery實(shí)現(xiàn)表單驗(yàn)證功能相關(guān)資料感興趣的朋友一起學(xué)習(xí)吧2016-03-03
jquery select操作的日期聯(lián)動(dòng)實(shí)現(xiàn)代碼
是很簡(jiǎn)單的代碼 不過我自己操作的時(shí)候才發(fā)現(xiàn)我自己還有很多不懂，要多實(shí)際應(yīng)用才發(fā)現(xiàn)問題，哎~~2009-12-12
這篇文章主要為大家詳細(xì)介紹了jQuery內(nèi)容篩選選擇器實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了jQuery操作表單常用控件方法,實(shí)例總結(jié)了jQuery針對(duì)常用表單控件的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jQuery ReferenceError: $ is not defined 錯(cuò)誤的處理辦法
今天開始要學(xué)習(xí)jQuery，寫第一個(gè)Hello Word時(shí)，居然jQuery ReferenceError: $ is not defined2013-05-05
jQuery resize event監(jiān)聽DOM元素大小變化 ,即可以綁定window以外的元素大小的變化，支持回調(diào)函數(shù)！2016-02-02