IE中form混淆id与name的bug

于 2010-08-29 20:05:05 发布
阅读量236 收藏
点赞数
分类专栏： javascript 文章标签： IE JavaScript 浏览器 HTML XHTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/java_mail_test/article/details/83701492
版权
IE的document.getElementById混淆name和id属性的BUG

 

BUG演示

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

 
     
  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >    
  2.  < html   xmlns = "http://www.w3.org/1999/xhtml" >   
  3.  < head >   
  4.  < meta   http-equiv = "Content-Type"   content = "text/html; charset=utf-8"   />   
  5.  < title > IE document.getElementById BUG DEMO </ title >   
  6.  </ head >   
  7.    
  8.  < body >   
  9.  < script   language = "javascript" >   
  10.  /*  
  11.       IE document.getElementById BUG 演示DEMO  
  12.       作者:朦朧中的罪惡  
  13.       博客:http://be-evil.org  
  14.  */  
  15.  function changeValue()  
  16.  {  
  17.       var  username  =  document .getElementById('username');  
  18.       username.value  =  'Whahaha' ;  
  19.  }  
  20.  </ script >   
  21.  < form   action = "IE_BUG2.html"   method = "get" >   
  22.  < p > name: < input   type = "text"   name = "username"   /> </ p >   
  23.  < p > name2: < input   type = "text"   id = "username"   name = "name"   /> </ p >   
  24.  < p > < input   type = "button"   value = "改变"   onclick = "changeValue();"   /> </ p >   
  25.  </ form >   
  26.  </ body >   
  27.  </ html >   
 
     
很简单的一段代码,看上去似乎没有任何错误,但是在IE下点击改变按钮后,被改变值的对象居然是第一个name属性为username的input对象.而不是第二个id属性为username的对象.
 
     
如何避免这个问题? 
 
     
方法一：尽量避免在页面中出现name与id属性相同的对象
 
     
方法二：利用JavaScript的特点,重写document.getElementById
 
     
下面j解决问题的方法和思路是根据国外某位兄弟的经验翻译过来,原文在这里 ,这里非常感谢他的文章给我作参考!
 
     
1.首先初步的尝试复写document.getElementById的方法
 
     
 
     
  1.  if  (/msie/i.test (navigator.userAgent))  //根据userAgent确定用户使用IE浏览器     
  2.  {  
  3.       document.nativeGetElementById = document.getElementById;  
  4.       document.getElementById =  function (id)  
  5.       {  
  6.           var  elem = document.nativeGetElementById(id);  
  7.           if (elem)  
  8.           {  
  9.               //确定id相同    
  10.               if (elem.id == id)  
  11.               {  
  12.                   return  elem;  
  13.               }  
  14.               else   
  15.               {  
  16.                   //如果没有ID相同的,那么就遍历所有元素的集合找到id相同的元素    
  17.                   for ( var  i=1;i<document.all[id].length;i++)  
  18.                   {  
  19.                       if (document.all[id][i].id == id)  
  20.                       {  
  21.                           return  document.all[id][i];  
  22.                       }  
  23.                   }  
  24.               }  
  25.           }  
  26.           return   null ;  
  27.       };  
  28.  }  
 
     
看起来似乎没有任何问题,但是在IE7下的某些情况中又会引出一个getAttribute() 方法的问题.
 
     
看代码:
 
     
 
     
  1.  < html >    
  2.       < head >   
  3.           < title > Demonstrate IE7 getAttribute() bug </ title >   
  4.       </ head >   
  5.       < body >   
  6.           < form   id = "myForm1" >   
  7.               < input   id = "user_id"   name = "user_id"   value = "text"   />   
  8.           </ form >   
  9.           < form   id = "myForm2" >   
  10.               < input   id = "id"   name = "id"   value = "text"   />   
  11.           </ form >   
  12.           < script   type = "text/javascript" >   
  13.               var  formElement1  =  document .getElementById('myForm1');  
  14.               var  formElement2  =  document .getElementById('myForm2');  
  15.               alert(formElement1.getAttribute('id')+ "\n" + formElement2.getAttribute('id'));  
  16.           </ script >   
  17.       </ body >   
  18.  </ 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方法
 
     
 
     
  1.  if  (/msie/i.test (navigator.userAgent))  //根据userAgent确定用户使用IE浏览器   
  2.  {  
  3.       document.nativeGetElementById = document.getElementById;  
  4.       document.getElementById =  function (id)  
  5.       {  
  6.           var  elem = document.nativeGetElementById(id);  
  7.           if (elem)  
  8.           {  
  9.               //修改后的确认能得到id属性方法    
  10.               if (elem.attributes[ 'id' ].value == id)  
  11.               {  
  12.                   return  elem;  
  13.               }  
  14.               else   
  15.               {  
  16.                   //如果没有ID相同的,那么就遍历所有元素的集合找到id相同的元素    
  17.                   for ( var  i=1;i<document.all[id].length;i++)  
  18.                   {  
  19.                       if (document.all[id][i].attributes[ 'id' ].value == id)  
  20.                       {  
  21.                           return  document.all[id][i];  
  22.                       }  
  23.                   }  
  24.               }  
  25.           }  
  26.           return   null ;  
  27.       };  
  28.  }  
 
     
OK,这个问题总算解决了,希望我们的微软公司能早日修复这些JavaScript DOM BUG
 
    
 

                

        




    

  



    



            

  



          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值