Javascript巧妙解決img做網(wǎng)站異常提交問題

作者：admin 2010-09-30 15:10:12

這里和大家簡單分享一下如何使用javascript巧妙操作img做網(wǎng)站異常提交，相信本文介紹一定會(huì)讓你有所收獲，歡迎大家一起來學(xué)習(xí)Javascript的有關(guān)技巧。

本文向大家描述一下使用javascript巧妙操作img做網(wǎng)站異常提交，表如果要實(shí)現(xiàn)單提交數(shù)據(jù)到服務(wù)器A，如果服務(wù)器A訪問不了就提交到服務(wù)器B，利用js操作img來處理完成是個(gè)不錯(cuò)的選擇。

使用javascript巧妙操作img做網(wǎng)站異常提交

如果要實(shí)現(xiàn)表單提交數(shù)據(jù)到服務(wù)器A，如果服務(wù)器A訪問不了就提交到服務(wù)器B，使用JS實(shí)現(xiàn)上面的所講功能，要考慮跨域問題，有使用過ajax的xmlhttp方法檢測遠(yuǎn)程文件不存在返回404的方案，這種方案在測試時(shí)由于ajax存在跨域問題，所以就不采用了，也使用過img的onerror與onload事件這種方案來處理，但是這種方案會(huì)造成提交表單IE會(huì)彈窗，瀏覽器又?jǐn)r截了彈窗，所以又不采用此方案，哪怎么辦呢？搞得挺久，最終還是利用js操作img來處理完成，下面是具體步驟。

第1步、創(chuàng)建一個(gè)test.htm文件

內(nèi)容如下：

<html> 
<scriptsrcscriptsrc="getMessage.js"></script> 
<body> 
<formnameformname="mfrm"> 
<inputidinputid="SendType" 
type="hidden"value="s129"name="SendType"/> 
<inputidinputid="title"name="title"/> 
<inputonClickinputonClick="returngetMessage(this.form);
"type="button"name="imageField"/> 
</form> 
</body> 
</html>

第2步：創(chuàng)建getMessage.js文件

內(nèi)容如下：

functiongetMessage(frm){  
varsendtype=frm.SendType;  
vartitle=frm.title;  
//創(chuàng)建模擬form表單  
varobjfrm=document.createElement("form");  
varobjsendtype=document.createElement("input");  
varobjtitle=document.createElement("input");  
//利用操作img來處理目標(biāo)接收數(shù)據(jù)的服務(wù)器頁面  
varobjImg=document.createElement("img");  
objImg.id="TmpSmsImg";  
objImg.src="http://www.xueit.com/images/logo.gif";  
//默認(rèn)服務(wù)器A圖片  
document.body.appendChild(objImg);  
varimgWidth=document.getElementById("TmpSmsImg").width;  
document.body.removeChild(objImg);  
 
if(imgWidth=="210")  
//如果圖片存在，就可以獲取到寬度等于預(yù)定值，  
默認(rèn)接收數(shù)據(jù)的服務(wù)器A的頁面  
{  
objfrm.action="http://www.xueit.com/testGet.aspx";  
}  
else//圖片不存在，另一臺(tái)接收數(shù)據(jù)的服務(wù)器B的頁面  
{  
objfrm.action="http://demo.xueit.com/testGet.aspx";  
}

#p# 下面是表單的屬性

objfrm.id="TmpForm";  
objfrm.name="TmpForm";  
objfrm.target="_blank";  
objfrm.method="post";  
objfrm.style.display="none";  
 
objsendtype.type="hidden";  
objsendtype.name="SendType";  
objsendtype.value=Utf2Gb(sendtype);  
 
objtitle.type="hidden";  
objtitle.name="title";  
objtitle.value=Utf2Gb(title);  
 
//附加  
objfrm.appendChild(objsendtype);  
objfrm.appendChild(objtitle);  
 
//表單提交  
document.body.appendChild(objfrm);  
objfrm.submit();  
document.body.removeChild(objfrm);  
 
//clearobj  
objtitle=null;  
objsendtype=null;  
objfrm=null;  
 
}  
 
//處理編碼函數(shù)  
functionUtf2Gb(str)  
{  
if(str!=null&&str!="")  
str=escape(str);  
returnstr;  
}

以上代碼主要是利用img圖片，如果圖片所在服務(wù)器正常運(yùn)行的話，圖片會(huì)加載到當(dāng)前頁面的body區(qū)域中，所以再獲取這個(gè)img圖片的寬度，如果寬度等于你知道的預(yù)定值，就代表默認(rèn)服務(wù)器正常，否則代碼服務(wù)器A不正常，就把數(shù)據(jù)提交到服務(wù)器B處理。

【編輯推薦】

Javascript中CSS屬性float特殊寫法
兼容IE6,IE7,IE8,Firefox的CSS HACK寫法
Javascript代碼輕松判斷IE6瀏覽器
完美實(shí)現(xiàn)IE6/IE7/FF瀏覽器兼容通用方法
IE6.0中使用Javascript支持png格式圖片

責(zé)任編輯：佚名來源： lianglong.org

Javascript img