IE的setAttribute bug

精选转载

chenhuixfyy 2013-04-27 21:44:55 博主文章分类：javascript

文章标签 javascript onclick ie6/7 setattribute 文章分类 Java 后端开发

IE的setAttribute中与标准浏览器的有许多不同，一不小心地踩雷。你不能用它来设置name属性，你也不能在元素加入DOM后设置type属性，也不能用它直接设置内联事件（ inline event handlers），也不能用它设置样式……
在IE6,IE7中，如果动态生成input元素，是无法为其设置name属性的。当然这bug已经在IE8中被修复，详见这里。由于name属性对表单元素非常重要（在提交表单时，与value属性组成键值对，发送到后台），因此必须留意这个bug。

  
<!doctype html> 
<html dir="ltr" lang="zh-CN"> 
  <head> 
    <meta charset="utf-8"/> 
    <title>setAttribute bug  By 司徒正美</title> 
    <meta http-equiv="X-UA-Compatible" content="IE=7"> 
    <script type="text/javascript"> 
      window.onload = function(){ 
        var form = document.createElement("form"); 
        var input = document.createElement("input"); 
        var root = document.body; 
        input.setAttribute("name", "test"); 
        root.appendChild(form);//注意添加顺序，添加顺序错的话，IE会内存泄漏 
        form.appendChild(input);        
        alert(form.elements.test)     
      } 
    </script> 
 
  </head> 
  <body> 
    <h3>请在IE6与IE7下浏览，当然IE8也可以，我已让IE8处在IE7的兼容模式下运作。兼容模式连bugs也兼容了……</h3> 
  </body> 
</html>

解决办法有两个，如用innerHTML，觉得innerHTML真是一个伟大的发明，连火狐与W3C那帮死对头也不得不屈服。

  
<!doctype html> 
<html dir="ltr" lang="zh-CN"> 
  <head> 
    <meta charset="utf-8"/> 
    <title>setAttribute bug By 司徒正美</title> 
    <meta http-equiv="X-UA-Compatible" content="IE=7"> 
    <script type="text/javascript"> 
      window.onload = function(){ 
        var body = document.body; 
        var form = document.createElement("form"); 
        form.innerHTML = "<input name='test' type='text' />" 
        body.appendChild(form); 
        alert(form.elements.test) 
      } 
    </script> 
 
  </head> 
  <body> 
    <h3>请在IE6与IE7下浏览</h3> 
  </body> 
</html>

另一个利用IE强大的createElement特征，它能在创建元素的同时，连属性也一起创建。

  
<!doctype html> 
<html dir="ltr" lang="zh-CN"> 
  <head> 
    <meta charset="utf-8"/> 
    <title>setAttribute bug By 司徒正美</title> 
    <meta http-equiv="X-UA-Compatible" content="IE=7"> 
    <script type="text/javascript"> 
      window.onload = function(){ 
        var body = document.body; 
        var form = document.createElement("form"); 
        try{ 
          var input = document.createElement("<input type='text' name='test'>"); 
        }catch(e){ 
          var input = document.createElement("input"); 
          input.setAttribute("name", "test") 
        } 
        body.appendChild(form);//注意添加顺序，添加顺序错的话，IE会内存泄漏 
        form.appendChild(input); 
        alert(form.elements.test) 
      } 
    </script> 
 
  </head> 
  <body> 
    <h3>请在IE6与IE7下浏览</h3> 
  </body> 
</html>

但name只是冰山一角，setAttribute在设置属性时，有许多属性在IE下与标准浏览器的命名是不一样的，看一下jQuery，发现它也是不全的。许多地雷埋在这里，总有一个你迟早会中的。下面是一个详尽的参照表：左边为标准游览器的，右边是IE的。

var IEfix = { 
  acceptcharset: "acceptCharset", 
  accesskey: "accessKey", 
  allowtransparency: "allowTransparency", 
  bgcolor: "bgColor", 
  cellpadding: "cellPadding", 
  cellspacing: "cellSpacing", 
  "class":  "className", 
  colspan:  "colSpan", 
  checked: "defaultChecked", 
  selected: "defaultSelected", 
  "for":  "htmlFor" , 
  frameborder:  "frameBorder", 
  hspace:  "hSpace", 
  longdesc:  "longDesc", 
  maxlength:  "maxLength", 
  marginwidth:  "marginWidth", 
  marginheight:  "marginHeight", 
  noresize:  "noResize", 
  noshade:  "noShade", 
  readonly: "readOnly", 
  rowspan:  "rowSpan", 
  tabindex:  "tabIndex", 
  valign:  "vAlign", 
  vspace:  "vSpace" 
}

IE不能用setAttribute为dom元素设置onXXX属性，换言之，不能用setAttribute设置事件。

  
<!doctype html> 
<html dir="ltr" lang="zh-CN"> 
  <head> 
    <meta charset="utf-8"/> 
    <title>setAttribute bug By 司徒正美</title> 
    <meta http-equiv="X-UA-Compatible" content="IE=7"> 
    <script type="text/javascript"> 
      window.onload = function(){ 
        var body = document.body; 
        var form = document.createElement("form"); 
        form.innerHTML = "<input name='test' type='text' />" 
        body.appendChild(form); 
        form.elements.test.setAttribute("onfocus", "alert(this.name)"); 
      } 
    </script> 
 
  </head> 
  <body> 
    <h3>用setAttribute设置事件</h3> 
    <p>在IE下文本域获得焦点后并没有弹出预期的alert!</p> 
  </body> 
</html>

IE要直接赋给一个函数！

var body = document.body; 
var form = document.createElement("form"); 
form.innerHTML = "<input name='test' type='text' />" 
body.appendChild(form); 
if(!+"\v1"){ 
  form.elements.test.setAttribute("onfocus", function(){alert(this.name)}); 
}else{ 
  form.elements.test.setAttribute("onfocus", "alert(this.name)"); 
}

  
<!doctype html> 
<html dir="ltr" lang="zh-CN"> 
  <head> 
    <meta charset="utf-8"/> 
    <title>setAttribute bug By 司徒正美</title> 
    <meta http-equiv="X-UA-Compatible" content="IE=7"> 
    <script type="text/javascript"> 
      window.onload = function(){ 
        var body = document.body; 
        var form = document.createElement("form"); 
        form.innerHTML = "<input name='test' type='text' />" 
        body.appendChild(form); 
 
        if(!+"\v1"){ 
          form.elements.test.setAttribute("onfocus", function(){alert(this.name)}); 
        }else{ 
          form.elements.test.setAttribute("onfocus", "alert(this.name)"); 
        }         
      } 
    </script> 
 
  </head> 
  <body> 
    <h3>IE用setAttribute设置事件要直接赋函数！</h3> 
  </body> 
</html>

在IE6与IE7中也不能用setAttribute设置样式:dom.setAttribute("style","font-size:14px")

  
<!doctype html> 
<html dir="ltr" lang="zh-CN"> 
  <head> 
    <meta charset="utf-8"/> 
    <title>setAttribute bug By 司徒正美</title> 
    <meta http-equiv="X-UA-Compatible" content="IE=7"> 
    <script type="text/javascript"> 
      window.onload = function(){ 
       var styleData = 'border:1px solid #000;background:#F1FAFA;font-weight:bold;'; 
        var h3 = document.getElementsByTagName("h3")[0] 
      
        h3.setAttribute('style', styleData); 
      } 
    </script> 
 
  </head> 
  <body> 
    <h3>IE6与IE7看不到效果！</h3> 
  </body> 
</html>