设置iframe内表单target属性以兼容IE、Firefox【转载】

设置iframe内表单target属性以兼容IE、Firefox【转载】

2011年11月19日　haibor　

 

 

 

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

经测试，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>

来源： <http://www.nuodou.com/a/667.html>

来自为知笔记(Wiz)