时光博客 - WEB开发中的可用性和用户体验

JS innerHTML Double Quotes

通过jsinnerhtml来获取一个dom节点,内部的html值时,如果属性值没有空格,则ie左右版本下,都会出现标签大些,双引号丢失问题。如果属性值有空格,则标签会变成大写,引号则正常输出.看下面示例:

当属性值无空格时:
FF3.5.7(gecko/20091221)<div id="div2"></div>

IE6 弹出:<DIV id=div2></DIV>
IE7 弹出:<DIV id=div2></DIV>
IE8 弹出:<DIV id=div2></DIV>

有空格时:
FF3.5.7(gecko/20091221)<div id="div2 "></div>

IE6 弹出:<DIV id="div2 "></DIV>
IE7 弹出:<DIV id="div2 "></DIV>
IE8 弹出:<DIV id="div2 "></DIV>

产生这个BUG的原因是什么呢?

When you get the innerHTML of a DOM node in IE, if there are no spaces in an attribute value, IE will remove the quotes around it.IE's innerHTML doesn't remove quotes from non standard attributes.

即使是jQuery里面,jquery团队的技术人员也没有解决这个问题.

提供下解决方案:

  1. function ieInnerHTML(obj) { 
  2.      var zz = obj.innerHTML, 
  3.          z =  
  4.        zz.match(/<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>/g); 
  5.       if (z){ 
  6.         for (var i=0;i<z.length;i++){ 
  7.           var y, zSaved = z[i]; 
  8.           z[i] = z[i].replace(/(<?\w+)|(<\/?\w+)\s/, 
  9.                               function(a){return a.toLowerCase();}); 
  10.           y = z[i].match(/\=\w+[?\s+|?>]/g); 
  11.            if (y){ 
  12.             for (var j=0;j<y.length;j++){ 
  13.               z[i] = z[i].replace(y[j],y[j] 
  14.                          .replace(/\=(\w+)([?\s+|?>])/g,'="$1"$2')); 
  15.             } 
  16.            } 
  17.            zz = zz.replace(zSaved,z[i]); 
  18.          } 
  19.        } 
  20.       return zz; 
  21.      } 

在相应的地方调用函数ieInnerHTML

  1. if(/*@cc_on!@*/0){ 
  2.     inner_str = ieInnerHTML(obj); 
  3. }else
  4.     inner_str = obj.innerHTML; 

 原理:对IE版本进行对应的JS处理,而且相应的元素标签中不要出现非标准元素

参考资料:

  1. innerHTML removes attribute quotes in Internet Explorer
  2. innerHTML中的双引号哪去了?

 

«  上一篇 |  下一篇  »

赞助商广告

6 Responses

  1. Kevin Says:
    2010-01-23, 11:10 AM

    在IE下使用innerHTML之前,一定要用js修正一下

  2. Lin.x Says:
    2010-01-23, 2:40 PM

    暂时还没碰到这样的问题呢...
    id="abc " 有空格这样的写法..
    在精神层面上时不允许的...

  3. Kevin Says:
    2010-01-23, 4:31 PM

    @Lin.x
    这个问题,在IE版本里面都存在,至少到IE8还没有修正。只要用到innerHTML就会有这个问题

  4. samool Says:
    2010-01-24, 10:26 AM

    更新速度太慢了,成月经贴咯,哈哈哈。

  5. Kevin Says:
    2010-01-24, 1:46 PM

    呵呵,是更新很慢...找不到可写的,找到了自己又写不出来

  6. 娱乐网 Says:
    2010-01-28, 10:12 AM

    学习了。。。。

Leave a Reply





验证码(*):

提交留言时,请耐心等待一下,您在我博客上的留言将直接发到手机上。这可能需要一定时间。(*^__^*)