最近在做一个模拟Ajax提交的功能，原理很简单，就是动态创建一个form，并指定其target为页面中的一个隐藏的iframe，当form提交时会提交到这个iframe中，从而实现提交数据，而不刷新当前页面的功能，这个方法多用来做图片或文件上传的功能。

首先要创建一个iframe：

var iframe = document.createElement(‘iframe’);
iframe.id = ‘uploadIframe’;
iframe.name = ‘uploadIframe’;
iframe.style.display = ‘none’;
document.body.insertBefore(iframe, document.body.firstChild);

提交我们的form表单：

<form id=”form” enctype=”multipart/form-data” method=”POST” action=”” target=”uploadIframe”>
<input type=”file” hidefocus=”true” name=”pic”/>
</form>

document.getElementById(“form”).submit();
在FF、Chrome、Safari下都正常，而在IE下却发现，form提交时却新打开了一个窗口。

这是怎么回事呢，我iframe的name也设置了，form的target也指向了iframe。调试了一下，发现在IE里是iframe.name = ‘uploadIframe’; 这行代码无效。

于是上网搜索了下，发现可以这样来创建iframe：

iframe = document.createElement(‘<iframe name=”uploadIframe”>’);

但这样的代码会在非IE下抛出异常，于是增加下判断，代码变成这样：

var iframe;
if(/msie/.test(navigator.userAgent.toLowerCase())) { //IE
iframe = document.createElement(‘<iframe name=”uploadIframe”>’);
} else {//FF…
iframe = document.createElement(‘iframe’);
}
iframe.id = ‘uploadIframe’;
iframe.name = ‘uploadIframe’;
iframe.style.display = ‘none’;
document.body.insertBefore(iframe, document.body.firstChild);

也有人用：

var iframe;
try{//IE
iframe = document.createElement(‘<iframe name=”uploadIframe”>’);
} catch(e) {//FF…
iframe = document.createElement(‘iframe’);
}
iframe.id = ‘uploadIframe’;
iframe.name = ‘uploadIframe’;
iframe.style.display = ‘none’;
document.body.insertBefore(iframe, document.body.firstChild);

这样就兼容了，再提交form时就没有问题了。

这个问题是个容易被忽略的问题，大家在开发中要注意下。