Javascript巧妙解决img做网站异常提交问题

本文向大家描述一下使用javascript巧妙操作img做网站异常提交，表如果要实现单提交数据到服务器A，如果服务器A访问不了就提交到服务器B，利用js操作img来处理完成是个不错的选择。

目前成都创新互联已为上1000+的企业提供了网站建设、域名、虚拟空间、网站托管、企业网站设计、北海网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

使用javascript巧妙操作img做网站异常提交

如果要实现表单提交数据到服务器A，如果服务器A访问不了就提交到服务器B，使用JS实现上面的所讲功能，要考虑跨域问题，有使用过ajax的xmlhttp方法检测远程文件不存在返回404的方案，这种方案在测试时由于ajax存在跨域问题，所以就不采用了，也使用过img的onerror与onload事件这种方案来处理，但是这种方案会造成提交表单IE会弹窗，浏览器又拦截了弹窗，所以又不采用此方案，哪怎么办呢？搞得挺久，最终还是利用js操作img来处理完成，下面是具体步骤。

第1步、创建一个test.htm文件

内容如下：

 
 
 

  
  
  

  
  
  

  
  
  

  
  
  

  
  
  

  
  
  
type="hidden"value="s129"name="SendType"/>
  
  
  

  
  
  

  
  
  
"type="button"name="imageField"/>
  
  
  

  
  
  

  
  
  

 
 
 

第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巧妙解决img做网站异常提交问题
本文链接：http://www.wtcwzsj.com/article/dhepiis.html