设置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>