设置iframe内表单target属性以兼容IE、Firefox

今天有客户反应,在一产品网站的资源下载页面,用户登录提交后页面无反应!

经测试,Firefox下正常,IE下无反应!IE还真是腼腆,都点提交了,还无反应!!!

查看代码,发现登录表单及登录后显示的资源列表均由一个 iframe 框架加载,这里做个情境假设:表单文件为 A.asp,前端iframe文件为 B.asp。

A.asp 表单内容为:

<form name="down_form" action="a.asp" method="post">
    姓名:<input type="text" name="username" size=20>
    单号:<input type="text" name="password" size=20>
    <input type="submit" value="登 陆" />
</form>

B.asp 页面内容为:

<iframe id="downlist" src="http://xxx.com/A.asp"></iframe>

如此,访问 B.asp 页面操作登录时,IE浏览器下无反应,Firefox正常登录并返回下载列表!解决办法也很简单:

1、在 A.asp 页面的 <form > 部分,添加 target 代码,注意红色的 downlist,要与 iframe 的ID和name一致:

<form name="down_form" action="a.asp" method="post" target="downlist">

2、B.asp页面中 iframe 标签要求 id与name标签都要添加!完整如下:

<iframe id="downlist" name="downlist" src="http://xxx.com/A.asp"></iframe>

分享一些兼容性的示例代码:

<form  action="http://www.baidu.com" method="post" id="form_box" >
    <input type="submit" value="submit"/>
</form>
<iframe id="loginIframe" width="300" height="300"></iframe>

<script language="javascript">
    var _form=document.getElementById("form_box");
    _form.setAttribute("target","loginIframe");
</script>

IE:点击“submit”提交之后,form表单并未按照预想提交到“loginIframe”这个iframe中。

FF:点击“submit”提交之后,form表单按照预想提交到“loginIframe”这个iframe中。

解决此兼容问题: 在iframe中增加name属性即name=“loginIframe”

<iframe id="loginIframe" name="loginIframe" width="300" height="300"></iframe>