Javascript巧妙解決img做網站異常提交問題
作者：admin
這里和大家簡單分享一下如何使用javascript巧妙操作img做網站異常提交，相信本文介紹一定會讓你有所收獲，歡迎大家一起來學習Javascript的有關技巧。
本文向大家描述一下使用javascript巧妙操作img做網站異常提交，表如果要實現單提交數據到服務器A，如果服務器A訪問不了就提交到服務器B，利用js操作img來處理完成是個不錯的選擇。
使用javascript巧妙操作img做網站異常提交
如果要實現表單提交數據到服務器A，如果服務器A訪問不了就提交到服務器B，使用JS實現上面的所講功能，要考慮跨域問題，有使用過ajax的xmlhttp方法檢測遠程文件不存在返回404的方案，這種方案在測試時由于ajax存在跨域問題，所以就不采用了，也使用過img的onerror與onload事件這種方案來處理，但是這種方案會造成提交表單IE會彈窗，瀏覽器又攔截了彈窗，所以又不采用此方案，哪怎么辦呢？搞得挺久，最終還是利用js操作img來處理完成，下面是具體步驟。
第1步、創建一個test.htm文件
內容如下：
- <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步：創建getMessage.js文件
內容如下：
- functiongetMessage(frm){
- varsendtype=frm.SendType;
- vartitle=frm.title;
- //創建模擬form表單
- varobjfrm=document.createElement("form");
- varobjsendtype=document.createElement("input");
- varobjtitle=document.createElement("input");
- //利用操作img來處理目標接收數據的服務器頁面
- varobjImg=document.createElement("img");
- objImg.id="TmpSmsImg";
- objImg.src="http://www.xueit.com/images/logo.gif";
- //默認服務器A圖片
- document.body.appendChild(objImg);
- varimgWidth=document.getElementById("TmpSmsImg").width;
- document.body.removeChild(objImg);
- if(imgWidth=="210")
- //如果圖片存在，就可以獲取到寬度等于預定值，
- 默認接收數據的服務器A的頁面
- {
- objfrm.action="http://www.xueit.com/testGet.aspx";
- }
- else//圖片不存在，另一臺接收數據的服務器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;
- }
- //處理編碼函數
- functionUtf2Gb(str)
- {
- if(str!=null&&str!="")
- str=escape(str);
- returnstr;
- }
以上代碼主要是利用img圖片，如果圖片所在服務器正常運行的話，圖片會加載到當前頁面的body區域中，所以再獲取這個img圖片的寬度，如果寬度等于你知道的預定值，就代表默認服務器正常，否則代碼服務器A不正常，就把數據提交到服務器B處理。
【編輯推薦】
- Javascript中CSS屬性float特殊寫法
- 兼容IE6,IE7,IE8,Firefox的CSS HACK寫法
- Javascript代碼輕松判斷IE6瀏覽器
- 完美實現IE6/IE7/FF瀏覽器兼容通用方法
- IE6.0中使用Javascript支持png格式圖片
責任編輯：佚名
來源：
lianglong.org
