IE中form混淆id与name的bug

shuaigg.babysky

浏览: 568329 次
性别:
来自: 济南

最近访客更多访客>>

sgqt

amu123456

ringphone

u012363178

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

IE JavaScript 浏览器 HTML XHTML

IE的document.getElementById混淆name和id属性的BUG

BUG演示

页面演示在这里,代码在下面



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
 



<
html
 
xmlns
=
"http://www.w3.org/1999/xhtml"
>
 


<
head
>
 


<
meta
 
http-equiv
=
"Content-Type"
 
content
=
"text/html; charset=utf-8"
 
/>
 


<
title
>
IE document.getElementById BUG DEMO
</
title
>
 


</
head
>
 


 


<
body
>
 


<
script
 
language
=
"javascript"
>
 


/*  


      IE document.getElementById BUG 演示DEMO  


      作者:朦朧中的罪惡  


      博客:http://be-evil.org  


*/  


function changeValue()  


{  


      var 
username
 = 
document
.getElementById('username');  


    
username.value
 = 
'Whahaha'
;  


}  


</
script
>
 


<
form
 
action
=
"IE_BUG2.html"
 
method
=
"get"
>
 


<
p
>
name:
<
input
 
type
=
"text"
 
name
=
"username"
 
/>
</
p
>
 


<
p
>
name2:
<
input
 
type
=
"text"
 
id
=
"username"
 
name
=
"name"
 
/>
</
p
>
 


<
p
>
<
input
 
type
=
"button"
 
value
=
"改变"
 
onclick
=
"changeValue();"
 
/>
</
p
>
 


</
form
>
 


</
body
>
 


</
html
>

很简单的一段代码,看上去似乎没有任何错误,但是在IE下点击改变按钮后,被改变值的对象居然是第一个name属性为username的input对象.而不是第二个id属性为username的对象.

如何避免这个问题?

方法一：尽量避免在页面中出现name与id属性相同的对象

方法二：利用JavaScript的特点,重写document.getElementById

下面j解决问题的方法和思路是根据国外某位兄弟的经验翻译过来,原文在这里 ,这里非常感谢他的文章给我作参考!

1.首先初步的尝试复写document.getElementById的方法



if
 (/msie/i.test (navigator.userAgent)) 
//根据userAgent确定用户使用IE浏览器 
 



{  


      document.nativeGetElementById = document.getElementById;  


      document.getElementById = 
function
(id)  


      {  


        
var
 elem = document.nativeGetElementById(id);  


        
if
(elem)  


          {  


            
//确定id相同 
 


            
if
(elem.id == id)  


              {  


                
return
 elem;  


              }  


            
else
 


              {  


                
//如果没有ID相同的,那么就遍历所有元素的集合找到id相同的元素 
 


                
for
(
var
 i=1;i<document.all[id].length;i++)  


                  {  


                    
if
(document.all[id][i].id == id)  


                      {  


                        
return
 document.all[id][i];  


                      }  


                  }  


              }  


          }  


        
return
 
null
;  


      };  


}

看起来似乎没有任何问题,但是在IE7下的某些情况中又会引出一个getAttribute() 方法的问题.

看代码:



<
html
>
 



    
<
head
>
 


        
<
title
>
Demonstrate IE7 getAttribute() bug
</
title
>
   


    
</
head
>
 


    
<
body
>
 


        
<
form
 
id
=
"myForm1"
>
 


            
<
input
 
id
=
"user_id"
 
name
=
"user_id"
 
value
=
"text"
 
/>
 


        
</
form
>
 


        
<
form
 
id
=
"myForm2"
>
 


            
<
input
 
id
=
"id"
 
name
=
"id"
 
value
=
"text"
 
/>
 


        
</
form
>
 


        
<
script
 
type
=
"text/javascript"
>
 


              var 
formElement1
 = 
document
.getElementById('myForm1');  


              var 
formElement2
 = 
document
.getElementById('myForm2');  


              alert(formElement1.getAttribute('id')+ "\n" + formElement2.getAttribute('id'));  


        
</
script
>
 


    
</
body
>
 


</
html
>

这个情况出现在表单中,如果有一个表单元素name的值为id的时候

在火狐下我们得到的结果是

myForm1
myForm2

但是在IE7下面,却变成了

myForm1
[object]

不知怎么的,ie错误的访问了它内部name位id的input元素而不是表单元素本身的id属性.使用formElement2.id的方法替代getAttribute()我们仍然可以得到相同的效果.(参见我先前遇到的一个IE的BUG )

幸运的是我们仍然可以通过以下的方式得到正确的元素:

formElement2.attributes['id'].value
formElement2.getAttributeNode('id').value

既然还有以上的隐性BUG,那我们还要再次修改一下我们覆写的document.getElementById方法



if
 (/msie/i.test (navigator.userAgent)) 
//根据userAgent确定用户使用IE浏览器




{  


      document.nativeGetElementById = document.getElementById;  


      document.getElementById = 
function
(id)  


      {  


        
var
 elem = document.nativeGetElementById(id);  


        
if
(elem)  


          {  


            
//修改后的确认能得到id属性方法 
 


            
if
(elem.attributes[
'id'
].value == id)  


              {  


                
return
 elem;  


              }  


            
else
 


              {  


                
//如果没有ID相同的,那么就遍历所有元素的集合找到id相同的元素
 
 


                
for
(
var
 i=1;i<document.all[id].length;i++)  


                  {  


                    
if
(document.all[id][i].attributes[
'id'
].value == id)  


                      {  


                        
return
 document.all[id][i];  


                      }  


                  }  


              }  


          }  


        
return
 
null
;  


      };  


}

OK,这个问题总算解决了,希望我们的微软公司能早日修复这些JavaScript DOM BUG

分享到：

unicode中三种字节数所在范围 | getTimezoneOffset getYear parse toUTC ...

2010-08-29 20:05
浏览 1319
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论