用iframe进行表单提交时的若干问题总结

这篇文章主要用来探讨在使用iframe进行表单提交时一系列浏览器兼容性以及iframe本身的一些限制。

iframe的主要用途一般是运用在无刷新提交数据并做出响应的场景，可以作为ajax方式的有力补充。相对于使用ajax提交数据有一些独特的优势：
1、对浏览器是否支持javascript没有要求，因而有更好的浏览型兼容性。
2、表单提交时和普通的页面提交没有差别，不用通过脚本来包装提交的数据。
3、能很方便地处理enctype="multipart/form-data"的提交表单，而这是通过ajax所不能做到的。因此在像上传图像而要不刷新当前页面时，一般都会采用iframe来处理表单。

不过，应用iframe来处理表单也还是需要应对一些ajax处理表单时所没有的问题。把这些问题解决了，应用iframe就是手到擒来的事情了。

1、如何设定保证表单提交给iframe
只需要将form的target指定为iframe的name即可，这个在各个浏览器里边都是兼容的，不用额外的指定iframe的id了。
如：
########container.htm
<iframe name="frm_dealer"></iframe>
<form action="iframe.htm" target="frm_dealer">
    <input type="submit" value="提交">
</form>
###########iframe.htm
Hello,World!

2、表单提交后如何用js获取iframe的页面内容
这是和ajax如何获取到响应的数据一个类似的问题，需要处理好各种浏览器的兼容性。通过对一些日常开发的对比，总结出这么一套模式来获取iframe页面的内容，屡试不爽：
给iframe定义一个onload事件，并且将iframe以this传进相应的处理函数，然后就可以通过其contentWindow.document属性获取到iframe的document了。接下来用document.body.innerHTML就可以获取到body中的html代码了。这里需要考虑的一个问题是，页面加载时iframe没有src时也会产生onload事件，这时需要检查其innerHTML是否为空，如果为空，则不进行任何处理。

将1中的container.htm改成如下：
<iframe name="frm_dealer" onload="onIFrameLoaded(this);"></iframe>

<form action="iframe.htm" target="frm_dealer">
    <input type="submit" value="提交">
</form>

<script type="text/javascript">
function onIFrameLoaded(iframe) {
    var doc = iframe.contentWindow.document;
    var html = doc.body.innerHTML;
    if (html != '') {
        alert(html);
    }
}
</script>

3、如何使嵌入iframe的页面自适应iframe的高度变化
通过iframe的document的body.scrollHeight属性即可获知iframe文档的高度，然后调整iframe的height即可，可以通过修改2中的代码看到效果：
在conatiner.htm中的onIFrameLoaded函数最后增加一行：iframe.style.height = doc.body.scrollHeight + 'px';
然后，修改iframe.htm为：
<div style="height:200px">Hello,World!</div>
点击container.htm中的按钮，就会看到iframe的高度自动变到200px了。

四、iframe里边的表单提交的设置问题
当iframe里边有表单需要提交时，如果需要其父窗口一起提交，则需要设置其表单的target属性为_top。

五、iframe的缓存问题
当iframe里边的页面是一个静态页面时，其缓存往往比较严重，比如conatiner.htm的代码为：
<iframe src="iframe.htm"></iframe>
如果iframe.htm为一个静态页面，那么当改变了iframe.htm的页面内容，无论如何刷新container.htm，都有可能出现iframe.htm不发生改变的情况。只有单独访问iframe.htm，并且强制刷新一下，才会使得container.htm页面iframe里边的内容也发生变化。如果是在这样的情况下发布了一个网站的新版后，用户们却丝毫看不到改变，那么抓狂的只能是开发者了。不过，其实也不用着急，在src里边的路径后边加一个版本标识符即可，比如将src改成iframe.htm?v=1，这样，浏览器自然回去获取最新的版本内容了。

基本上，iframe里边需要注意的就是这些了，不知道你还有没有补充呢？

 

转自：http://www.cnblogs.com/geek/archive/2009/03/14/1411732.html