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))
- {
- document.nativeGetElementById = document.getElementById;
- document.getElementById = function(id)
- {
- var elem = document.nativeGetElementById(id);
- if(elem)
- {
-
- if(elem.id == id)
- {
- return elem;
- }
- else
- {
-
- 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))
- {
- document.nativeGetElementById = document.getElementById;
- document.getElementById = function(id)
- {
- var elem = document.nativeGetElementById(id);
- if(elem)
- {
-
- if(elem.attributes['id'].value == id)
- {
- return elem;
- }
- else
- {
-
- 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