在改AJAXRequest的过程中,碰到了个问题,应该算是Firefox和IE之间的兼容性问题。
提交表单时,往往需要先对表单进行验证,而这个验证的过程一般是放在form标签的onsubmit属性中。
onsubmit一般是由浏览器在form的submit动作发生时自动触发,但是如果表单由我们自己来提交,比如在AJAX应用中,就是由我们自己写程序将表单转换成请求字符串,再通过XMLHttpRequest发送到服务器,那么如果在此同时不丢掉表单验证的话,就需要我们自己来获取 onsubmit属性,并去处理它。
在获取属性时,为了保证兼容性,我用getAttribute来获取标签的属性值,但是发获取了onsubmit属性之后,发现在Firefox和IE中使用getAttribute("onsubmit")所返回的返回值类型是不同的。
测试代码如下:
===================================================
// Firefox中提示框内容为string,IE中为function<br />
<form id="test" onsubmit="return validform();">
Name: <input type="text" id="name" /><br />
<input type="button" onclick="validate();" value="Validate" />
</form>
<script type="text/javascript">
<!--
function validform() {
return (document.getElementById("name").value!="");
}
alert(typeof(document.getElementById("test").getAttribute("onsubmit")));
//-->
</script>
===================================================
在Firefox中使用getAttribute("onsubmit")返回值的是一个字符串,而在IE中的返回值类型则是function,也就是一个函数,因此如果在IE中处理onsubmit,我们可以直接调用这个函数:
===================================================
// 注意,下面这段代码只能在IE中正常运行
<form id="test" onsubmit="return validform();">
Name: <input type="text" id="name" /><br />
<input type="button" onclick="validate();" value="Validate" />
</form>
<script type="text/javascript">
<!--
function validform() {
return (document.getElementById("name").value!="");
}
function validate() {
var vaf=document.getElementById("test").getAttribute("onsubmit");
if(vaf())
alert("OK");
else
alert("Error");
}
//-->
</script>
===================================================
但是,在Firefox中,使用getAttribute("onsubmit")返回的是一个字符串,因此就不能直接这样使用了,而应该将字符串转换成函数再去调用:
===================================================
// 注意,下面这段代码只能在Firefox中正常运行
<form id="test" onsubmit="return validform();">
Name: <input type="text" id="name" /><br />
<input type="button" onclick="validate();" value="Validate" />
</form>
<script type="text/javascript">
<!--
function validform() {
return (document.getElementById("name").value!="");
}
function validate() {
// 使用new Function将字符串转换成函数
var vaf=new Function(document.getElementById("test").getAttribute("onsubmit"));
if(vaf())
alert("OK");
else
alert("Error");
}
//-->
</script>
===================================================
如果把上面这段代码在IE中运行,那么会发现无论是否在输入框中输入值,都会显示“Error”。
因此,如果要解决这个问题,可以在使用getAttribute获取onsubmit属性值之后,判断返回值类型是否为字符串,如果是字符串就使用new Function将它转换成函数:
===================================================
// 注意,下面这段代码在Firefox和IE中均能正常运行
<form id="test" onsubmit="return validform();">
Name: <input type="text" id="name" /><br />
<input type="button" onclick="validate();" value="Validate" />
</form>
<script type="text/javascript">
<!--
function validform() {
return (document.getElementById("name").value!="");
}
function validate() {
var vaf=document.getElementById("test").getAttribute("onsubmit");
vaf=typeof(vaf)=="string"?new Function(vaf):vaf;
if(vaf())
alert("OK");
else
alert("Error");
}
//-->
</script>
===================================================
这样,就解决了使用getAttribute("onsubmit")返回值类型不一样的问题,对于其他回调函数如onclick也可以这样处理。当然,如果大家有什么更好的解决方案也可以提出来分享一下:)
分享到:
相关推荐
if(!document.all){ //zzcv...Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一通过getAttribute()获取自定义属性. 4.IE下,HTML对象的ID可以作为document的下属对象变量名直接使用;Firefox下则不能. 5
1. document.formName.item("itemName") 问题 说明:IE下,可以使用document.formName.item(...Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一通过getAttribute()获取自定义属性. ...........
JSP中getParameter与getAttribute有何区别? ——说实话,这个问题当初我也困惑很久,我也知道怎么用,可是到底有什么区别,我也不是很清楚,后来找了很多资料才明白。昨天又有一位朋友问我这个问题,想我当初同样也...
getAttribute和getParameter区别 getAttribute和getParameter区别
getAttribute()方法 至此,我们已经向大家介绍了两种检索特定元素节点...不过,getAttribute()方法不能通过document对象调用,这与我们此前介绍过的其他方法不同。我们只能通过一个元素节点对象调用它。 例如,你可以把
js中的getAttribute方法使用示例.docx
session.getAttribute在servlet中是一个很重要的方法。
IE8/9/10/Firefox/Safari/Chrome/Opera:返回相对路径 IE6/7中想要与其它浏览器保持一致的话,可以给getAttribute的第二个参数设为2。 home [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 标准的...
request.getParameter() 和request.getAttribute() 区别
PDO::getAttribute PDO::getAttribute — 取回一个数据库连接的属性(PHP 5 >= 5.1.0, PECL pdo >= 0.1.0) 说明 语法 mixed PDO::getAttribute ( int $attribute ) 此函数(方法)返回一个数据库连接的属性值。 取回...
魔法函数 getattr 与 getattribute 简单说明 __getattr__ 与 __getattribute__ 魔法函数的使用 目录魔法函数 __getattr__ 与 __getattribute____getattr__魔法函数作用__getattribute__魔法函数总结 书上说,天下...
测试环境(客户端浏览器 ) IE6,IE7, IE8兼容模式, IE8 Firefox 3.6.8, google chrome 5.0.375.125 先来说明两个函数的标准定义。 elementNode.setAttribute(name,value) name 必需。规定要设置的属性名。 value ...
测试代码如下: 代码如下: <button value=”abc”>测试</button> [removed] var btn = document....IE8/9/10/Firefox/Safari/Chrome/Opera: 即: IE6/7 中返回的是innerHTML,实现错误。
HTTP:getAttribute和getParameter的区别
本文实例分析了javascript中setAttribute兼容性用法。分享给大家供大家参考,具体如下: 1:常规属性建议使用 node.XXXX。 2:自定义属性建议使用node.getAttribute(“XXXX”)。 3:当获取的目标是JS里的关键字时建议...
在IE6/7中样式“abc”将没有起作用,虽然使用el.getAttribute(‘class’)能取到值“abc”。 又如for属性 代码如下: 姓名:</label><input type=”checkbox” id=”name”/> [removed] var lab = document....
本篇文章小编为大家介绍,基于request.getAttribute与request.getParameter的区别详解。需要的朋友参考下
本篇文章是对JS中的getAttribute和setAttribute(取得和设置属性)的使用进行了详细的分析介绍,需要的朋友可以参考下
今天小编就为大家分享一篇关于PHP PDOStatement::getAttribute讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧