Architecting Life

在改AJAXRequest的过程中，碰到了个问题，应该算是Firefox和IE之间的兼容性问题。

提交表单时，往往需要先对表单进行验证，而这个验证的过程一般是放在form标签的onsubmit属性中。

onsubmit一般是由浏览器在form的submit动作发生时自动触发，但是如果表单由我们自己来提交，比如在AJAX应用中，就是由我们自己写程序将表单转换成请求字符串，再通过XMLHttpRequest发送到服务器，那么如果在此同时不丢掉表单验证的话，就需要我们自己来获取onsubmit属性，并去处理它。

在获取属性时，为了保证兼容性，我用getAttribute来获取标签的属性值，但是发获取了onsubmit属性之后，发现在Firefox和IE中使用getAttribute("onsubmit")所返回的返回值类型是不同的。

测试代码如下：

// code by xujiwei from www.xujiwei.cn<br /><br /> // Firefox中提示框内容为string，IE中为function<br /><br /> <form id="test" onsubmit="return validform();"><br />     Name: <input type="text" id="name" /><br /><br />     <input type="button" onclick="validate();" value="Validate" /><br /> </form><br /> <script type="text/javascript"><br /> <!--<br />     function validform() {<br />         return (document.getElementById("name").value!="");<br />     }<br />     alert(typeof(document.getElementById("test").getAttribute("onsubmit")));<br /> //--><br /> </script>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

在Firefox中使用getAttribute("onsubmit")返回值的是一个字符串，而在IE中的返回值类型则是function，也就是一个函数，因此如果在IE中处理onsubmit，我们可以直接调用这个函数：

// code by xujiwei from www.xujiwei.cn<br /><br /> // 注意，下面这段代码只能在IE中正常运行<br /><br /> <form id="test" onsubmit="return validform();"><br />     Name: <input type="text" id="name" /><br /><br />     <input type="button" onclick="validate();" value="Validate" /><br /> </form><br /> <script type="text/javascript"><br /> <!--<br />     function validform() {<br />         return (document.getElementById("name").value!="");<br />     }<br />     function validate() {<br />         var vaf=document.getElementById("test").getAttribute("onsubmit");<br />         if(vaf())<br />             alert("OK");<br />         else<br />             alert("Error");<br />     }<br /> //--><br /> </script>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

但是，在Firefox中，使用getAttribute("onsubmit")返回的是一个字符串，因此就不能直接这样使用了，而应该将字符串转换成函数再去调用：

// code by xujiwei from www.xujiwei.cn<br /><br /> // 注意，下面这段代码只能在Firefox中正常运行<br /><br /> <form id="test" onsubmit="return validform();"><br />     Name: <input type="text" id="name" /><br /><br />     <input type="button" onclick="validate();" value="Validate" /><br /> </form><br /> <script type="text/javascript"><br /> <!--<br />     function validform() {<br />         return (document.getElementById("name").value!="");<br />     }<br />     function validate() {<br />         // 使用new Function将字符串转换成函数<br />         var vaf=new Function(document.getElementById("test").getAttribute("onsubmit"));<br />         if(vaf())<br />             alert("OK");<br />         else<br />             alert("Error");<br />     }<br /> //--><br /> </script>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

如果把上面这段代码在IE中运行，那么会发现无论是否在输入框中输入值，都会显示“Error”。

因此，如果要解决这个问题，可以在使用getAttribute获取onsubmit属性值之后，判断返回值类型是否为字符串，如果是字符串就使用new Function将它转换成函数：

// code by xujiwei from www.xujiwei.cn<br /><br /> // 注意，下面这段代码在Firefox和IE中均能正常运行<br /><br /> <form id="test" onsubmit="return validform();"><br />     Name: <input type="text" id="name" /><br /><br />     <input type="button" onclick="validate();" value="Validate" /><br /> </form><br /> <script type="text/javascript"><br /> <!--<br />     function validform() {<br />         return (document.getElementById("name").value!="");<br />     }<br />     function validate() {<br />         var vaf=document.getElementById("test").getAttribute("onsubmit");<br />         vaf=typeof(vaf)=="string"?new Function(vaf):vaf;<br />         if(vaf())<br />             alert("OK");<br />         else<br />             alert("Error");<br />     }<br /> //--><br /> </script>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

这样，就解决了使用getAttribute("onsubmit")返回值类型不一样的问题，对于其他回调函数如onclick也可以这样处理。当然，如果大家有什么更好的解决方案也可以提出来分享一下:)