日期:2014-05-16  浏览次数:20566 次

谈谈使用iFrame模拟Ajax的问题

几年之前,那个时候Ajax还没有出现(或者说还没有像现在这么火),为了实现向服务器端提交数据而不刷新页面的效果,大多数采用的就是这种隐藏iFrame的方法。下面就简要介绍一下这个方法:

?

1、处理思路:

假设FormA是我们要提交数据的Form,正常来说,向服务端提交数据后,返回的response会刷新当前的Form,也就是页面会刷新一下,但是如果我们将form的target设置到另外一个iframe中,那么刷新的就是target的那个iframe。这种方法其实在一些菜单树的设计上也使用过。同时为了让用户觉察不到iframe的刷新,就需要将这个作为target的iframe隐藏起来。

?

2、代码实现:

写个代码说明一下:

< form id ="wfAuditForm" method ="post" enctype ="multipart/form-data"  target="hiddenIframe">
< input type ="file" name ="posterUrlUploadPath" id ="posterUrlUploadPath" class ="fileUpload" title ="上传图片" />

<iframe style="position: absolute, top: -1000px, left: -1000px'" id="hiddenIframe"/>

有的时候,我们需要根据返回的数据来更新某些页面元素的值(类似于ajax的success方法),这个时候该怎么办呢?也好办。既然返回的数据都流向了hiddenIframe,那么我们在hiddenIframe中使用一个textarea将这个数据接收下来,在这个iframe中的onload事件中对这些数据进行处理,然后调用父窗口(parent)相应的处理方法来处理。

?

3、弊端说明:

这种方法的第一个弊端是显而易见的,就是麻烦,所以很多人投向了Ajax的怀抱,另外还有一个弊端是如果返回的数据时Json格式的话,需要将content-type设置为“text/html”而不能设置为json。

?

4、补充一下:

其实现在这种方法还是在使用中,常见于使用ajax来上传文件,包括ajax的倡导者google,其mail系统还是用这种方法来上传附件,这是因为js的基于安全性的考虑禁止操作文件,导致了不能使用ajax来上传文件。实际上jquery的插件jquery.form.js也是使用的这种方法来实现的文件上传。

?

互联网码农一枚,欢迎微博互粉:http://weibo.com/icemanhit

1 楼 aninfeel 2012-09-03  
现在的新浏览器都可以用js操作文件了,但是兼容性还是老问题,继续iframe
2 楼 jianfeihit 2012-09-03  
aninfeel 写道
现在的新浏览器都可以用js操作文件了,但是兼容性还是老问题,继续iframe

不知道你说的是不是使用ActiveXObject来控制,这种控制需要用户在客户端进行授权吧。我觉得js控制文件的确是个不放心的事,就好比你把你家里门钥匙给了送外卖的,虽然是为了方便,但是难免不会带来安全上的漏洞。